Secció 4: Posicionament CSS

4. Esquemes de posicionament

4.4. Exemple de posicionament absolut: un layout senzill

L'exemple que segueix serveix per il·lustrar el que has vist fins ara en una situació més o menys real. L'objectiu és fer una pàgina que tingui el contingut principal al centre, i dues columnes a banda i banda amb altres continguts. A més a la columna de la dreta posarem una icona per contactar amb nosaltres, posicionada absolutament.

L'exemple és una mica més llarg que els que hem vist fins ara, però segur que no et costarà seguir-lo. L'style sheet també és més llarg, però a aquestes alçades ja no t'ha d'espantar! :) Primer trobaràs el codi HTML i el codi CSS, i a continuació algunes explicacions sobre l'exemple.

Observa que el codi HTML és molt senzill. La separació entre contingut i presentació és total. Passem a veure l'style sheet.

BODY {
font-family: Verdana, sans-serif;
padding: 1em 28%; }

#left, #right {
position: absolute;
width: 20%;
border: 2px solid #6a6aff;
background-color: #e6e6ff;
padding: 1em;
font-size: .8em; }

#left {
left: 2%;
top: 2em; }

#right {
right: 2%;
top: 2em; }

#right img {
position: absolute;
top: 2px;
right: 2px;
border: none; }

#right .exclamacio {
font: bold 6em monospaced;
color: red; }

I aquest n'és el resultat (s'obre en una nova finestra)

Comentaris: posicionament absolut

Els DIV amb id 'left' i 'right' estan posicionats absolutament. Com que no tenen cap avantpassat posicionat, el seu bloc contenidor l'estableix l'element HTML. És a dir, les propietats top, left i right es mesuren respecte els extrems de la finestra del navegador.

La imatge dins el DIV#right també està posicionada de forma absoluta. Ara el bloc contenidor és el DIV, ja que és l'avantpassat posicionat més proper. La propietat right diu que la imatge estarà separada de l'extrem dret del DIV per 2px, i el mateix per a la propietat top. Fixa't que, com vaig explicar a l'apartat anterior, donat que es tracta d'un element absolutament posicionat les propietats right i top fan referència a l'àrea padding de l'antecedent (el DIV) i no a l'àrea de contingut. Ho pots veure perquè el DIV té padding 1em, i en canvi la imatge es situa a 2px de la vora, no pas a 1em + 2px.

Comentaris: layout

Observa com s'ha coordinat el padding de BODY amb les dimensions dels DIV, per evitar el solapament que es produia en els primers exemples del capítol anterior. Aquest és un bon exemple (força senzill!) de layout basat en CSS. Tradicionalment s'haurien usat taules per a assolir aquesta disposició en tres columnes, però en la pàgina no hi ha realment cap taula. L'ús del posicionament CSS permet que el codi HTML descrigui de forma més acurada els continguts de la pàgina, deixant la presentació a càrrec dels style sheets.

L'exemple mostra de fet un avantatge adicional d'usar posicionament CSS enlloc d taules. Fixa't que en el codi HTML primer hi ha el contingut de la pàgina i després el dels DIV. D'aquesta manera el navegador comença mostrant el contingut (suposem que és el més interessant :) ), i després carrega les columnes laterals. Això en una pàgina senzilla com aquesta és irrelevant, però si estigués carregada d'imatges, Flash o Java l'ordre de càrrega passaria a ésser un factor important. I si ens interessés un altre ordre, cap problema! Simplement cal posar al principi del BODY el DIV que volem primer, el resultat final és exactament el mateix!

Comentaris: mesures relatives

No puc evitar fer un comentari respecte l'ús de mesures relatives (em i percentatges) enlloc de per exemple px o pt. El layout d'aquesta pàgina s'adapta a qualsevol resolució de pantalla, incloses resolucions molt baixes o molt altes. Dissenyar per a resolucions fixes (típicament 800px o 1024px d'amplada) és una pràctica molt extesa però que presenta greus inconvenients. En fi, no és aquest el lloc ni el moment de parlar en profunditat d'aquest tema, però crec que és interessant posar-lo de manifest.

Comentaris: limitacions IE

Mmh, no puc evitar tampoc parlar breument dels problemes d'implementació d'Internet Explorer. En els DIV amb id 'left' i 'right' la propietat width està establerta a 20%. D'acord amb l'estàndard CSS aquest percentatge es mesura respecte l'amplada del bloc contenidor. Com hem vist anteriorment, el bloc contenidor l'estableix l'element posicionat avantpassat més proper, i si no n'hi ha cap, com és el nostre cas, l'estableix l'àrea de contingut de l'element arrel, és a dir, l'element HTML. Ara bé, IE interpreta erròniament que l'element arrel és BODY, i com que BODY té padding lateral, l'amplada dels DIV es calcula incorrectament respecte l'àrea de contingut de BODY.

Aquest és un problema de fàcil solució. T'atreveixes a intentar-ho?