Secció 4: Posicionament CSS

A la Secció 3 hem vist un gran nombre de propietats que descriuen l'aparença dels elements HTML (propietats del text, colors, vores...). Pero els style sheets permeten també establir la disposició (layout) d'aquests elements a la pàgina, oferint una molt interessant alternativa al tradicional ús de taules, d'altra banda força qüestionable.

Els tres primers capítols s'ocupen dels dos aspectes sobre els que es basa el posicionament CSS: el CSS Box Model i els diferents tipus de caixes. El capítol 4 es centra específicament en el posicionament i les propietats que el controlen. Els capítols següents tracten de diversos conceptes i propietats directament relacionats amb la disposició dels elements a la pàgina.

1. El CSS Box Model revisat
2. Tipus de caixes
3. Dimensions d'una caixa
4. Esquemes de posicionament
5. Elements flotants
6. Càlcul de marges i dimensions
7. Elements inline i alçada
8. Caixes i visualització

Cal tenir en compte que el suport per a algunes d'aquestes propietats és força irregular en els navegadors actuals (desembre de 2003), la qual cosa pot arribar a complicar bastant l'aplicació del posicionament CSS en entorns reals. Recordo que aquest curs es basa en l'especificació oficial del W3C i no s'ocupa, a excepció de casos puntuals, dels problemes de compatibilitat causats pels errors d'implementació dels navegadors. De totes maneres el futur és esperançador, ja que les darreres versions dels principals navegadors, com ara IE6, NS7 o Mozilla 1.x, ofereixen un suport cada vegada més complet de l'especificació CSS2.

Nota: Les propietats tractades a aquesta secció ja van ser introduïdes a CSS1, però han trigat bastant a tenir un suport mitjanament acceptable en els navegadors més usats. A més les incompatibilitats entre navegadors tenen sovint conseqüències molt més dràstiques per al resultat final que, per exemple, les propietats que controlen l'aspecte del text, i per això el posicionament CSS continua essent encara tema d'intens debat en els fòrums de disseny web i CSS.