|
| |
| PRATIQUE CLIENTS WEB |
 |
|
|
| Le point sur le positionnement CSS et Box-model |
| |
| "Pouvez-vous m'expliquez le positionnement relatif des boites en CSS ?"
(23/11/2005) |
 |
 |
Forum |
|
|
Réagissez
dans les forums de JDN Développeurs
|
Une mise en page en CSS fonctionne avant tout au sein d'un flux principal : les
éléments se suivent naturellement, et les règles qu'on leur applique permettent
de contrôler plus ou moins fortement cet "écoulement".
Mais pour bien comprendre le positionnement en CSS, et particulièrement celui
des boîtes, il est nécessaire de connaître et comprendre le modèle de boîte, ou
box model (lire notre
article du 17/09/03). En effet, tous les éléments au sein d'une mise en
page CSS sont considérés comment contenus dans une boîte rectangulaire, définie
par différentes valeurs de tailles : ses marges, ses bordures, son remplissage,
et enfin son contenu.
Marges, block, inline
Marges, bordures et remplissage peuvent tous prendre une valeur nulle, mais dès
que celle-ci est positive, leur influence sur la taille du rectangle, et donc
sur l'ensemble de la mise en page, est à prendre en compte - particulièrement
à cause du bug d'interprétation d'Internet Explorer.
Ensuite, il faut
savoir que les boîtes peuvent se trouver sous deux formes : bloc et en-ligne (block
et inline, respectivement). Ainsi la boîte associée aux balises p,
div, h1 ou ul,
par exemple, sera de type "block", tandis que
des balises comme img, span
ou input appartiennent au type "inline".
La différence fondamentale se retrouve dans leur interprétation : les blocs sont
toujours placés les uns par-dessus les autres, tandis que les en-ligne peuvent
se suivre côte à côte (une image au sein d'un texte, par exemple).
Et la cascade dans tout ça ?
Il faut par la suite intégrer le concept de cascade, cher à CSS. Chaque élément
subit l'influence des éléments qui le contiennent, et influe ses descendants.
Une règle appliquée à un élément aura donc de forte de chance de s'appliquer également
aux balises de même type qu'il contient.
Le flux principal dont nous parlions prend alors toute son importance. Si un élément
reste dans le flux normal, il s'affichera après l'élément qui le précède dans
le code HTML, et le positionnement qu'on lui appliquera se fera par rapport à
son élément conteneur. Mais il est également possible de sortie un élément du
flux normal.
La propriété Float d'un bloc permet ainsi de faire
s'écouler les blocs à droite ou gauche d'un autre, et d'éviter qu'ils se superposent
simplement.
Il est ensuite possible d'appliquer des règles de positionnement fixe, absolu
ou relatif avec l'attribut position. L'élément
sort du flux, et il peut alors devenir délicat d'apprécier sa mise en page. Quand
un élément est spécifié comme relatif, il reste cependant dans le flux, car il
est toujours dépendant des éléments qui l'entourent, mais peut être décalé de
sa position "normale" via les propriétés top ou bottom, et left ou right, dont
les valeurs offrent une distance à prendre avec le flux normal. Ici encore, malheureusement,
certains navigateurs diffèrent dans leur manière de rendre la position relative.
Les meilleures astuces CSS sur le JDN :
- Comment
appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment
centrer horizontalement une DIV dans une autre en CSS ?
- Comment
créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment
définir les cellpadding et cellspacing en CSS ?
- Comment
modifier l'image d'un bouton input en CSS ?
- Comment
rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de
cet élément opaque en CSS ?
- Internet
Explorer supporte-t-il l'attribut CSS border-radius |
|
|
|
