Template Questions

SilverStripe Forums » Template Questions » how to remove last menu Border

Moderators: martimiz, Howard, Sean, Ryan M., biapar, Willr, Ingo, swaiba, simon_w

Page: 1	Go to End
Author	Topic:	5024 Views

Prakash

Community Member
1 Post
how to remove last menu Border

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
- problem-image.jpg
  167 KB
Willr

Forum Moderator
5168 Posts

Re: how to remove last menu Border

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.
Howard

Forum Moderator
215 Posts

Re: how to remove last menu Border

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'
pinkp

Community Member
158 Posts

Re: how to remove last menu Border

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!
Pigeon

Community Member
238 Posts

Re: how to remove last menu Border

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.
pinkp

Community Member
158 Posts

Re: how to remove last menu Border

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.
Pigeon

Community Member
238 Posts

Re: how to remove last menu Border

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.