Diferència entre revisions de la pàgina «CSS posicionament»
Salta a la navegació
Salta a la cerca
(Es crea la pàgina amb «En CSS podem trobar diferents tipus de posicionament: * Normal: segueix el que anomenem "flux normal del text". Això significa: **Un bloc ocupa tota l'amplada del seu c…».) |
|||
| Línia 1: | Línia 1: | ||
| − | En CSS podem trobar diferents tipus de posicionament: | + | En CSS podem trobar diferents tipus de posicionament: |
| − | * Normal | + | *Normal |
| − | + | *Absolut | |
| − | + | *Flotant | |
| − | |||
| − | * Absolut | ||
| − | |||
| − | * Flotant | ||
| − | |||
| + | <br> | ||
| + | {| cellspacing="1" cellpadding="1" border="1" width="750" | ||
| + | |+ Modes de poscionament | ||
| + | |- | ||
| + | ! scope="row" | | ||
| + | Mode de<br> | ||
| + | posicionament | ||
| − | + | ! scope="col" | Descripció<br> | |
| − | + | ! scope="col" | Propietat CSS mode<br> | |
| − | + | ! scope="col" | Propietats CSS per alineació<br> | |
| + | |- | ||
| + | ! scope="row" | Normal<br> | ||
| + | | | ||
| + | Segueix el que s'anomena '''"flux normal del text"''': d'esquerra a dreta i de dalt a baix.<br> | ||
| − | El posicionament normal | + | Un bloc ocupa tota l'amplada del seu contenidor. |
| + | |||
| + | | ''position: normal;''<br> | ||
| + | | | ||
| + | margin: ...; | ||
| + | |||
| + | margin-left: ...; margin-right: ...; margin-top: ...; margin-bottom: ...;<br> | ||
| + | |||
| + | |- | ||
| + | ! scope="row" | Absolut<br> | ||
| + | | | ||
| + | Es poden posicionar els blocs de manera absoluta respecte del contenidor. | ||
| + | |||
| + | El bloc contenidor portarà la propietat "relative". | ||
| + | |||
| + | El bloc a alinear portarà l | ||
| + | |||
| + | | | ||
| + | BLOC: | ||
| + | |||
| + | ''position: absolute;'' | ||
| + | |||
| + | CONTENIDOR: | ||
| + | |||
| + | ''position: relative;''<br> | ||
| + | |||
| + | | | ||
| + | top: 10px; | ||
| + | |||
| + | bottom: 2em; | ||
| + | |||
| + | left: 100px; | ||
| + | |||
| + | right: 5em; | ||
| + | |||
| + | |- | ||
| + | ! scope="row" | Flotant<br> | ||
| + | | Per alinear blocs al voltant del text.<br> | ||
| + | | | ||
| + | ''float: left;'' | ||
| + | |||
| + | ''float: right;'' | ||
| + | |||
| + | | <br> | ||
| + | |} | ||
| + | |||
| + | <br> | ||
| + | |||
| + | <br> | ||
| + | |||
| + | *[[CSS posicionament normal]] | ||
| + | *[[CSS posicionament absolut]] | ||
| + | *[[CSS posicionament flotant]] | ||
| + | |||
| + | <br> | ||
Revisió del 13:18, 5 març 2011
En CSS podem trobar diferents tipus de posicionament:
- Normal
- Absolut
- Flotant
|
Mode de posicionament |
Descripció |
Propietat CSS mode |
Propietats CSS per alineació |
|---|---|---|---|
| Normal |
Segueix el que s'anomena "flux normal del text": d'esquerra a dreta i de dalt a baix. Un bloc ocupa tota l'amplada del seu contenidor. |
position: normal; |
margin: ...; margin-left: ...; margin-right: ...; margin-top: ...; margin-bottom: ...; |
| Absolut |
Es poden posicionar els blocs de manera absoluta respecte del contenidor. El bloc contenidor portarà la propietat "relative". El bloc a alinear portarà l |
BLOC: position: absolute; CONTENIDOR: position: relative; |
top: 10px; bottom: 2em; left: 100px; right: 5em; |
| Flotant |
Per alinear blocs al voltant del text. |
float: left; float: right; |
