[Probleemstelling] <ul> over 2 of 1 kolom spreiden

[Verwijderd]

Heren,

ik heb even een kleine vraag; het is geen urgent probleem, maar ben het in het verleden welleens tegengekomen en vroeg me af hoe jullie het zouden aanpakken.

Stel: Je hebt een UL met 8 items waarbij de volgorde een logica heeft. Vb:

A1, A2, B1, B2, C1, C2, D1, D2

Wanneer je dit in een normale lijstweergave weergeeft, is er geen enkel probleem. Echter, je wilt dit in twee kolommen weergeven en wel op de volgende manier:

A1 B1
A2 B2
C1 D1
C2 D2

Indien je dit dmv float / inline wilt neerzetten wordt je HTML structuur dus ook:

A1, B1, A2, B2, C1, D1, C2, D2

Zoals je ziet, onlogisch en bij het printen / teruggaan naar 1 koloms layout.

Hoe zouden jullie dit met HTML en CSS zo logisch mogelijk oplossen?

Ik ben benieuwd, alvast dank!

[Bozozo]

Dat lijkt toch verdacht veel op tabulaire data

[Borizz]

Een tabel lijkt mij ook de beste oplossing hier. Waarom zet je ze in een ul? De manier waarop je ze in je voorbeeld neerzet geeft al aan dat je het in een tabelvorm wilt hebben. Je zou het een en ander wel op kunnen lossen door verschillende classes aan de LI-elementen te geven en ze daarmee te stylen.

Een lijst die je naderhand in een andere volgorde gaat zetten is mijn inziens niet echt een lijst.

[_Thanatos_]

Ligt eraan wat je wilt weergeven. Als het echt een lijstje van datapunten is, dan is een <ul> of <ol> de aangewezen kandidaat. Dat kan dan best in kolommen. Een table gaat dan zeker niet helpen, accessibility-wise. Kijk dus wat je datasource is, als dat een ding met rijen en kolommen is, dan mag je onderstaand verhaaltje van mij negeren. Is je datasource lineair, lees dan verder

Zoals TS al zegt, float:left geeft het probleem dat je een left-to-right list krijgt, terwijl je een top-to-bottom list wilt. Wil je een mooie en cleane oplossing, dan heeft A List Apart het werk al voor je gedaan. Vanaf "method 4" begint het te lijken op wat je zoekt. Moet lukken toch

[ Voor 15% gewijzigd door _Thanatos_ op 20-05-2008 19:09 ]

[Cartman!]

Ben je niet meer op zoek naar een definition list?

[Verwijderd]

Verwijderd schreef op dinsdag 20 mei 2008 @ 17:44:
Heren,

Er zijn hier ook wat dames (not me, btw)

Hoe zouden jullie dit met HTML en CSS zo logisch mogelijk oplossen?

Cascading Stylesheet:

ul {
    column-count:2;
    -moz-column-count:2;
    -webkit-column-count:2;
}

En aangezien dat in niet alle browsers werkt zou je hier naar kunnen kijken:
http://www.alistapart.com/articles/css3multicolumn

[Verwijderd]

Dankjulliewel, (ook de dames ) Die van a list apart is een mooie oplossing, exact wat ik zocht!