It turned out the method I had used here wasn't as good as it could have been, so felt it was in need of an update.
Please see www.camaban.co.uk/cssroll.php for the updated version, feel free to compare this old version and that newer one, you may learn something from the differences!)
There have been a few comments about rollovers recently and though I?ve linked to an article about it I thought I?d put up a little How To? about CSS Rollovers.
I?ll do it from the point of view of rollovers for text links in a left hand nav bar to get the general principle across, of course there are LOADS more thing you can do with when you start experimenting.
First off, we need an HTML page to apply it all to, to save typing all this out before getting to the good stuff, download it here.
If you have a look at it you?ll notice there isn?t a lot there at all and no layout what so ever. I?ve seen a few of these type of tutorials using tables for the layout, I on the other hand want to try and promote CSS Layout and XHTML Web Standards and so am skipping tables altogether
So to actually get our left-hand nav bar we?re going to need a basic CSS file to set things up. To save this, again download from here.
I don?t plan to go through the CSS, though if there are some requests I could do so in another post.
Anyway, the important bit in the HTML is the <div id=?navbar?>, its in this that were going to do all the work, the rest is just there to make it look a bit ?site like?.
In this div we have a list of standard text links to imaginary. They are all given the same CSS class identifier, navbut.
The only CSS we have affecting the text in this div at the moment is setting the font, making the size 80% of the normal size, centring it and giving it some padding from the edges of the div.
Now in order to make a rollover we need to set a style for the link in its normal state, one for its hover state, and then tell it to return to the normal state again after. If you?ve fiddled with CSS before you?ll probably be aware of the a:link, a:active, a:visited and maybe a:hover. CSS2 states that you can use these with objects other than JUST <a> links, you can make standard images have those states if you want!!
In this case we want to apply the same style to normal links and to visited links with a different style to links being hovered over.
To start with lets create a style for the standard links. First thing is the selector we need to use.
We want to apply a style to any a tags and to a tags that have already been visited. We also only want to apply these styles to links in the navbar. Fortunately we have set a class for all the links in the navbar so that part is easy enough.
With this in mind we are looking to apply the style to any a tag with the class selector navbut whether in normal state or the visited state. Thus the full selector will be
a.navbut, a:visited.navbut{}We could split it out and set each separately but would only be duplicating code, this way we can apply the style to both states at the same time.
So now we need to make some styles. First off just some general text formatting. Make it all look nice by align the text to the centre, take away the underline and add a bit colour. Were also going to make the links block level elements rather than the default inline to help with consistancy (I?ll admit that I?ve not really got my head round this inline/block level stuff yet, but what Eric Meyer says is good enough for me!) so we get?
a.navbut, a:visited.navbut{
display:block;
text-align: center;
text-decoration:none;
color: #a54105;
}
Nothing special yet so lets add a border to it, make it look a bit button like.
a.navbut, a:visited.navbut{
display:block;
text-align: center;
text-decoration:none;
color: #a54105;
border-style: ridge;
border-width: 2px;
border-color: #EEC #EEC #C66 #C66;
}
Now that?s a bit more styled (whether stylish or not is upto you
), the ?buttons? are pretty close together though, so lets add some margin to space it out a little and in case we ever want to change the navbar background colour while keeping the buttons background, we?ll set that as well. So the finished product will look like?
a.navbut, a:visited.navbut{
display:block;
text-align: center;
text-decoration:none;
color: #a54105;
border-style: ridge;
border-width: 2px;
border-color: #EEC #EEC #C66 #C66;
margin-top: 3px;
margin-bottom:3px;
background: #ccc;
}
So we have our styled links, you could just leave them as they are and they would work fine as your navigation bar. To a bit more to it though, make it a little nicer and maybe more usable we can pretty easily add a rollover to accentuate the links.
This pretty easy to do, all we need to do is create a slightly different version of what we already have. First off we need our new selector for the hover state of the a tags with the class navbut. Following what we did with the last bit its not too difficult to work out we need?
a:hover.navbut{}
Then we?ll just copy the other rules into this one and then make a couple of changes for the rollover effect.
So, we?ll get our styling ready by copying the info over to get
a:hover.navbut{
display:block;
text-align: center;
text-decoration:none;
color: #a54105;
border-style: ridge;
border-width: 2px;
border-color: #EEC #EEC #C66 #C66;
margin-top: 3px;
margin-bottom:3px;
background: #ccc;
}
We only need make a couple of change to the text colour and the border colour and we?ll have a working rollover for our whole navbar using about 20 lines of CSS code!
a:hover.navbut{
display:block;
text-align: center;
text-decoration:none;
color: #00F;
border-style: ridge;
border-width: 2px;
border-color: #C66 #C66 #EEC #EEC;
margin-top: 3px;
margin-bottom:3px;
background: #ccc;
}
And there you have it, your finished product should look something like this. Nothing too fancy but it does show the basic working of CSS rollovers. You incorporate images quite easily, using the background attribute you could set a background image, using a different one for the hover state. Have a play and see what you can come up with, I?m sure a lot of you are more imaginative than I?ve been here!
