El Noguer

Pot ser finalment, després de tants anys, el CSS 3 serà solució definitiva als problemes amb la maquetació de pàgines HTML.

Table layout

Les primeres pàgines web perquè fossin flexibles i es poguessin llegir bé en qualsevol mida del navegador,  es feien amb taules. Però de seguida es va veure que el model de layout amb taules era un problema: costa de programar, sobre tot si es comença a posar taules dins de taules i és un problema pels invidents que utilitzen lectors de pantalla per navegar per Internet. No és que els lectors de pantalla no puguin llegir taules, però les taules s’han de fer servir pel que serveixen, per

<table cellspacing="1" cellpadding="0" border="0"
 bgcolor="black" id="shell" height="250" width="400">
<tr height="50"><td colspan="2" bgcolor="white">
<table title="Banner" id="banner" border="0">
<tr><td>BANNER AQUÍ</td></tr>
</table>
</td></tr>
<tr height="200"><td bgcolor="white">
<table id="navigation" title="Navigation" border="0">
<tr><td>MENÚ 1</td></tr>
<tr><td>MENÚ 2</td></tr>
<tr><td>MENÚ 3</td></tr>
</table>
</td><td bgcolor="white">
<table title="Content" id="content" border="0">
<tr><td>CONTINGUT DE LA PÀGINA</td></tr>
</table>
</td></tr></table>

Float CSS

Per solucionar els problemes del table layout, tothom tenia clar que calia separar el contingut de la informació de la presentació. L’HTML s’havia de fer servir per organitzar la informació i el CSS per a definir com calia presentar la informació.

Però hi havia un problema: el model de capses de l’HTML només sap apilar capses verticalment. No permet posar una capsa al costat d’una altra capsa. Per exemple no permet posar un capsa amb el menú a l’esquerra i una altra capsa amb el contingut a la dreta.

Tot i així els programadors van fer trampa i van començar a fer servir la propietat float: left per aconseguir apilar les capses horitzontalment (exemple).

La solució però no era perfecte, la propietat float no estava pensada per maquetar, de la mateixa manera que les taules tampoc estaven pensades per maquetar. El float està pensat per afegir imatges al mig d’un text i que el text  voregi la imatge.

CSS 3: display box

El CSS 3 però sembla que finalment donarà una solució i permetrà apilar les capses horitzontalment així com ho feia verticalment. Per fer-ho cal definir la propietat display:box; box-orient:horizontal; La solució ja es pot provar amb els navegadors més moderns.

<style>
.content{
 display : -moz-box;
 display : -webkit-box;
 display : box;
 -moz-box-orient : horizontal;
 -webkit-box-orient : horizontal;
 box-orient : horizontal;
}
</style>
                <div class="content">
			<div><strong>1</strong></div>
			<div><strong>2</strong></div>
			<div><strong>3</strong></div>
		</div>

La nova propietat display: box, permet moltes coses més: ordenar al revés, definir mides relatives entre les capses i gestionar l’espai buit amb box-pack.

CSS 3: Advance layout

Dins de l’estandard CSS 3, que encara no està tancat del tot, hi ha una proposta per poder descriure quins blocs s’apilen horitzontalment i quins verticalment a través d’una notació simplificada.

En l’exemple següent es defineixen 4 zones, la zona ‘a’ (superior esquerra), la zona ‘b’ (superior dreta), la zona c (inferior esquerra) i la zona ‘d’ (inferior dreta).

<style type="text/css">
  dl { display: "ab"
                "cd" }
  #sym1 { position: a }
  #lab1 { position: b }
  #sym2 { position: c }
  #lab2 { position: d }
</style>
<dl>
  <dt id=sym1>A
  <dd id=lab1>A is een aapje
  <dt id=sym2>B
  <dd id=lab2>B is de bakker
</dl>

Tweet