Jump to:

3447 Posts in 1032 Topics by 872 members

Template Questions

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

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 6400 Views
  • Prakash
    Avatar
    Community Member
    1 Post

    how to remove last menu Border Link to this post

    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
  • Willr
    Avatar
    Forum Moderator
    5511 Posts

    Re: how to remove last menu Border Link to this post

    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
    Avatar
    Community Member
    215 Posts

    Re: how to remove last menu Border Link to this post

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

  • pinkp
    Avatar
    Community Member
    168 Posts

    Re: how to remove last menu Border Link to this post

    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
    Avatar
    Community Member
    243 Posts

    Re: how to remove last menu Border Link to this post

    #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
    Avatar
    Community Member
    168 Posts

    Re: how to remove last menu Border Link to this post

    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
    Avatar
    Community Member
    243 Posts

    Re: how to remove last menu Border Link to this post

    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.

    6400 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.