PSD to Web Tutorial Videos. . .

[thewakeplace]

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

[thewakeplace]

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

[thewakeplace]

Perfect!!! Cheers Chris!

[thewakeplace]

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

[Nodster]

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

[thewakeplace]

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

[Author]

Posts