[CSS] Lijst-items naast plaatje

[basvd]

Onderstaand probleem kwam ik toevallig tegen bij een website. Het uitlijnen gebeurd netjes wanneer de lijst-items niet naast een plaatje staan. Staan ze wel naast een plaatje, gaat het mis. Ook als de marges/padding op 0px staan.

Het uitlijnen gaat wel goed als je de lijst, display: inline meegeeft. Echter gaat het inspringen dan weer niet goed van de lijst-items.


http://www.basvd.nl/test/index.html

Is er een mogelijkheid om beide problemen te ondervangen?

Dank!

[Bozozo]

Ik kan nou niet zeggen dat ik je probleem helemaal begrijp, maar ik gok dat je wilt dat die bolletjes niet in de image terecht komen.

In dat geval zou ik gewoon de ul's float: left meegeven.

[Xcalibur]

Een bekend probleem inderdaad, ik weet alleen even geen pasklare oplossing hiervoor.
Even heel praktisch: kun je de foto niet rechts uitlijnen, dat lost het probleem ook op

[moozzuzz]

Wat met je IMG een marge geven?

[basvd]

Bozozo: Dat is inderdaad het probleem.

Bedankt voor je float:left suggestie. Echter zie ik al gelijk weer een nieuw probleem verschijnen. Waneer je een plaatje links en rechts hebt.
Een lijst zonder float:left gaat het nog deels goed, met een float: left krijg je dit;


edit:
moozzuzz: image heeft al een marge....
Xcalibur: Zoals net gezegd, men wil graag een foto links & rechts

[ Voor 15% gewijzigd door basvd op 17-06-2008 11:21 ]

[Zoefff]

Ten eerste: test dit in Firefox en fix het eventueel later in IE6. IE is bijzonder onvoorspelbaar en buggy als het neer komt op floats.

Verder: "overflow: auto;" op je UL zou het probleem moeten oplossen. De UL's laten floaten is natuurlijk geen goede oplossing omdat je dat helemaal niet wilt, de afbeelding moet floaten, de rest van de content moet daar gewoon omheen wrappen.

[basvd]

Zoefff schreef op dinsdag 17 juni 2008 @ 11:57:
Ten eerste: test dit in Firefox en fix het eventueel later in IE6. IE is bijzonder onvoorspelbaar en buggy als het neer komt op floats.

Agree, ik had toevallig IE open staan... Maar FF heeft het probleem ook..

Zoefff schreef op dinsdag 17 juni 2008 @ 11:57:
Verder: "overflow: auto;" op je UL zou het probleem moeten oplossen. De UL's laten floaten is natuurlijk geen goede oplossing omdat je dat helemaal niet wilt, de afbeelding moet floaten, de rest van de content moet daar gewoon omheen wrappen.

Dank voor je suggestie, echter lost dit het probleem nog niet op....
http://www.basvd.nl/test/tmp/index.html

[CH4OS]

En als je je tekst nou in een div zet? Dan ben je van het probleem dat de tekst naar links gaat (onder de afbeelding) af toch? Of zie ik nu wat over het hoofd? Eventueel een width er aan hangen en klaar...

[Zoefff]

basvd schreef op dinsdag 17 juni 2008 @ 12:34:
[...]

Agree, ik had toevallig IE open staan... Maar FF heeft het probleem ook..


[...]

Dank voor je suggestie, echter lost dit het probleem nog niet op....
http://www.basvd.nl/test/tmp/index.html

Dit lost het probleem wel degelijk op. Alleen niet in IE6. Zet (bijvoorbeeld met conditional comments) de property "zoom: 1;" op de UL om hasLayout te triggeren, en dan werkt het ook in IE6.

[basvd]

@GJ'tje; in een divje is geen optie, omdat het een vrij simpel wysiwyg-veld is. en om dat de gebruiker weer uit te gaan leggen...

@Zoefff; Misschien dat ik iets over het hoofd zie, maar hier werkt het nog niet (zowel IE als FF).
http://www.basvd.nl/test/new/fout.gif

Misschien even voor de duidelijkheid, ik wil dit voor elkaar krijgen:
http://www.basvd.nl/test/new/goed.gif

URL; http://www.basvd.nl/test/new/index.html
Zoom:1 staat op de LI ipv UL...

[Zoefff]

Aha, excuses. Mijn venster was groter dus de lijst kwam niet onder de linker afbeelding

Lastig probleem dan. Je kan de list-style-position van de li aanpassen naar inline, maar met dat resultaat ben je waarschijnlijk ook niet tevreden.

[Pendaco]

Mjah, de <ul> achterwege laten Mooi en netjes is het niet maar het werkt wel, hoewel in IE6 opeens de bullet van de laatste <li> helemaal naar onder verspringt.

Met een ul om je li's heb je in feite hetzelfde als wanneer je een div gebruikt, een blok is een blok.

edit: beter lezen

[ Voor 25% gewijzigd door Pendaco op 17-06-2008 14:49 ]

[moozzuzz]

basvd schreef op dinsdag 17 juni 2008 @ 11:20:
moozzuzz: image heeft al een marge....

Daarnet had de image in elk geval een padding ipv marge, maar ik zal mss verkeerd gezien hebben.

In HTML/CSS - lijst in combinatie met floats had ik een soortgelijk probleem en zie je ook een oplossing.