SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: class="last"

  1. #1
    SitePoint Enthusiast Thelma's Avatar
    Join Date
    Jun 2004
    Location
    San Antonio. TX
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    class="last"

    On this menu, the last item (class="last") should not have the right border. I"ve tried all kinds of variations and nothign seems to work - I know it' s something simple, but WHAT????

    <div id="nav">
    <ul>
    <li><a href="index.html">HOME</a></li>
    <li><a href="more.html">MORE ABOUT ME</a></li>
    <li><a class="last" href="less.html">LESS ABOUT ME</a></li>
    </ul>

    <p class="center">Enter the site to my Mobile DJ Service here/p>
    <ul>
    <li class="last"><a href="http://www.aandbwebdesign.com/music">A Millennium of Music</a></li>
    </ul>
    </div>

    #nav {
    margin: 2em;
    padding: 5px;
    width: auto;
    }

    #nav ul
    {
    padding: .2em 0;
    margin: 0;
    list-style-type: none;
    background-color: #036;
    color: #FFF;
    width: 100%;
    font: normal 1.2em arial, helvetica, sans-serif bold;
    text-align: center;
    }

    li { display: inline; }

    #nav li a
    {
    text-decoration: none;
    background-color: #036;
    color: #FFF;
    padding: .2em 1em;
    border-right: 1px solid #fff;
    }

    #nav li a:hover
    {
    background-color: #369;
    text-decoration: none;
    color: #fff;
    }

    .last a {
    border: 0;
    }


    I have moved the "class="last" in the <li> and in the <a> - neither works. The only time I saw a reaction was while I had it the <li> and had accidentally deleted the "a" out of the <a>.

    The page is here

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you try
    #nav li a.last
    {
    border: 0;
    }

    ?

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Michigan
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The list is what's causing your problem. I've just removed the last <li> and styled the link using a class. Seems to work.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    <style type="text/css">
    
    #nav {
    margin: 2em;
    padding: 5px;
    width: auto;
    }
    
    #nav ul
    {
    padding: .2em 0px;
    margin: 0px;
    list-style-type: none;
    background-color: #036;
    color: #FFF;
    width: 100%;
    font: normal 1.2em arial, helvetica, sans-serif bold;
    text-align: center;
    }
    
    li { display: inline; }
    
    #nav li a
    {
    text-decoration: none;
    background-color: #036;
    color: #FFF;
    padding: .2em 1em;
    border-right: 1px solid #fff;
    }
    
    #nav li a:hover
    {
    background-color: #369;
    text-decoration: none;
    color: #fff;
    }
    
    a.last {
    text-decoration: none;
    color: #FFF
    }
    </style>
    <title>Untitled</title>
    </head>
    <body>
    <div id="nav">
    <ul>
    <li><a href="index.html">HOME</a>
    <li><a href="more.html">MORE ABOUT ME</a></li>
    <li><a class="last" href="less.html">LESS ABOUT ME</a></li>
    </ul>
    
    <p class="center">Enter the site to my Mobile DJ Service here:</p>
    <ul>
    <a href="http://www.aandbwebdesign.com/music" class="last">A Millennium of Music</a>
    </ul>
    </div>
    </body>
    </html>
    Simply paste the above into an HTML file and you're all set. If you have a problem post back

    -Mason

  4. #4
    SitePoint Enthusiast Thelma's Avatar
    Join Date
    Jun 2004
    Location
    San Antonio. TX
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, but I tried BonRouge's suggestion and it's not doing it and Mason's code won't work for validating XHTML strict (it does not like the <ul> without a <li>) - and it also does not work on the upper navbar - behind the "Less about me".

    But since the class=last works when we remove the <li> - maybe it's something about the css for my <li> that's preventing the class=last to function?

  5. #5
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry - my mistake.

    #nav li.last a {
    border: 0;
    }
    This works (I tried it).

    (Keep the "last" in your <li>)

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Michigan
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops! Sorry, I was in a hurry last night. I think BonRouge's method will work and the code will validate as XHTML 1.0 Strict. Post back if you're still having problems.

  7. #7
    SitePoint Enthusiast Thelma's Avatar
    Join Date
    Jun 2004
    Location
    San Antonio. TX
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BonRouge
    Sorry - my mistake.

    #nav li.last a {
    border: 0;
    }
    This works (I tried it).

    (Keep the "last" in your <li>)

    IT WORKS!!!! Thank you very much!!! Both of you.


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
  •