Hi Olle,
instead of setting "float: left;" for the li elements, give them
"display: inline-block;" instead. That way still can have a margin and
padding, but they behave kind of like text or an image.
This again enables you to set "text-align: center;" for the surrounding
ul element, and the contained li elements will be centered then.
Hope it works...
Christian
Am 06.04.2012 19:43, schrieb Olle Risberg:
...Obviously, however, doing this leads to the layout totally breaking when
zooming, something I didn't quite plan for.
The display: block; solves the problem but creates a new one which I am not
able to solve just now - when using display: block in #access ul like you said,
how do I center the menu items? I've been trying to put auto-margins in every
div I can think of but it doesn't seem to turn out as I'd like. Any clue,
someone?
Olle
From: olle_risb...@hotmail.com
To: css-d@lists.css-discuss.org
Date: Fri, 6 Apr 2012 16:48:59 +0200
Subject: Re: [css-d] Hover effect doesn't cover the whole background
Hi, thanks for your help and thorough explanation! :-)
I managed to fix the problem in another way, by simply shrinking the bar a few
pixels to get the hover to cover all of it. Thank you anyway, once again.
Olle
Date: Fri, 6 Apr 2012 15:48:05 +0200
From: k-r...@t-online.de
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Hover effect doesn't cover the whole background
Hi Olle,
when I change the rule:
#access ul {
display: inline-block;
}
to
#access ul {
display: block;
}
the gap disappers (tested only in Firefox). There might be side effects,
so the consequences of such a change have to be considered.
When the ul is an inline-block, it surrounds the floated li elements
that it contains. With a zoom of 100% the li elements and the ul have a
height of 43px (according to Firebug), and the surrounding div has a
height of 50px, thus there is an extra gap of 7px below the ul just as
you mentioned.
When the ul is a block, it doesn't surround the li elements any more,
but flattens to a height of 0px. And the extra gap of 7px is also gone.
So the question is whether the "display: inline-block;" is actually
needed ror that ul for something else? Maybe not. If you still want the
ul to surround the li elements, maybe it is better to set the display of
the ul to "block" and to change the display of the li elements to
"inline-block".
I hope this doesn't confuse any further but helps a little.
Best regards
Christian
Am 06.04.2012 10:41, schrieb Olle Risberg:
Hi!
I'm using Wordpress to make a website and I'm stuck on this one. When hovering
above an item in my navigation
bar (Home, About etc), I get a nice hover effect, the background is lit
up. However, it doesn't do this all the way down, there is a little
space at the bottom of the bar which isn't included in the hover-effect. Does
anyone know how to fix this?
I've tried to use Firebug to find relevant CSS-stuff but I can't find
what to change. I'm currently using a Twenty Eleven childtheme I
made/am making. You can see the site (which isn't at all finished, by the way)
at threeseasonsmusic.com/wordpress
Apologies if my vocabulary isn't very professional. Thank you for your help!
Olle
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
