Tab navigation like on guardian site

Discussion in 'Web Design' started by dsydius, Nov 22, 2010.

to remove all ads.
  1. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Ok here ya go. Take a look at that and let me know if you have any questions.
     

    Attached Files:

  2. dsydius

    dsydius New Member

    Messages:
    11
    PP,

    That's awesome! I didn't expect it to be as simple as you have made it look.

    Can't thank you enough......I have learned so much in just that one task than I have in the last few months.

    Thanks again PP.....you are a star.

    DS
     
  3. smoovo

    smoovo New Member

    Messages:
    377
    Perfect! Even though I'm using sprites it was out of my mind... :eek:
     
  4. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Thanks guys, glad to help out.
     
  5. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Just wanted to make one comment on the css info I gave you.
    There is a class named :
    Code:
    ul.menu li:last-child a
    
    This class uses a css psuedo class. Psuedo classes are very helpful. They allow the developer to target certain elements on the page markup without actually having to create a specific class name.

    Problem is...and there is always one right :p

    IE doesn't understand many psuedo classes. (IE must have been ditching class when all other browsers where being good students, haha....ok dumb joke)


    Whats the solution?

    Just make a specific class (e.g. last-item) and add the class name to the last list item in the menu. So it would look like this:
    Code:
    ul.menu li.last-item a, ul.menu li.top-category a, ul.menu li.sub-category a {
    	border:none;
    }
    
    HTML:
    <ul class="menu">
    	<li class="top-category"><a href="intermediate_menu_pg1.html">news</a></li>
        <li class="first-item"><a href="intermediate_menu_pg2.html">UK</a></li>
        <li><a href="#">world</a></li>
        <li><a href="#">development</a></li>
        ...
        <li class="last-item"><a href="#">law</a></li>
    </ul>
    
     
    Last edited: Dec 3, 2010
  6. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
  7. bcee

    bcee New Member

    Messages:
    367

Share This Page