18. Posicions i transformacions

 

Índex

Introducció

En absència d'especificacions diferents, els elements d'un document HTML apareixen l'un a continuació de l'altre. Hi ha, però, elements com ara les imatges - i en general els elements inserits - que, mentre trobin espai, es situen a la dreta de l'anterior: són elements en línia.

Hi ha diversos recursos per a trencar aquesta regularitat; en particular ens pot interessar:

 

Modificació de la forma de presentació de les imatges.

Si dues o més imatges es troben dins un mateix contenidor (p, td, etc.), i hi ha prou espai, es situen l'una al costat de l'altra, llevat que hi hagi una indicació en contra. Si entre l'una i l'altra situem un element <br />, la posterior passa a situar-se a sota de l'anterior, no pas a la dreta.

D'altra banda també es pot recórrer a diferents elements contenidors d'imatges, un per a cada una: molt sovint es disposa una taula amb les especificacions pertinents, i les imatges es situen en les cel·les adequades.

 

Elements intercalats en un text

La presentació d'un text pot ésser interrompuda per la d'un altre element - imatge o anàleg, o un altre text. Això provoca la interrupció brusca del text, la presentació de l'element inserit a continuació i la posterior represa de l'element interromput.

Aquest comportament pot ésser modificat amb l'especificació float, que té tres valors: left, right i el valor per defecte, none.

Amb els valors left i right l'element afectat s'arrrana a l'esquerra o a la dreta i l'espai sobrant, si n'hi ha, queda lliure per a ésser ocupat:

Exemple

Aquest recurs permet operacions curioses, com ara donar a una llista l'aspecte d'una taula.

Exemple

Sovint desitgem sotmetre diversos elements a float, però no volem que l'espai romanent sigui ocupat; en aquest cas n'hem de forçar la fi. Això s'aconsegueix afegint l'especificació

a l'element immediatament següent.

Exemple

La disposició en seqüència lateral és sensible a l'amplada útil de la pantalla a condició que cap element superior no tingui dimensions especificades:

Exemple

 

Posició dels elements

Podem modificar la posició habitual dels elements amb l'atribut position, que pot tenir quatre valors: static, relative, absolute i fixed.

Quan un element ocupa la posició determinada pel flux de tots els elements anteriors, diem que és static. És l'opció per defecte, i en general no cal especificar-la.

Un element relative es desplaça de la posició que altrament li pertocaria. El desplaçament és fixat per dos paràmetres, top i left. Amb això no s'altera el flux normal dels elements, de manera que el següent element es col·loca just en el punt que hauria ocupat encara que no hi hagués hagut cap desplaçament.

Exemple

L'especificació absolute només es pot fer servir a l'interior d'un contenidor relative. Quan es fa servir, l'element es situa en una posició referida a l'angle superior esquerre de l'element que el conté (vg., un P absolut posicionat dins un DIV amb posició relative es posiciona en relació a aquest).

Exemple

Finalment, un element de posició fixed es situa en una posició fixa en relació a la pantalla, i aquesta no es modifica encara que desplacem el document.

Exemple

Cal tenir present que els elements que només tenen text són transparents, i si dos o més coincideixen, se'n veuen superposats els continguts. Però si contenen imatges o color de fons, esdevenen opacs. En cas de coincidència, l'element posterior esdevé capa superior i tapa els anteriors.

 

Transformacions

Amb l'atribut transform podem girar, traslladar, escalar i esbiaixar els elements i el seu contingut, amb les especificacions respectives següents:

i diverses variacions d'aquests.

Donada la manca de compatibilitat total, cal repetir l'especificació dues vegades, amb

Exemple