Maquetar amb display: table

Publicat el 07/03/2005

L'objectiu que persegueix aquesta tècnica —com la tècnica Ingo Chao— és maquetar columnes de la mateixa alçada (de contingut variable) sense haver d'usar imatges de fons.

Perquè sense imatges de fons?

Quan s'utilitza una maquetació amb imatges de fons tal com el mètode Faux Columns l'estructura s'haurà de fer amb unitats que els navegadors no poden redimensionar, tals com els punts(pt) o els pixels(px), per evitar un desajust entre la dimensió de la imatge i la de l'estructura modificada.

El que s'intenta aconseguir —com va dir en Nicolás Fantino— és un disseny elàstic. Això vol dir que es pugui ampliar el tamany de lletra i que la estructura s'amplii alhora.

La tècnica

La maquetació és força simple. Només cal una estructura XHTML del tipus:


<div id="contenidor">
   <div id="contingut">
      ...contingut...
   </div>
   <div id="menu">
      ...menu...
   </div>
</div>

I aplicar un CSS del tipus:


div#contenidor {
   display: table;
   }
div#contingut, div#menu {
   display: table-cell;
   }

Amb aquestes dues regles la estructura quedarà feta. Si s'apliquen colors de fons al div#contingut i al div#menu es podrà apreciar el resultat.

Nota: És important l'ordre. Les columnes aniran en l'ordre en que siguin declarades a l'XHTML. Aquest és el seu punt feble: l'estructura és més rígida.

Una estructura més complexe

Si es vol fer una estructura amb capçalera i peu, aquests han d'estar fora de la caixa amb display: table per tal de fer-ho més manegable. És a dir:


<div id="pagina">
   <div id="cap">
      ...capçalera...
   </div>
   <div id="contenidor">
      <div id="contingut">
         ...contingut...
      </div>
      <div id="menu">
         ...menu...
      </div>
   </div>
   <div id="peu">
      ...peu...
   </div>
</div>

El CSS a aplicar podria ser, per exemple:


div#pagina {
   margin: auto;
   width: 60em;
}
div#contenidor {
   display: table;
}
div#contingut, div#menu {
   display: table-cell;
}

S'aconseguirà una estructura d'amplada fixa —més ben dit fluida ja que s'usen em— amb capçalera, dues columnes i peu.

Una estructura massa rígida

L'estructura que he utilitzat, en teoria li falta un element ja que una estructura de taula es composa de contenidor (table), contenidor de fila (table-row) i contenidors de cel·la (table-cell).

Utilitzar una estructura d'aquest tipus torna massa rígida la maquetació com per valdre la pena utilitzar-la.

Contraindicacions

Cal vigilar, si s'usen em —cosa previsible ja que s'usa aquesta tècnica— com s'adapten al contingut el Konqueror i el Safari que difereixen del Mozilla.

I per suposat, si cal que es vegi per Internet Explorer s'haurà de fer una versió especial usant, per exemple, la tècnica Faux Columns.

Conclusions

Si es vol tenir una estructura el més fluida possible, aquesta és la millor alternativa. Molt menys complexe que la tècnica Ingo Chao i suportada practicament igual de malament pels navegadors antics.

Suport dels navegadors
Navegador Windows Mac Linux
Si ho proveu en algun navegador que no estigui aquí llistat us agrairia que m'informessiu del resultat
Mozilla Firefox 1.0.1 + Sí Sí Sí
Mozilla Suite 1.7 Sí Sí Sí
Opera 7.54 Sí Sí Sí
Safari 1.2 - Sí -
Camino 0.8 - Sí -
OmniWeb 5.1 - Sí -
Konqueror 3.2 - - Sí
Internet Explorer 6 No - -
Internet Explorer 5.5 No - -
Internet Explorer 5.01 No - -
Internet Explorer:mac 5.2 - No -

Comentaris

Afegir un comentari