Trying to combine so many things... isn't working out too well

Here's an example of the button image:


HTML:

<ul id="buttons">
<li id="home"><a href="#"> </a></li>
</ul>

And the CSS

ul#button {
display: block;
width: 125px;
height: 43px;
list-style-type:none;
float: left;
}
ul#button a{
float: left;
width: 125px;
height: 43px;
list-style-type:none;
margin: 0;
display: block;
}
ul#button a:hover {
background-position: 0 -43;
width: 125px;
height: 43px;
}
li#home  a {
background: url('/images/buttons/home.gif');
border: solid red 1px;
}

Don't really know what I'm doing, here's the page it'self

If you can give me any insight on doing buttons/menus like this, please do.

I think this is the best way to do it, but tell me if I'm wrong.

Do you realize you have ul#buttons in the html and "button" (singular) in the css?

Originally Posted by racer x

Do you realize you have ul#buttons in the html and "button" (singular) in the css?

Haha thanks
</stupid>

So now the buttons actually show up, they just don't do anything when you hover.

And there may be some extra css code.

ul#button a:hover {
background-position: 0 -43;
width: 125px;
height: 43px;
}
li#home a {
background: url('/images/buttons/home.gif');
border: solid red 1px;
}

You have to do 2 things - 1: be more specific and 2: -43 won't work, -43 WHAT ? It should be -43PX. This works:

ul#button a{
float: left;
width: 125px;
height: 43px;
margin: 0;
display: block;
}

/*#button a:hover {
background-position: 0 -43px;
width: 125px;
height: 43px;
}*/

ul#button li.home a {
background: url(home.gif);
border: solid red 1px;
}

ul#button li.home a:hover {
background-position: 0 -43px;
}

Yes, I changed your ID to a class, as there's really no need to use an ID for this unless you're targeting it with scripting.

http://eclipsediskjockeys.com/design.htm

Thank you, I got it to work. Had to also add ul#button to get rid of the list style.

Isn't there a way that I can do the hovers all in one rather than separate ones?

It'd be much neater and more convienent.

Also, I want one button floated to the left, one to the right, and the rest spaced evenly in the middle. Is this possible to do automatically or do I just have to margin them apart?


Should I change all my ids to classes/use them from now on?

You can get them evenly spaced floating them all in the same direction.

The problem with trying to use 1 set of rules for all hovers is that you have a different id or class on each one which affects specificity. You can group all the affected selectors on one line, separated by commas.