List items vallen over afbeelding met float heen?

[Yggdrasil]

Beste Tweakers,

Ik heb een probleempje met het plaatsen van een unordered-list naast een afbeelding, en ik kom er niet meer uit. Zie onderstaand plaatje:



Het plaatje is float: left, waardoor de UL er netjes omheen vloeit. Zolang ik de list-style-position van de UL op inside heb staan blijft er een mooie margin tussen plaatje en de UL, maar wordt de linkerkantlijn van de LI's ongelijk.

Als ik echter de list-style-position op outside zet, wat ook de default is in de browsers, dan krijg je een mooie rechte kantlijn, maar vallen de bullets half over het plaatje. Niet de bedoeling dus.

Het toepassen van een margin-left op de LI's heeft niet het gewenste effect, want die schuift álle LI's op, vooral degenen die al voorbij het plaatje tegen de kantlijn staan.

Weet iemand hoe ik toch de UL mooi om het plaatje heen kan laten vloeien, zodat de bullets niet over het plaatje vallen, én de kantlijn van de listitems mooi recht is?

Hieronder zie je de vereenvoudigde code. Voor het voorbeeld heb ik alle elementen standaard gelaten behalve de float left op de div.

XHTML:

<div class="paragraph">
    <div style="float: left;">
       <img src="..." />
    </div>
    Test een twee drie<br/>
    <ul>
        <li>sem. Nulla consequat massa quis enim</li>
        <li>. Donec pede justo, fringilla vel, aliq</li>
    </ul>
</div>

[benoni]

Het lijkt alsof je de standaard margin of padding van de ul hebt weggehaald, bijvoorbeeld met zo'n zero value set voor alle elementen:

Cascading Stylesheet:

* {
    margin: 0px;
    padding: 0px;
}

Dat moet je dan voor het ul element weer herstellen. Zie bijvoorbeeld:

quote: http://clagnut.com/blog/1287/

The most notable difference occurs with lists: Safari and Gecko-based browsers (such as Firefox) use padding-left to indent lists; Internet Explorer uses margin-left. Neither are right or wrong, they are just different. Because of this I’m forever making Ie behave like the others by using a rule like:

Cascading Stylesheet:

ul {
    padding-left:1em;
    margin-left:0;
}

[Yggdrasil]

Nee, helaas niet. Ik heb de margins en paddings nergens gereset. Het probleem treed dan ook in beide gevallen op.

Het zetten van de margin lijkt alleen effect te hebben t.o.v. de linkerkantlijn. De ruimte tussen het plaatje en de bullets veranderd niet.

[Da Weef]

Helpt het als je de div van het plaatje display:inline-block meegeeft?

[ Voor 5% gewijzigd door Da Weef op 16-12-2008 12:11 ]

[DoubleJ]

Met een marge/padding op je image kun je dit wel verhelpen lijkt me

[pesla]

Yggdrasil schreef op dinsdag 16 december 2008 @ 11:56:
Nee, helaas niet. Ik heb de margins en paddings nergens gereset. Het probleem treed dan ook in beide gevallen op.

Het zetten van de margin lijkt alleen effect te hebben t.o.v. de linkerkantlijn. De ruimte tussen het plaatje en de bullets veranderd niet.

Het verschil tussen list-style-position: inside & outside; is logisch: het verandert de manier waarom de browser het element rendert (binnen of buiten het li-element - dus je zult de items wat zien verspringen).

Een margin-left op het li-element kun je niet doen. Wat er dan gebeurt is dat een aantal li-elementen de afbeelding als x = 0 nemen, en een aantal de parent als x = 0 (en dus geen rechte lijst).

Wat je dus wel moet doen, is een marge op het ul-element zetten. Op dat moment zorg je er voor dat het ul-element tov. de parent een x aantal pixels verschuift. In jouw geval is het dus iets als:

Cascading Stylesheet:

ul {
   margin-left: imageWidth + 20px;
}