[CSS] Lijst uitlijning IE / Safari

[Kaplan]

Ik ben bezig een site om te zetten naar volledig CSS opbouw. Dus ik wil eigenlijk geen tabellen meer gebruiken.

Nu wil ik een tabelltje in CSS maken met links een afbeelding en vervolgens rechts ernaast een tekst. En zo een lijstje naar beneden.
Dus:
Afbeelding | Tekst
Afbeelding | Tekst
Afbeelding | Tekst
Afbeelding | Tekst

Nu heb ik de volgende CSS:

code:

#TweeKolom {
    width:750px;
    margin-left:0px;
    }
    
#TweeKolom ul {
    list-style-type: none;
    margin-left:0px;
    }

#TweeKolom li {
    margin-left:0px;
    }

    
#TweeKolom ul ul {
    list-style-type: none;
    margin-left:0px;
    }

#TweeKolom ul li ul {
    float: left;
    margin-left:0px;
    }
    
#TweeKolom ul li ul li {
    float: left;
    margin-left: 20px;
    }

met de volgende HTML

code:

<div id="TweeKolom">
        
     <ul>
    <li>
    <ul>
        <li>
                   <img src="afbeelding.jpg">
         </li>
                     
         <li>
        Bladiebladiebladiebla                 
        </li>
    </ul>
    </li>
            </ul>           
</div>

Nu werkt dit in IE uitstekend! Precies zoals de bedoeling. Maar in Safari dus niet. Daar wordt de tekst gewoon doodleuk onder de afbeelding geplaatst.

Iemand een suggestie hoe dit goed te krijgen is?

[Verwijderd]

Tot in tegenstelling van de meeste mensen over CSS denken zijn tables niet verboden hoor. Je moet ze alleen niet gebruiken voor layout. In dit geval voor het structureren van data is het gewoon toegestaan hoor.

Maar om je post te beantwoorden: Waarom gebruik je niet clear-right?

HTML:

<img src="" />
<p>text</p>

Cascading Stylesheet:

img{
float:left;
}
p{
display:block;
clear:right;
}

of iets in deze richting?

[OkkE]

Ïs er een reden dat je een lijst in een lijst gebruikt? Ik zou voor j.ostie's manier gaan.

Ik zou alleen de afbeelding waarschijnlijk óf binnen de P zetten, óf de IMG in een eigen P en de twee P's in een DIV. Maar dat is meer een kwestie van smaak, denk ik.


Bij dit soort situaties kijk ik altijd naar hoe ik de "vorm" zou willen hebben zonder CSS, dan lijkt me een afbeelding met een tekst er naast of onder genoeg, en hoeft het voor mij niet in geneste lijsten.

[Makkelijk]

Ik vind die lijsten fouter dan tables eigenlijk. Maar ik zou inderdaad ook met float en clear werken.

[DJ Buzzz]

Waarom zou je geen tabel mogen gebruiken als een tabel precies is wat je weergeeft? Semantisch een webpagina opbouwen en goed CSS gebruik is niet hetzelfde als geen tabellen gebruiken! Wil je iets in een tabel representeren? Gebruik een tabel!

Wil je een layout in gestructureerde blokken opmaken zonder in een soep van tables terecht te komen? Dus niet met allerlei nare colspans, rowspans, e.d., gebruik dan fatsoenlijke semantisch zo waardevol mogelijke elementen en maak het op met CSS.

[Cartman!]

Als de tekst iets zegt over de afbeelding zou ik gaan voor een definition list