in an effort to make my site (and ones im developing) easier to customize by uploading a new CSS file ( like my current one)

i want to know how to make rollovers using CSS im sick of using Javascript and photoshop images.

ive googled a bit and found there are 2 types of theese one that uses one image with both over and normal states and one that uses 2 images one for normal and one for over. so how would i do this using CSS and Xhtml?

I would suggest using the CSS and an image as it only needs one request.

 

First off is the xhtml. This can vary so I'll leave you to decide on that but whatever it is you'll need an anchor tag so we'll style that. In my example I'll pretend that all the links are within a container (div, or span or even a list item) just to make it easy. The container has an id of 'navigation'.

 

Now the css.

#navigation a {
 width: 200px; /* Width of individual link */
 line-height: 100px; /* Height of individual link */
 text-align: center;
 background: #fff url('images/navigation.gif') center left no-repeat; /* Inserts image as background and places it to the left */
 display: block; /* Makes it all clickable */
 float: left; /* Forces it inline */
 margin: 0 5px 0; /* 5px margin on the left and right of each link */
}

 

That should give you something helpful. You can create the rollover/hover effect like this:

#navigation a:hover, #navigation a:focus {
 background-position: center right;
 color: #ccc;
}

 

Make sure your image is twice the width of the individual link and that on the left side is the normal state and on the right side the hover state.

 

I write an article about it on my blog. Tabbed CSS Navigation.

 

Hope that helps. Its much better in the long run with CSS.

http://www.webdesignerforum.co.uk/index.php?showtopic=270

 

 

Ben has also wrote a tutorial for this forum on that subject, its a very helpful and comes with a zip file so you can see the code in action to see exactly how it will work.

awesome thanks!

don't neglect the idea of using one image, which is exactly twice the width you need. There is an article on AListApart (search for sprite).