menu problem css

[Ogierini]

hi,

I am trying to make a horizontal menu but it doesn't work as I wish.

Since there is a logo on the left site the menu appears on the right top site of the website.
www.ireneogier.nl/wb

But than I would like to each menu item to be just as large as the other one
so that the fall nicely above each other (see pic) , but if I put in a certain width, than the menu starts to be verticall.

I also want some padding on the left, but this  menu doesn't listen.

Any one some advice?


This s how I would like it to be: See picture.....

[crnogorac081]

try display: block on menu items

[Ruud]

You can set the width (and more) on the  #menu li selector.

Code:

#menu li {
    background: url("images/menublok.jpg") no-repeat scroll 0 -3px transparent;
    float: left;
    height: 20px;
    padding: 0 0 0 8px;
    width: 130px;
}

Remove the background from the #menu a selector.

That will come very close.

[Ogierini]

thanks a lot!

I'll try it out tonight!
Irene

[Ogierini]

this worked out great.

Thanks a lot.  



but now the hover is bugging me. #menu li a:hover I mean.
It should light up with white letters and a red background.
But I can't get it to the right.

The ull's and li's confuse me here...

[Ruud]

Now you have the background set on the #menu li selector.
Try setting the hover background on #menu li:hover instead of the #menu li a:hover

[Ogierini]

that was it!
Great thanks a lot!
The only thing that doesnt work as it should are the colours in the letters in hover. They should turn white and 2 px from the top

This should be in #menu li a:hover {
?
or am I wrong?

[Ruud]

The text is created with Cufon. For :hover you need to add some parameters to the setup.
The Cufon wiki tells something about this.

With Javascript disabled (so without Cufon) the text is white on hover.

[Ogierini]

Yes! That was it. Thank you very much...!