All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

PSD to Web Tutorial Videos. . .

  • # July 9, 2008 at 4:32 pm

    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

    # July 9, 2008 at 5:51 pm

    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. . .

    # July 10, 2008 at 9:10 am

    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;
    }
    # July 10, 2008 at 4:38 pm

    Perfect!!! Cheers Chris!

    # July 10, 2008 at 5:37 pm
    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???

    # July 11, 2008 at 11:11 am
    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

    # July 12, 2008 at 7:53 am

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed