Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Template Questions /

how to remove last menu Border


Reply


7 Posts   6440 Views

Avatar
Prakash

Community Member, 1 Post

13 June 2009 at 2:21am

how to remove last menu border of Control Menu(1)
i have use this code of .ss file
<div id="Navigation">
   <ul>
      <% control Menu(1) %>   
         <li><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode"><span>$MenuTitle.XML</span></a></li>
      <% end_control %>
    </ul>
</div>
and use this css
#Navigation {
   width: 651px;
   margin: 0 auto;
   padding: 0px;
   overflow: hidden;
}
   #Navigation ul {
      float: right;
/*      margin-right: 10px;
*/   }
      #Navigation ul li {
          list-style: none;
         margin: 0 0px;
         float: left;
         line-height: 11px;
         display: block;
      }
         #Navigation ul li a {
            float: left;
            text-decoration: none;
            display: block;
            font-size: 11px;
            padding: 0;
            color: #333333;
            text-transform:uppercase;
            padding:5px 0px;
            font-weight:normal;
         }
            #Navigation ul li a span {
               text-align: center;
          float: left;
/*               padding-right: 10px;
*/               padding:0px 5px 0px 5px;
               border-right:1px solid #EBAB01

            }
               #Navigation ul li a:hover {
                  color: #CCCCCC;
                  cursor: pointer;
               }
               #Navigation ul li a:hover span {
                  cursor: pointer;
                  color: #CCCCCC;
               }
               
         #Navigation ul li a.current,
          #Navigation ul li a.section,
          #Navigation ul li a.section:hover,
          #Navigation ul li a.current:hover {
                color: #B8081C;
               }
            #Navigation ul li a.current span,
            #Navigation ul li a.section span,
          #Navigation ul li a.section:hover span,
            #Navigation ul li a.current:hover span {
                color: #B8081C;
            }
its works prefectly but there are some small problem of border of last menu can i remove this border throw css or other option if yes so how to remove this

Attached Files
Avatar
Willr

Forum Moderator, 5513 Posts

15 June 2009 at 6:27pm

You can use the variable $Last when iterating over a list

<% if Last %>class="lastElement"<% end_if %>

Then you can use the lastElement class to style it without a border etc.

Avatar
Howard

Community Member, 215 Posts

16 June 2009 at 10:21pm

Even easier you can just include class="$FirstLast" which will give the first item the class 'first' and the last 'last' :)

Avatar
pinkp

Community Member, 168 Posts

2 September 2009 at 11:07pm

Could someone help me achieve this please, as I can't get it to work....

Here's my .ss code:

<div id="navcontainer">
<ul><% control Menu(1) %>
<li class="$LinkingMode" class="$FirstLast"><a href="$Link" title="{$Title}">$MenuTitle</a></li>
<% end_control %></ul> </div>

Here's my CSS

div#navcontainer {
   font-size: 14px;
   text-decoration: none;
   background-color: #FFFFFF;
   padding-top: 5px;
   padding-left: 20px;
   border-right-width: thin;
   border-left-width: thin;
   border-right-style: solid;
   border-left-style: solid;
   border-right-color: #666666;
   border-left-color: #666666;
}
#navcontainer ul
{
   /* cancels gap caused by top padding in Opera 7.54 */
width: 100%;
   line-height: 14px;
   margin: 0px;
   font-family: Georgia, "Times New Roman", Times, serif;
   padding-top: 0px;
   padding-right: 0px;
   padding-bottom: 20px;
   padding-left: 0px;
}
#navcontainer ul li
{
   display: inline;
}
#navcontainer ul li a, a:visited
{
   text-decoration: none;
   font-weight: bold;
   color: #333333;
   border-right-width: thin;
   border-right-style: dotted;
   border-right-color: #003399;
   padding-top: 0px;
   padding-right: 15px;
   padding-bottom: 0px;
   padding-left: 15px;
   font-family: Georgia, "Times New Roman", Times, serif;
}
#navcontainter li.Last a
{
border-right: none;
}

#navcontainer ul li a:hover, a:active
{
   color: #003499;
   text-decoration: none;
   font-weight: bold;
   border-bottom-style: none;
}

What am i doing wrong??

Also I want to change the style of the active menu link...
Can someone please show me what to include? Thanks! :)

Avatar
Pigeon

Community Member, 243 Posts

3 September 2009 at 2:42am

#navcontainter li.Last a
{
border-right: none;
}

needs to be:

#navcontainer ul li.Last a
{
border-right: none;
}

The problem that you have is that #navcontainer ul li a is over-riding the #navcontainer li.Last a - adding the ul will fix it.

Hope that helps.

Avatar
pinkp

Community Member, 168 Posts

3 September 2009 at 3:45am

:) Thanks Pigeon, but it didn't actually work... I'm sure your right though! I think there may be issues else where (maybe), I've just started converting this site to SS and I having a few problems with little details like this. I might just start from scratch.

> Can't remove my last border on my menu

> I have a "Home" link even though I don't have a page called home and the page with the Page Type "Home Page" is not becoming my home page! ugh.

> Also can't get the .current CSS to work in the menu either...

I'll keep trying.

Avatar
Pigeon

Community Member, 243 Posts

3 September 2009 at 4:32am

Ok, if that hasn't sorted it use something like Opera Dragonfly or (god forbid) FireBug to see where the CSS property is being over written.