Ny, ukjent trekolonnersteknikk med <div>?

[kilogram]

Eg satt nylig (sånn for omtrent 10 minutt sidan) og laga eit utkast til ei nettside med XHTML1.0 og CSS2.1. Eg har tidligare slitt litt med å få til eit skikkelig trekolonnersdesign med fast bredde ved å bruke dei "tradisjonelle" metodane. Så eg prøvde følgande HTML og CSS;

 

<div id="table">
 <div id="row">
   <div id="leftCell">
     Venstre
   </div>
   <div id="centerCell">
     Sentrum
   </div>
   <div id="rightCell">
     Høyre
   </div>
 </div>
</div>

 

div#table
{
display: table;
}
div#row
{
display: table-row;
}
div#leftCell,
div#centerCell,
div#rightCell
{
display: table-cell;
float: left; /* fikser IE-støtte */
}

 

Dette ser ut til å fungere supert, både i IE, Firefox og Opera. Men likevel er dette ein teknikk eg aldri har høyrt om før eg tilfeldigvis bladde over desse eigenskapane i ei bok eg hadde. Dei display-egenskapane er berre såvidt nemnt i CSS-specen.

 

IE støtter ikkje display: table, table-row og table-cell, så difor har eg lagt til float: left på den, og IE rendrer den då korrekt. Dei andre nettlesarane ser ut til å ignorere denne float'en.

 

Det eg lurer på er kvifor blir ikkje denne teknikken brukt mykje? Er det nokon ukjente bugs eg ikkje klarar å finne? Er det ein kjent teknikk som berre eg har gått glipp av?

[kilogram]

Kanskje dumt svar: Hvorfor ikke bare bruke <table>? Det støttes forsatt, gjør det ikke?

5030406[/snapback]

 

Jo, men det er ein generell regel at ein ikkje skal blande layouten og designet på sida med innholdet (i dette tilfellet teksten på sida og HTML-koden). Om du t.d. surfer på ein mobil enhet der du har begrensa plass, kan du berre slå av CSSen, og innholdet kjem nedover istaden for i ein tabell.

[MC2]

Kanskje dumt svar: Hvorfor ikke bare bruke <table>? Det støttes forsatt, gjør det ikke?

[MC2]

Hmm....

 

Smart... :-*

[Me sjøl]

Ifølge w3C betyr display: table at du setter dette elementets semantikk til tabell, altså er du like usemantisk som om du hadde brukt en tabell, selv om utseende og innhold er adskilt.

[kilogram]

Ifølge w3C betyr display: table at du setter dette elementets semantikk til tabell, altså er du like usemantisk som om du hadde brukt en tabell, selv om utseende og innhold er adskilt.

5030815[/snapback]

 

CSS angir jo bare utseende. Eg seier berre til nettlesaren at dette skal visast fram som ein tabell, ikkje at dette faktisk er ein tabell (då hadde eg jo tross alt brukt ein HTML-tag som indikerte det).

[Sono Juventino]

Enig med Kilogram her. Tror fortsatt man bør se på dette som semantisk.

[Nervetattoo]

CSS sier ingen verdens ting om elementets semantikk.

Det eneste jeg umiddelbart ser som et "problem" her kontra andre trekolonnersmetoder er at innholdet rent semantisk ikke kommer på toppen, noe som er ønskelig, spesielt for de lesere som benytter klienter uten css-støtte.

Men det blir gjør det ikke til feil, bare et lite minuspoeng for usability.

 

Det jeg stusser over er som Vegard har nevnt, hvorfor finner man ikke denne teknikken i bruk, tyder det på at det er noen bugs her, eller er kravspecen alltid at innholdet skal være først for eksempel.

[Jesper Karsrud]

Jeg skjønner ikke poenget med å sette display til tabeller, da man fint kan klare å lage en statisk 3-kolonners layout ved hjelp av float... Synes egentlig den teknikken der var ganske dum, igrunn...

 

Sorry hvis du syntes jeg var litt hard nå, men jeg skjønner virkelig ikke poenget med å få en div til å oppføre seg som en tabell når man fint kan gjøre det ved hjelp av float.

[mikk-]

Meget interessant greie, men jeg kan ikke helt se fordelene ved å gjøre det på denne måten?

[Me sjøl]

CSS sier ingen verdens ting om elementets semantikk.

5031293[/snapback]

Ideelt sett ikke. Jeg refererte til dette sitatet fra http://www.w3.org/TR/REC-CSS2/tables.html:

The following 'display' values assign table semantics to an arbitrary element:

[ lang liste med tabellrelaterte verdier for display: ]

 

Men uavhengig av om dette er semantisk elelr ikke, så ser jeg liten vits i å få et element til å oppføre seg som en tabell; det har vi jo tabeller for. Alt annet lar seg gjøre med andre elemeneter.

[Arve Systad]

display: table|table-row er ikkje støtta av IE, som kan vere en grunn til lite bruk av den metoden

[kilogram]

display: table|table-row  er ikkje støtta av IE, som kan vere en grunn til lite bruk av den metoden

5032502[/snapback]

 

...men ved å sette float: left på alle tabell-cellene, så vil det fungere like godt i IE som dei eksisterande metodane. Am I not correct?

[Cucum(r)]

display: table|table-row  er ikkje støtta av IE, som kan vere en grunn til lite bruk av den metoden

5032502[/snapback]

 

...men ved å sette float: left på alle tabell-cellene, så vil det fungere like godt i IE som dei eksisterande metodane. Am I not correct?

5032931[/snapback]

 

Selvfølgelig, men det er fordi alle element som får satt FLOAT til LEFT eller RIGHT, blir automatisk blokkelement:

Any floated box becomes a block box that is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float.

 

 

Dermed blir verdien av DISPLAY satt til BLOCK når du legg til FLOAT:LEFT.

Endret 20. oktober 2005 av Henrik Lied