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?
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?
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
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. . .
So like on your videos page you would have <body id="videos">. Then in your CSS, you can add:
body#videos ul#nav li.videos a {background-position: top center;
}
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???
looks like you missed the letter 's' from video[s] add it and it should be fine