SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    differing class behaviour

    A query on multiple instances of class="current" when applied to ul/li.

    My site pages feature several navigation bars for primary(around the site) and secondary(within specific sections) navigation. They're coded as ul with appropriate css.

    Within each navbar is a 'currently viewing' li for which the link is removed. It's tagged as class="current". The behaviour 'current' can differ between individual lists - on one list it may set text as bold; and normal weight on another.

    Is the simplified example CSS and HTML below ok? Or will 'things get confused and display incorrectly'?

    Example CSS

    ul#mainnav li.current
    {
    font-size: 11px;
    font-weight: bold;
    color: #999;
    }

    ul#zonenav li.current
    {
    font-size: 10px;
    font-weight: normal;
    color: #666;
    }

    Example HTML
    <ul id="mainnav">
    <li class="current">one</li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">four</a></li>
    <li><a href="#">five</a></li>
    </ul>

    <ul id="zonenav">
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li class="current">four</li>
    <li><a href="#">five</a></li>
    </ul>

  2. #2
    High fives all round! bradley317's Avatar
    Join Date
    Jan 2004
    Location
    Chester, UK
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you have to define the style twice within the css, why not produce two differant classes, e.g. current1 and current2

    Is there any reason why you have to use the exact class name 'current'?
    Hello, hello, what's all this shouting?
    We'll have no trouble here

    (Helping a pal... http://www.funkdub.info)

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bradley317
    If you have to define the style twice within the css, why not produce two different classes, e.g. current1 and current2

    Is there any reason why you have to use the exact class name 'current'?

    Damn fine point, sir.
    It'll certainly help avoid 'which tie shall I wear today' browser confusion - and perhaps help me better understand my code when I have to go back to it months later and have forgotten stuff.

    I like the 'simplicity' of "current" - and am perhaps thinking ahead in trying to avoid what could become a johnny4567893@h*tmail.com scenario. With a little creative thinking I'm sure I can get some appropriate names... class="currentzone" and class="currentsubzone".

    So yeah. Thanks. Appreciated. And, if I name them individually, I guess it avoids even having to think about browser reliability.

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Vancouver, BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ehm, why produce different names classes? Just use divs IDs if u want to have different names.. if you want to have the same then use class... so simple and i dont get why you would use current for both - completely different uses and completely different definitions... go for the ID, but remember ID is unique (each name only once in document)
    Last edited by Xerxos; Sep 24, 2004 at 16:35.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Your original version will work as the classes become dependent on the id before it. Just as if you define p.test then the class test only applies in paragraphs etc.

    I quote often use an id on the body so that I can use the same styles on different pages but have them take different effect and still keep them all in the one stylesheet.

    This is very useful for indicating the current page on a main navigation. Each page has an id in the body tag and each naviagation item has the class current. However the only one that gets the highlight is the one that matches the body id.#body .current {color:red}. All the rest of the links get the standard class etc.

    Paul

  6. #6
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    >why produce different names classes? Just use divs

    It's late and I may be misunderstanding this... so's I could subsequently look at and better understand my code, I specifically name my lists rather than rely on them to behave according to the parent div.

    And Paul - thanks again. Another detailed response which gives me exactly the info I needed.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Heres a couple of examples in case anyone wants to know:

    If you want to have say a different colour theme on a page such as changing the header bg colour then you can use the same style but use the body id to target the page as required.

    Code:
    body#home #header{background:red;}
    body#page1 #header{background:blue;}
    body#page2 #header{background:green;}
    On the home page the header will be red but on other pages they will be as described by the appropriate body id. This means the css stays constant and the only change to each page is to identify it with the body tag.

    This is similar to what you were doing above but your usage would be in the same page and identified in a similar manner by the target id.

    To highlight a navigation menu for the current page needs a little more thought and is slighlty different to what I previously mentioned so i better explain it properly (I just posted this in another thread so i'll just repeat it here for clarity.)
    Code:
    body#first a.page1 {background:red;}
    body#second a.page2 {background:red;}
    body#third a.page3 {background:red;}
    Code:
    <body id="first">
    <!-- change the id on each page to either first, second or third -->
    <ul id="menu">
     <li><a class="page1" href="#">Page 1</a></li>
     <li><a class="page2" href="#">Page 2</a></li>
     <li><a class="page3" href="#">Page 3</a></dli>
    </ul>
    That last bit drifted off topic but as I mentioned navigation in my first post I thought I better show an example

    Paul

  8. #8
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Vancouver, BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ehm, i am sorry... i ment use IDs.. i dont see the point of using the classes, if they have different purpose, they are only once in the document and so on...


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
  •