Menu 1
Menu 2
Menu 3
Menu 1
Menu 2
Menu 3
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { /* redéfinition du format de base de la page */
height:100%} /* ne sert que si on a une DTD
stricte. Inutile en transitional
*/
.boite,.boite2 { /* ces 2 boites vont recevoir la même définition
*/
float:left ; /* les boites sont callées à gauche */
width:30% ; /* elles font 30% de large de la boite parent (par défaut
l'écran) */
height:80% ; /* elles font 80% de hauteur de la boite parent (par défaut
l'écran) */
border:solid black 2px} /* style de la bordure */
.boite p { /* ce style ne s'applique qu'aux paragraphes se trouvant
dans ".boite" (mais pas dans ".boite2") */
height:33% ; /*chaque paragraphe fera 33% de haut de ".boite"
*/
margin:0px} /* la marge de chaque paragraphe est de 0 pixels */
</style>
</head>
<body>
<div class="boite"> <!-- début de
".boite" -->
<p>Menu 1</p> <!-- ce paragraphe fait 33% de la hauteur
de ".boite" -->
<p>Menu 2</p> <!-- idem -->
<p>Menu 3</p> <!-- idem -->
</div> <!-- fin de ".boite" -->
<div class="boite2"> <!-- début de
".boite2" -->
<p>Menu 1</p> <!-- ce paragraphe a la hauteur
d'une ligne standard -->
<p>Menu 2</p> <!-- idem -->
<p>Menu 3</p> <!-- idem -->
</div> <!-- fin de ".boite2" -->
</body>
</html>
COMMENTAIRES
Ce petit style tout simple montre 2 boites. Dans la seconde, les paragraphes se suivent de façon normale. Ils ne prennent qu'une ligne standard.
On peut cependant souhaiter répartir les items d'un menu de façon régulière dans la boite. C'est simple à réaliser en pixels, mais c'est une erreur. Dès que la définition d'écran passe de 800 X 600 (par exemple) à 1600 X 1200, on se retrouve avec une grosse boite vide et un tout petit menu concentré dans le haut de la boite.
La solution est donc de définir les paragraphes <p> de la 1er boite avec une hauteur en %. Si on a 3 items, on définira la hauteur à 33%. Si on a 10 items, on définira la hauteur à 10%.
Il ya 3 choses à savoir pour ne pas faire d'erreur :
1/ Quand on défini une hauteur height:10% (par exemple), cela signifie 10% de l'écran si on est pas dans une boite, ou 10% de la boite si on s'y trouve. La commande .boite p fait que la hauteur de p sera bien 10% de ".boite", et non de ".boite2" ou de l'écran.
2/ Par défaut, les navigateurs créés une marge haute et basse autour du paragraphe. Celle-ci est complétement variable d'un navigateur à l'autre. Il faut donc redéfinir cette marge pour ne pas avoir de surprise. Comme on raisonne en %, le plus simple est mettre la marge à 0 (margin:0px). Sinon, l'affichage devient bizarre.
3/ Si on utilise une DTD stricte, la hauteur en % ne marche dans une boite que si on ajoute un body {height:100%} dans les styles. Inutile en transitional.