|
Modèles De Boîtes
- En Bref
- Après avoir abordé rapidement les boîtes dans la dernière section de quelques FondamentauxCSS, cette page est destinée à comprendre les fondamentaux du positionnement des boîtes dans une page XHTML. Les modèles de mise en page (
 sans tableaux naturellement !) fondés sur les boîtes laissent aux webdesigners la liberté de mise en page de documents visuellement complexes attendus par les utilisateurs et clients et ce sans compromettre la qualité de votre contenu dans tout autre type de navigateur. Je compte démarrer cette page sur quelques exemples tirés de l'ouvrage d'Owen Briggs. De nombreux liens, modèles et ressources externes existent désormais en français. Aussi, n'hésitez pas à compléter cette page. Merci d'avance. -- Christophe
Introduction 
Sur cette page nous expliquerons d'abord la mécanique pour placer une boîte sur un écran puis travaillerons sur des exemples de mises en pages de boîtes en démarrant par une mise en page simple. Cette page n'a pas pour ambition de couvrir tous les modèles de mise en page sans tableaux. L'intention ici est de vous présenter comment interagissent les boîtes de telle façon que vous puisssiez effectuer vous-même vos propres combinaisons.
Flux de Contenu / Positionnements
Owen Briggs présente le concept du flux[1] pour introduire les boîtes : Les choses démarrent dans le coin en haut et à gauche de l'écran et au fur et à mesure que des items s'ajoutent, ils se placent vers la droite et puis en dessous tant qu'il y a de la place disponible. Ce concept s'applique tant au texte qu'à la création de boîtes. Les boîtes sont placées dans un flux et non pas collées sur une grille. Le web diffère de l'impression. Les webdesigners vous parleront de Liquid Design.
Maintenant, prenons cet exemple très simple de XHTML et CSS :
<body>
<div class="wee">1</div>
<div class="wee">2</div>
<div class="wee">3</div>
<div class="wee">4</div>
</body>
body {
margin: 0px;
padding: 0px;
color: #000;
background-color: #ccc;
}
.wee {
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
}
Cette règle ne produit pas l'alignement de 4 boîtes sur une même ligne... mais bien cela :
comme ceci (cliquez sur ce lien)
Ceci s'explique parce qu'une <div> est un élément de bloc (voir FondamentauxCSS), aussi chacun de ces éléments obtient sa propre ligne. L'écoulement est ici et fonctionne parfaitement. Ces simples <div>s s'épanchent dans le navigateur sur toute la largeur car rien ne les arrête. La largeur (width) n'a pas été déclarée et la marge est simplement de 5px, aussi le côté droit s'épanche jusqu'à ce qu'il rencontre quelque chose ; dans ce cas, il n'y a rien à part le bord de la fenêtre.
Si quelque chose est placé entre les divs comme :
<body>
<div class="wee">1</div>
Le renard roux a sauté au-dessus du chien paresseux.
<div class="wee">2</div>
<div class="wee">3</div>
<div class="wee">4</div>
</body>
Le résultat donne... (cliquez sur ce lien)
Si nous raccourcissons les divs, disons en déclarant 20% :
body {
margin: 0px;
padding: 0px;
color: #000;
background-color: #ccc;
}
.wee {
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
Le résutlat est encore...(cliquez sur ce lien)
... Vous le constatez, les <div>s comme celles-ci courent en bas de la page sans rien à côté d'elles, parce que sont des éléments de niveau bloc. Les boîtes qui vont suivre ce comportement d'écoulement normal sont dites positionnés de manière statique. Inutile d'inclure cette déclaration dans votre règle de <div> parce qu'elle est prise par défaut. Cependant, si elle était incluse elle ressemblerait à :
.wee {
position: static;
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
Il existe d'autres types de positionnements pour un élément :
- le positionnement relatif - relative
- le positionnement fixe - fixed
- le positionnement absolu - absolute
Nous étudierons ces 3 autres types de positionnement avec le même code XHTML exception faite d'une petite différence : la première <div> se verra attribuer une nouvelle classe pour faire fonctionner la nouvelle information de positionnement. Le reste des autres <div>s restera statique dans le flux normal.
<body>
<div class="different">1</div>
<div class="wee">2</div>
<div class="wee">3</div>
<div class="wee">4</div>
</body>
Positionnement Relatif
Un élément positionné de manière relative reste en place dans la fenêtre ou dans son élément parent. Il s'agit du comportement par défaut de tout élément HTML. Il s'affiche après ce qui le précède et avant ce qui le suit. On peut déplacer un élément placé de manière relative depuis son emplacement naturel dans la fenêtre en jouant sur les propriétés top, right, bottom et left.
.different {
position: relative;
top:25px;
right: 25px;
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
Cette modification donne... (cliquez sur le lien)
Vous constatez que top:25px signifie que 25px sont insérés au-dessus de la <div> pour l'amener vers le bas, et que la déclaration right: 25px pousse la <div> de 25 pixels vers la gauche. De la même manière, bottom pousse vers le haut et left pousse à droite. Pour résumer, la propriété décrit où s'insère la valeur et non la direction dans laquelle elle migre. Il ne reste qu'à essayer.
.different {
position: relative;
bottom: 25px;
left: 25px;
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
Voir le résultat(cliquez sur le lien)
Positionnement Absolu
Le positionnement absolu crée un élément complètement retiré de l'écoulement. L'élément est ainsi indépendant, un agent libre séparé du reste du document que vous pouvez compléter par le code HTML de votre choix. Les éléments ainsi définis sont placés à un endroit exact de la fenêtre par le biais de coordonnées X et Y.
.different {
position: absolute;
top: 25px;
right: 25px;
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
Voir le résultat(cliquez sur le lien)
.different {
position: absolute;
bottom: 25px;
left: 25px;
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
Voir le résultat(cliquez sur le lien et n'hésitez pas à ''jouer'' avec la taille de la fenêtre de votre navigateur pour tester.)
Positionnement Fixe
Le positionnement fixe est une position absolue avec une différence : le bloc élément conteneur est configuré indépendamment du reste du contenu de la page, dans une position spécifique. La grande différence est que lorsque la page défile dans la fenêtre, les éléments fixes restent dans leurs positions initiales et ne défilent pas.
Ce qui signifie que la <div> reste toujours posé sur l'écran. Prenons un exemple précis, en substituant aux 3 <div>s statiques, 3 paragraphes :
<body>
<div class="different">1</div>
<p>Le wiki pourrait devenir le meilleur outil pour produire un
document collaboratif... Tous les utilisateurs peuvent
éditer cette page pour la corriger. Mais je continue
à me poser quelques questions. Comment mieux le faire
connaître ? Nous devons réfléchir de plus en
plus à des séances de dégustation wiki. Si
vous avez des idées n'hésitez pas à venir
nous aider ! Le wiki pourrait devenir le meilleur outil pour
produire un document collaboratif... Tous les utilisateurs
peuvent éditer cette page pour la corriger. Mais je
continue à me poser quelques questions. Comment mieux le
faire connaître ? Nous devons réfléchir de
plus en plus à des séances de dégustation
wiki. Si vous avez des idées n'hésitez pas à
venir nous aider !</p>
<p>Lorem ipsum dolor sit amet Le wiki pourrait devenir le meilleur outil pour produire un
document collaboratif... Tous les utilisateurs peuvent
éditer cette page pour la corriger. Mais je continue
à me poser quelques questions. Comment mieux le faire
connaître ? Nous devons réfléchir de plus en
plus à des séances de dégustation wiki. Si
vous avez des idées n'hésitez pas à venir
nous aider ! Le wiki pourrait devenir le meilleur outil pour
produire un document collaboratif... Tous les utilisateurs
peuvent éditer cette page pour la corriger. Mais je
continue à me poser quelques questions. Comment mieux le
faire connaître ? Nous devons réfléchir de
plus en plus à des séances de dégustation
wiki. Si vous avez des idées n'hésitez pas à
venir nous aider !</p>
<p>Bolo Lorem Ipsom seprat Le wiki pourrait devenir le meilleur outil pour produire un
document collaboratif... Tous les utilisateurs peuvent
éditer cette page pour la corriger. Mais je continue
à me poser quelques questions. Comment mieux le faire
connaître ? Nous devons réfléchir de plus en
plus à des séances de dégustation wiki. Si
vous avez des idées n'hésitez pas à venir
nous aider ! Le wiki pourrait devenir le meilleur outil pour
produire un document collaboratif... Tous les utilisateurs
peuvent éditer cette page pour la corriger. Mais je
continue à me poser quelques questions. Comment mieux le
faire connaître ? Nous devons réfléchir de
plus en plus à des séances de dégustation
wiki. Si vous avez des idées n'hésitez pas à
venir nous aider !</p>
</body>
La CSS est comme ci-dessous mais avec une position fixe déclarée pour notre boîte. Une marge suffisante a été ajoutée aux paragraphes :
p {
margin-left:30%;
}
body {
margin: 0px;
padding: 0px;
color: #000;
background-color: #ccc;
}
.different {
position: fixed;
top: 0px;
left: 0px;
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
donne le résultat suivant (cliquez pour essayer sur un navigateur standard... (Diminuez votre fenêtre et scrollez). Dans la réalité, ne vous réjouissez pas : ce positionnement fixe ne fonctionne pas sur un grand nombre de navigateurs et reste donc déconseillé....
Float
Float est une propriété, pas une valeur de la propriété position. Les éléments flottants sont prix dans le flux, mais les autres éléments sont conscients des éléments qui flottent et les contournent.
<div class="wee">1</div>
<p>Le wiki pourrait devenir le meilleur outil pour produire un
document collaboratif... Tous les utilisateurs peuvent
éditer cette page pour la corriger. Mais je continue
à me poser quelques questions. Comment mieux le faire
connaître ? Nous devons réfléchir de plus en
plus à des séances de dégustation wiki. Si
vous avez des idées n'hésitez pas à venir
nous aider ! Le wiki pourrait devenir le meilleur outil pour
produire un document collaboratif... Tous les utilisateurs
peuvent éditer cette page pour la corriger. Mais je
continue à me poser quelques questions. Comment mieux le
faire connaître ? Nous devons réfléchir de
plus en plus à des séances de dégustation
wiki. Si vous avez des idées n'hésitez pas à
venir nous aider !</p>
</body>
.wee {
float: left;
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
p {
margin: 5px;
padding: 10px;
}
Voir l'élément flottant : non seulement le contenu de l'élément enrobe l'élément flottant. Toute bordure , couleur d'arrière-plan ou image d'arrière-plan se retrouvera sous l'élément flottant
p {
margin: 5px;
padding: 10px;
background-color: #fff;
}
Voir avec une couleur d'arrière-plan
p {
clear: left;
margin: 5px;
padding: 10px;
}
Même si ce n'est pas désiré, l'option d'appliquer la propriété clear à l'élément le suivant, pour les côtés droit et gauche ou les deux. L'élément suivant apparaîtra maintenant en-dessous du flottement précédent.
Notez que la boîte flottante a une valeur déclarée. Ce n'est pas optionnel mais bien requis par la spécification CSS. Vous pouvez régler cette propriété par width ou comprise par la largeur intrinsèque qui exite pour un élément de substitution comme une <img> ou <object>.
Même si une boîte flottante est extraite de l'écoulement normal, elle n'est pas fixée en place comme une boîte positionnée de manière absolue, et n'ignore pas les éléments autour d'elle. Elle a simplement un jeu de comportements différents. Une boîte flottante apparaît sur la ligne déclarée par le document.
Pour démontrer cela plus clairement utilisons une série de boîtes qui flottent :
<body>
<div class="wee">1</div>
<div class="wee">2</div>
<div class="wee">3</div>
<div class="wee">4</div>
</body>
Et appliquons leur la même classe pour les faire flotter à gauche :
<pre>
.wee {
float: left;
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
Observons le résultat dans une nouvelle fenêtre. . Vous constatez que chaque boîte se place aussi haut que la précédente et non plus haut et aussi à gauche que les marges leur permettent. Si nous changeons le float à right, à savoir :
.wee {
float: right;
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
Nous obtenons (cliquez sur le lien)
Observons le résultat dans une nouvelle fenêtre. . Notez comment la quatrième div se positionne sur la gauche ! Tout cela parce que la première boîte a été placée aussi à droite que possible et que les autres boîtes se sont positionnées dans l'écoulement tout le long de l'élément suivant.
Maîtriser l'empilement des boîtes grâce au Z-index
Dans cette section nous verrons comment empiler des boîtes (objets) et pourrons parler d'un positionnement 3D. Même si votre écran est une surface à deux dimensions, il est possible d'attribuer une 3° dimension aux éléments positionnés. Les numéros d'empilement peuvent être assignés aux éléments grâce au système d'index-z (z-index). Ces numéros indiquent l'ordre dans lequel les éléments s'affichent dans le code HTML par rapport à leurs parents et à leurs frères. Si les contenus de certains éléments se chevauchent ce que nous verrons dans l'exemple des boîtes, le numéro le plus élevé provoquera l'affichage au-dessus de celui dont le numéro est inférieur.
Régler un z-index consiste à déclarer quel élément sera au dessus en cas de chevauchement :
1. Réglons le HTML
<body>
<div id="un">1</div>
<div id="deux">2</div>
<div id="trois">3</div>
<div id="quatre">4</div>
</body>
2. La Feuille de Style sans z-index :
#un {
position: absolute;
top: 10px;
left: 10px;
padding: 10px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
#deux {
position: absolute;
top: 40px;
left: 40px;
padding: 10px;
background-color: #ccc;
border: 1px solid #000;
width: 20%;
}
#trois {
position: absolute;
top: 70px;
left: 70px;
padding: 10px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
#quatre {
position: absolute;
top: 100px;
left: 100px;
padding: 10px;
background-color: #ccc;
border: 1px solid #000;
width: 20%;
}
Constatez le chevauchement sur un navigateur standard...(cliquez sur ce lien). Note : l'effet ne fonctionne pas sur mon navigateur IE mais vous le retrouverez aisément sur MozillaFirefox ! Le navigateur comme mon IE sur le PC a décidé de lui-même que la première boîte doit être au sommet de la pile et les boîtes suivantes en-dessous...
Disons que sur un navigateur compatible CSS, que parce qu'aucun z-index n'a été réglé et que parce que toutes les boîtes appartiennent au même élément conteneur, elles s'empilent naturellement dans l'ordre de l'écoulement XHTML. La boîte un, puis la deux qui chevauche la un et ainsi de suite. Comme aux cartes à jouer que vous distribuez !
Si vous donnez à deux boîtes le même z-index, elles suivront les instructions du navigateur. Il est recommandé de ne pas utiliser de z-index négatif.
Désormais jouons maintenant avec les boîtes et le z-index :
#un {
position: absolute;
top: 10px;
left: 10px;
z-index: 4;
padding: 10px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
#deux {
position: absolute;
top: 40px;
left: 40px;
z-index: 3;
padding: 10px;
background-color: #ccc;
border: 1px solid #000;
width: 20%;
}
#trois {
position: absolute;
top: 70px;
left: 70px;
z-index: 2;
padding: 10px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
#quatre {
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
padding: 10px;
background-color: #ccc;
border: 1px solid #000;
width: 20%;
}
Le résultat s'affiche en cliquant sur ce lien : Normal si vous disposez d'un navigateur standard...
Maintenant, Owen propose de faire la même chose en donnant à la seconde <div> une très grosse valeur z-index. Le résultat sera le même que si vous utilisiez 5 au lieu de 300. Le navigateur place simplement la valeur la plus grande au sommet, de telle façon que vous n'ayez pas besoin d'utiliser une séquence comme 1-2-3-4-5 si vous ne voulez pas... Pratique, parce que vous pouvez régler une valeur de z-index pour une <div> à un chiffre qui restera sûr dans le cas où vous ajustiez plus tard votre feuille de style en ajoutant d'autres <div>'s
#un {
position: absolute;
top: 10px;
left: 10px;
z-index: 4;
padding: 10px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
#deux {
position: absolute;
top: 40px;
left: 40px;
z-index: 300;
padding: 10px;
background-color: #ccc;
border: 1px solid #000;
width: 20%;
}
#trois {
position: absolute;
top: 70px;
left: 70px;
z-index: 2;
padding: 10px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
#quatre {
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
padding: 10px;
background-color: #ccc;
border: 1px solid #000;
width: 20%;
}
Vous constatez que la carte n°2 prend le dessus de la pile ! Cliquez sur ce lien
Normal me direz-vous parce que les éléments ont les mêmes contenus. Mais les choses se modifient en cas d'éléments ayant un contenu différent. Emboîtons désormais les boîtes dans deux jeux enfants-parents :
<body>
<div id="un">1<div id="deux">2</div></div>
<div id="quatre">4<div id="trois">3</div></div>
</body>
Et modifions les valeurs des positionnements et des z-index sur la feuille de style. Parce que le positionnement absolu se réfère à l'élément conteneur, nous laissons toutes les largeurs à 20% afin que vous puissiez aisément distinguer les boîtes qui sont les enfants.
#un {
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
padding: 10px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
#deux {
position: absolute;
top: 30px;
left: 30px;
z-index: 300;
padding: 10px;
background-color: #ccc;
border: 1px solid #000;
width: 20%;
}
#trois {
position: absolute;
top: -30px;
left: -30px;
z-index: 3;
padding: 10px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
#quatre {
position: absolute;
top: 100px;
left: 100px;
z-index: 4;
padding: 10px;
background-color: #ccc;
border: 1px solid #000;
width: 20%;
}
Le résultat. Cliquez sur ce lien
Vous pouvez observer (dans un navigateur standard) que la boîte 2 a un z-index de 300 et la boîte 3 a un z-index de 3, maintenant la boîte 3 est au-dessus de la pile. Cela parce qu'ils n'ont pas les enfants des mêmes parents. Les index-z qui décident de la séquence de chevauchement ici sont ceux de leurs parents, qui sont des enfants des mêmes parents, et dans ce cas la boîte 4 (parent de la boîte 3) a un z-index plus élevé que la boîte 1 (parent de la boîte 2).
Vous arrivez à suivre ? Le concept me semble bien éclairé ici et plutôt simple, mais les choses peuvent se complexifier en appliquant un index-z sur des gabarits plus complexes et telle est la raison pour laquelle cette explication fût détaillée ici. Une valeur de z-index s'applique donc à l'ordre d'empilement des enfants de même parents (siblings en anglais). Si les choses ne fonctionnent pas comme vous pourriez vous y attendre sur votre page, revoyez la séquence parent, enfant et ancêtres à l'intérieur de votre conception. Il y a de fortes chances que vous appliquiez le z-index à une mauvaise <div>.
Finie la théorie ? Essayons de mettre en pratique dans une nouvelle page pour concevoir des GabaritsDePage.
- [1] Consultez aussi l'excellent article d'OpenWeb qui aborde aussi ce concept du flux sur la mise en page
| 
