Grow your CSS skills. Land your dream job.

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

    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.

*May or may not contain any actual "CSS" or "Tricks".