Relatively new to CSS so hope I can phrase myself correctly here. I am trying to code a menu bar using only CSS. I have a Photoshop mock up of what I am trying to achieve:
I would like a row of links all with a 1 pixel white border and a background colour. When the user mouses into the 'cell' the text colour and background colour change. I can get the text to change colour on a:hover but not the WHOLE background cell (only behind the text).
Is there a simple solution using CSS only? I'm sure there is only I am going mad trying to find it. Can anyone help me in the right direction?
[edited by: Woz at 3:24 am (utc) on Nov. 7, 2002] [edit reason] TOS#14 [/edit]
There are various ways of doing this I believe although I have as yet not started to implenet them myself. I know it has been talked about here already somewhere. Try search these fora for "CSS Buttons" and the likes and you should find them
Thanks for the reply. Doesn't display: block insert a line break between elements? I have seen an example using display:block but the nav/menu ran down the page and I want it across the page as per my example:
<No URLs Please!>
Forgive me if I am a gumby-head for I know not (exactly) what I do - yet
[edited by: Woz at 4:40 am (utc) on Nov. 7, 2002] [edit reason] TOS#14 [/edit]
The one ugly thing about this is the spacer div required to give the menu some content. Also, somewhat weirdly, if you take the border off of the div#menu it doesn't seem to work right (at least in Mozilla or IE).
Another method is simpler. Replace the relevant CSS selectors above with :
And take out the spacer div. With this method no float or display is needed. You do need to put top and bottom padding on your div#menu to contain the padding you put on the a elements, though. With this method it is best to eliminate the border on the div#menu, because Mozilla and IE (5.5 and 6 in quirks mode) handle box-sizing differently.
Moonbiter hits the nail on the head. But for your info, it doesn't actually insert a line break with display: block;
It makes the element a block level element and, as with all block level elements you can not place them side by side unless you take them out of the normal page flow using float or positioning them....