View Full Version : Help with A Basic CSS Menu

05-08-2010, 01:48 PM
I'm new on these forums and I don't know very much of either HTML or CSS. I know enough HTML/XML to find my way around a blogger template, which brings me to my problem. I have a basic CSS menu up in the top corner of my website at www.intothebook.net.

When you mouse over it, the pseudo-selector a.tabmenu:hover kicks in its styling and adds a background and border, so that it looks like the tab is coming out of the header (which has the same background and header). But the tab won't overlap the header. For some reason, the header jumps down automatically.

So right now I have the a.tabmenu:hover styling set to add a bottom pixel padding that should overlap the header. Instead the header bounces down to make room for the extra padding. I found out that the header-wrapper element is set to position:relative, but I can't change that to absolute without messing up my template.

Anyways, it's hard to explain, but this is what I want:

This is what it shows up now:

So basically, if I add extra padding to the bottom of the a.tabmenu:hover, the header bounces down to make room for that padding, instead of the padding overlapping the header to make it look like the link connects to the header.

Help? If you didn't understand that, I'll try to give a better description, but hopefully it makes at least a little bit of sense! :P

The Newb

05-08-2010, 05:04 PM
The W3 html validator gave this report on the code.

The css validator gave this result. (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.intothebook.net%2F&profile=css21&usermedium=all&warning=1&lang=en)