WebsiteBaker Community Forum (upd)

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: Ogierini on March 13, 2011, 05:28:09 PM

Title: menu problem css
Post by: Ogierini on March 13, 2011, 05:28:09 PM
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.....



[gelöscht durch Administrator]
Title: Re: menu problem css
Post by: crnogorac081 on March 13, 2011, 09:37:51 PM
try display: block on menu items
Title: Re: menu problem css
Post by: Ruud on March 13, 2011, 10:38:05 PM
You can set the width (and more) on the  #menu li selector.

#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.
Title: Re: menu problem css
Post by: Ogierini on March 14, 2011, 08:51:14 AM
thanks a lot!

I'll try it out tonight!
Irene
Title: Re: menu problem css
Post by: Ogierini on March 14, 2011, 09:03:38 PM
this worked out great.

Thanks a lot.  :-D



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...
Title: Re: menu problem css
Post by: Ruud on March 14, 2011, 10:03:53 PM
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
Title: Re: menu problem css
Post by: Ogierini on March 15, 2011, 11:57:05 AM
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?
Title: Re: menu problem css
Post by: Ruud on March 15, 2011, 12:24:28 PM
The text is created with Cufon. For :hover you need to add some parameters to the setup.
The Cufon wiki (https://github.com/sorccu/cufon/wiki/styling) tells something about this.

With Javascript disabled (so without Cufon) the text is white on hover.
Title: Re: menu problem css
Post by: Ogierini on March 15, 2011, 01:14:31 PM
Yes! That was it. Thank you very much...!