Ah, using this method it works! Thank you! Olle
> Date: Fri, 6 Apr 2012 22:06:22 +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, > > 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/ ______________________________________________________________________ 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/