SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict mari's Avatar
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face multiple li classes

    Hi guys

    how do i work this out, i have a navigation menu, and i want the last item in li to have a different style so im doing this at the moment

    Code:
    .menu li{
    float:left;
    position:relative;
    z-index:100;
    background: url(images/nav_break.png) right no-repeat;
    }
    
    .menu li.end{
    float:left;
    position:relative;
    z-index:100;
    }
    and in my html im doing

    <li>list item 1</li>
    <li>list item 2</li>
    <li class="end">list item 2</li>

    this doesnt seem to work, it is still applying the main li to end item too

    any ideas?

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    It should be working fine, are you sure that you have your list items nested in a UL with the class of .menu

    I do not see the <ul class="menu"> in the html you posted above.

    Try this and see if it does what you are after.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Nav Menu</title>
     
    <style type="text/css">
    .menu {
    float:left;
    margin:0;
    padding:0;
    list-style:none;
    border:1px solid #000;
    }
    .menu li{
    float:left;
    border-right:1px solid #000;
    }
    .menu li.end{
    border-right:0;
    }
    .menu li a{
    float:left;
    padding:2px 5px;
    background:#CDF;
    text-decoration:none;
    }
    .menu li.end a {
    background:#FFF;
    border-right:0;
    }
    .menu li a:hover {background:lime}
    .menu li.end a:hover {background:yellow}
    </style>
    </head>
    <body>
     
    <ul class="menu">
        <li><a href="#">list item 1</a></li>
        <li><a href="#">list item 2</a></li>
        <li class="end"><a href="#">list item 3</a></li>
    </ul>
     
    </body>
    </html>

  3. #3
    SitePoint Addict mari's Avatar
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Rayzur

    i didnt put all the code there but it is int he same ul

    it didnt work that way but i added my change in the

    .menu li.end a

    and have achieved what i wanted so thanks

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Okay, glad you got it sorted out.

    In the code I posted above I set a right border on the "li" and no right border on the "li.end".

    Then I set the BG colors on the "a" and changed them on hover. Looking back at my code I noticed a typo where I set border-right:0; on the " li.end a ". That was not intended to be there since the borders were set on the "li"

    However, you could set your borders on the anchors if you choose to. I am just pointing out the typo below in red.

    Code:
    .menu li.end a {
    background:#FFF;
    border-right:0;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •