Skip to main content

Forums

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #22899
    thewakeplace
    Member

    Hi All

    Just a quick one – i can’t see a part 4 for the PSD to web conversion tutorials, and i have a quick question regarding the rollover states for the active pages:

    When i am on my home page, and i want that tab to be the all white ‘active page’ tab, do i just go into the CSS on each individual page, and set the link background height to the top on that specific page? Does that make sense?
    That i adjust the background height of the tab to the active state on the individual pages that they correspond to?

    Thanks

    JP

    #48424
    thewakeplace
    Member

    actually what am i talking about –

    Code:
    ul#nav li.home a { width: 262px;
    background:url(Images/nav_home.jpg) bottom center no-repeat;
    }
    ul#nav li.videos a { width: 200px;
    background: url(Images/nav_video.jpg) bottom center no-repeat;
    }
    ul#nav li.downloads a { width: 200px;
    background:url(Images/nav_downloads.jpg) bottom center no-repeat;
    }
    ul#nav li.contact a { width: 338px;
    background:url(Images/nav_contact.jpg) bottom center no-repeat;
    }
    ul#nav li a:hover { background-position: center center;
    }

    The above is the code from the page at the moment. I have the hover effect all done fine – what i need is the CSS that moves the image up once again to an active state effect. How to i move the image when i go to different pages?

    Sorry for being dumb with it. . .

    #48440
    Chris Coyier
    Keymaster

    This reply has been reported for inappropriate content.

    The trick here is applying an ID to the body tag of your page.

    So like on your videos page you would have <body id="videos">. Then in your CSS, you can add:

    Code:
    body#videos ul#nav li.videos a {
    background-position: top center;
    }
    #48452
    thewakeplace
    Member

    Perfect!!! Cheers Chris!

    #48454
    thewakeplace
    Member
    Code:
    ul#nav li.home a { width: 262px;
    background:url(Images/nav_home.jpg) bottom center no-repeat;
    }
    ul#nav li.videos a { width: 200px;
    background: url(Images/nav_video.jpg) bottom center no-repeat;
    }
    ul#nav li.downloads a { width: 200px;
    background:url(Images/nav_downloads.jpg) bottom center no-repeat;
    }
    ul#nav li.contact a { width: 338px;
    background:url(Images/nav_contact.jpg) bottom center no-repeat;
    }
    ul#nav li a:hover { background-position: center center;
    }
    body#home ul#nav li.home a {
    background-position: top center;
    }
    body#video ul#nav li.video a {
    background-position: top center;
    }

    So my CSS will look like this? The Home Page one works, but the video one doesn’t. . . . ?? Any Ideas???

    #48471
    Nodster
    Member
    Quote:
    body#video ul#nav li.video a {
    background-position: top center;

    looks like you missed the letter ‘s’ from video add it and it should be fine

    #48494
    thewakeplace
    Member

    Cool – its working! How stupid am i. . . :)

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.