Les items de menu, <li>, sont des éléments de type bloc. En les tranformant en éléments de type en ligne, ils ne s'alignent plus les uns sous les autres mais au fil du texte.
#menunav li{
display:inline;
}
On attribue au bloc d'entête une couleur d'arrière-plan pour mieux le distinguer.
#entete{
background-color:#D8D8D8;
}
En attribuant au bloc sommaire la propriété float avec la valeur left, on le rend flottant à gauche (cf. le positionnement flottant).
#sommaire{
float:left;
}
Pour créer un effet de colonne contenant le sommaire, on décale le contenu principal vers la droite en lui attribuant une marge à gauche.
#contenu{
margin-left:10em;
}
En attribuant au sommaire une largeur égale à la marge du contenu, on empêche d'éventuelles sautes de mise en page que pourrait provoquer un élément du bloc sommaire trop large.
#sommaire{
...
width:10em;
}
Une solution simple pour créer une colonne de couleur et donner à la page une couleur d'arrière-plan et d'utiliser une image en arrière-plan, de 1px de hauteur, de la largeur du sommaire et positionnée à gauche.
body{
...
background:#AEC5DD url(fond_sommaire.png) repeat-y left;
}
2 problèmes surgissent :
Pour mieux contrôler la mise en page, on peut définir la largeur du sommaire et le positionnement du contenu en pixels. C'est une solution très répandue.
#sommaire{
...
width:144px;
}
#contenu{
margin-left:144px;
}
Un autre problème apparaît :
Pour éviter les problèmes provoqués par l'utilisation d'une image d'arrière-plan, on peut passer par une troisème voie :
body{
...
background-color:#a5b38a;
}
#contenu{
...
background-color:#AEC5DD;
}
Ainsi la mise en page est maîtrisée y compris avec grossissement des caractères. Du point de vue de l'accessibilité, c'est la meilleure solution.
Toutefois cette solution a un inconvénient : si la hauteur du contenu est inférieure à la taille de fenêtre, le pied de page prend la couleur du sommaire ; ce qui est malheureux esthétiquement.
Une solution à ce problème peut être d'utiliser la propriété min-height (qui permet de définir une hauteur minimale) pour le contenu. A noter que cette propriété n'est pas prise en charge par Internet Explorer 6- (à moins de faire de la bidouille : cf. http://blog.alsacreations.com/2004/08/17/54-min-height-sur-internet-explorer). Bien souvent, cette hauteur minimale est inutile car la hauteur du contenu principal dépasse la hauteur de la fenêtre.
#contenu{
...
min-height:55em;
}
En attribuant aux éléments image, <img />, la propriété float avec la valeur right, on les rend flottantes à droite.
img{
float:right;
}
Un problème apparaît :
Avec la propriété clear ayant la valeur right, les éléments se positionnent en dessous des éléments flottants à droite.
h3,p{
clear:right;
}
Cette fois, on fait flotter les images à gauche.
img{
float:left;
}
Toutefois si comme précemment on utilise la propriété clear ayant la valeur left, les éléments vont se positionner sous le sommaire qui est aussi un bloc flottant à gauche !
Dans ce cas, la solution est d'utiliser des éléments <div> intermédiaires dans lesquels les images se positionneront à gauche, puis d'utiliser des éléments <div> spécifiques pour provoquer un retour à la ligne.
En d'autres termes, les images sont flottantes dans un sous-bloc du contenu et c'est dans ce sous-bloc qu'est provoqué le retour à la ligne.
Ancien code HTML :
<p><img src="mars.jpg" alt="Mars" />Pri erat... </p>
Nouveau code HTML :
<div> <p><img src="mars.jpg" alt="Mars" />Pri erat... </p> <div class="clear"></div> </div>
On peut remarquer l'utilisation ici d'une dénomination non sémantique de la classe mais au contraire liée à la présentation du document. La raison est que cet élément est vide et n'est justement présent que pour le rendu graphique.
Style css associé:
.clear{
clear:both;
}
Le positionnement global est terminé. Toutefois si l'on teste la page sous Internet Explorer 6, on peut constater que la mise en page "saute".
Pour résoudre ce problème, lié à une mauvaise prise en charge des propriétés CSS par IE 6-, on peut utiliser une astuce, dite hack.
Un hack CSS désigne l'utilisation soit d'une syntaxe non-valide soit d'une propriété CSS d'une façon théoriquement inadéquate ou inutile :
Dans notre exemple, en utilisant le Holy Hack avec le bloc contenu, on résoud le problème de mise en page sous IE 6-.
#contenu{
...
height:1%;
}
Il convient d'éviter le plus possible d'éviter l'utilisation de hacks. En effet l'utilisation de syntaxes non-valides engendre un risque possible de problèmes portant sur la compatibilité et la pérenité du page web. En savoir plus - Alsacréations (lien externe)
Pour compléter le travail de mise en page, on aère et équilibre la page en utilisant essentielement les propriétés margin et padding.
Précisons qu'il s'agit d'un exemple de mise en page par CSS et qu'il est possible d'obtenir des rendus proches par d'autres voies.
Précisons également qu'il est impératif de tester une mise en page par CSS dans les principaux navigateurs.
Pour compléter cette exemple : 2 Techniques CSS