background color in ul met floating li

[Verwijderd]

Dag leute,

ik wil middels een unordered list en daarin 2 floating li's... de opsomming naast elkaar krijgen ipv. onder elkaar. Vervolgens wil ik een background color toepassen op de ul die wordt overgenomen door de li's.

Cascading Stylesheet:

ul { background-color:#000000;
list-style-type:none; color:#ffffff
}
li { float:left;
}

maar helaas... de achtergrond kleur wordt niet overgenomen maar verschijnt als een klein gekleurd balkje boven de li's.
Achtergrondkleur op de li's zetten heeft geen zin indien de li's niet even lang zijn. want dan loopt de achtergrondkleur onder de langste li langer door.

Krijg de oplossing ook niet echt gevonden online.. heeft iemand enig idee?

thanks

[Verwijderd]

Floating elementen hebben geen hoogte. Geef de UL dan ook een expliciete hoogte om te zorgen dat de achtergrond zichtbaar is.

[user109731]

Of gewoon een overflow:auto; op de ul

[Verwijderd]

de overflow deed wat ik wilde.. thanks!

[Rowanov]

Even een toelichting op wat je doet: als je iets flowt krijg je een bepaald gedrag waardoor de elementen buiten de parrent kunnen vallen of de parent zich niet meer om de elementen vouwt. Dit kan je oplossen door de float te "clearen". Strikt gezien doe je die door de clear eigenschap van een floatend element in te stellen, maar in de praktijk werkt dit niet zo geweldig. Een overflow: auto of hidden op het parent element forceert hetzelfde gedrag

[moozzuzz]

Wil je niet wat display: inline; voor je doet? (daardoor vermijd je het gekl**t met float).

[Rowanov]

Maar dan moet je met line-heights ed. gaan werken terwijl je eigenlijk inline-blocks wil. Aangezien inline-blocks nooit zo'n succes zijn kom je automatisch uit bij floats Floats hoeven geen probleem te zijn, als je maar weet hoe je er mee om moet gaan. Dan heb je geen verschillen tussen de browsers.

[Verwijderd]

Romanov > Dus als ik je goed begrijp zou ik een derde li kunnen toepassen met een clear:both en zou ik de overflow:auto daarbij achterwege kunnen laten om hetzelfde te bereiken?

[Rowanov]

Clear: right; zou het dan worden, alleen is dit theorie want sommige browsers doen dit niet geweldig. De overflow methode is het meest elegant, maar wat ook wel gebruikt wordt is:

HTML:

<br style="clear:both;">

Dit is uiteraard een minder elegante oplossing, aangezien je extra html toevoegt voor een layout gerelateerd probleem.

[Verwijderd]

mmm.. ik was iets te voorbarig, de overflow:auto geeft niet het gewenste resultaat in IE.. wel in FF!
misschien toch maar een vaste hoogte geven? Mijn li's zijn echter eigenlijk wel variabel van hoogte.

ik ga even die clear:right proberen...
is er eventueel een oplossing voor die overflow voor IE?

[ Voor 17% gewijzigd door Verwijderd op 18-10-2006 18:40 ]