SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast Pharaoh001's Avatar
    Join Date
    Oct 2002
    Location
    Perth, Australia
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multi coloured nav

    Hi all,
    I have a standard horizontal nav bar utilising the UL/LI styles. See attachement.
    What I now would like to do is have each section in a different color.
    I have tried adding a seperate class to each one, but the design will not stay constant.
    Is this something that can be done in CSS or will i need to add JavaScript to it.

    Thanks
    Attached Files Attached Files

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Hi, Cant see your attachment because its not approved, but have you tried wrapping your li's with spans like this:

    Code:
    <style type="text/css">
    #blue li a {background: blue;}
    #green li a {background: green;}
    </style>
    
    </head>
    <body>
    
    <ul>
    <span id="blue"><li><a href="">blue</a></li></span>
    <span id="green"><li><a href="">green</a></li></span>
    </ul>
    Don't know if this is valid xhtml though

  3. #3
    SitePoint Enthusiast Pharaoh001's Avatar
    Join Date
    Oct 2002
    Location
    Perth, Australia
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the code that was in the attachement:



    #navcontainer
    {
    margin: 0 0 0 0;
    padding: 0;
    height: 19px;
    background-color: #999;
    }
    #navcontainer ul
    {
    border: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    }

    #navcontainer ul li
    {
    display: block;
    float: left;
    text-align: center;
    padding: 0;
    margin: 0;
    }

    #navcontainer ul li a
    {
    background: #fff;
    width: 90px;
    height: 18px;
    border-top: 1px solid #777775;
    border-left: 1px solid #777775;
    border-bottom: 1px solid #777775;
    border-right: none;
    padding-top: 4px;
    margin: 0;
    color: #777775;
    text-decoration: none;
    display: block;
    text-align: center;
    font-size:12px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }

    #navcontainer ul li a:hover
    {
    color: #000;
    background: #DDDDDD;
    }

    #navcontainer a:active
    {
    background: #fff;
    color: #777775;
    }

    #navcontainer li#active a
    {
    background: #fff;
    border: 1px solid #777775;
    color: #fff;
    }
    May fortune favour the brave....

  4. #4
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Holland
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Classes, or even ids

    No, wrapping list-items in spans is not valid HTML, and unnecessary at that.
    The point basically is being able to address every list-item separately; this can be accomplished by giving them each a class of their own. If that nav bar is the only one on the page and each list-item is unique, ids can be used equally well (and are more specific):
    Code:
    ...
    <ul>
    <li id="foo"><a href="#">Foo</a></li>
    <li id="bar"><a href="#">Bar</a></li>
    </ul>
    Through the rules:
    Code:
    #foo {...}
    #bar {...}
    any styles can be applied to each list-item separately, such as coloring or background images, etc.
    Regards,
    Ronald.


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
  •