SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You should be able to find something here that you like

    http://www.explorinlauren.com/reposi...-css-tabs.html
    http://www.alvit.de/css-showcase/css...s-showcase.php
    http://webdeveloper.econsultant.com/...vigation-tabs/
    http://www.smashingmagazine.com/2007...ce-techniques/


    and on going to the page the same big hieght menu will be their to show the current page highlighted and the rest will be in small height
    You would usually do that by adding a "current" class to the relevant item on that page that gives it the same styles as the hover state. Or alternatively targeting the element via an ID in the body tag. It's the same process except the id/class is added to the body on each page instead of the list itself. This example shows it in action.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    (Just as an aside, you can safely move the body style rule from the HTML and put it directly in your stylesheet, then safely remove the <style></style> tags and everything inside them.)

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You want the current state to be 50px tall, right?

    (By the way, try turning the images off in your browser while leaving the CSS on. It's not pretty.)

  4. #4
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nisha View Post
    here i have coded the top menu and linked first to pages
    now the main problem is i am not able to code the menu
    for active page i.e. when u will click on the about link
    other page comes but the about link should also be
    big in height as it shows on rollover. so in short i am
    confused how to add the current page code to my menu
    which will show my current page tab in 50px height then the rest
    tabs which are 37px height.
    Here's a clue. Add a unique ID for each of your pages in the body tag. Then use that ID to style the LI so that it is at 50px height.
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

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

    Add a different identifying link to the body tag on each page and then use that to target the menu.

    Here's the first two done for you:
    e.g.
    Code:
    #homepage #home a{background: url(http://r-interactive.net/clients/Avenues/images/navbar.jpg)
    no-repeat 0 -50px;}
    #aboutpage #about a{background: url(http://r-interactive.net/clients/Avenues/images/navbar.jpg)
    no-repeat -82px -50px;}
    Code:
    <body id="aboutpage">
    <div id="header">
    on the homepage you would change the id to this:

    Code:
    <body id="homepage">
    <div id="header">
    Do the same for the other pages and copy the css format I have given above.

    e.g.
    #openingspage #opening a{etc.....}
    #articlespage #articles a{etc....}

    and so on.....

    The first id is the one that goes in the body tag on the relevant page and then when the page is opened that tab will be highlighted.

    In your example above you had this:
    Code:
    <li id="home" name="home" class="active">
    But you addressed it like this:
    Code:
    #home .active a
    Which misses the element because the class isn't contained within a descendant element. It's on the same element as the ID and the format should have been.

    Code:
    #home.active a
    However IE6 doesn't understand that format so you should have just targeted by the class alone and made it !important.

  6. #6
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well done.

    However, as Paul suggested, you should put the id in the body tag and target the LI in the style sheet without the need to have a class for that LI.

    It makes for a more elegant solution that is easier to manage.
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by nisha
    and it works
    Yes but as I pointed out this won't work in IE6 and under. It will appear to work while you only have one set defined but as soon as you define another then the whole thing falls to bits. If you want to support IE6 and under then don't use id.classname (or even classname.classname).


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
  •