lundi 13 février 2012 (), par
Bien souvent (voir autre article ici), les sites webs sont faits en tailles fixes, et parfois même à base de tableaux.
Or, il est préférable de pouvoir adapter la taille des éléments à afficher en fonction de la taille de la fenêtre du navigateur web du visiteur.
Bien que cela soit facile à faire avec un tableau, il est plus propre de faire des blocs (div) auxquels on appliquera un style dans une feuille de style css (dont la mise en place et le fonctionnement seront l’objet d’un autre article).
En effet, un site fait à base de tableau sera difficile à maintenir et faire évoluer.
Les sites webs faits avec des blocs ont bien souvent ceux-ci en position "flottante à gauche" (propriété de style float left), donc taille fixe obligatoire sinon le "flottant gauche" qui est à droite des autres risque de couler plus bas, si la largeur combinée des deux blocs dépasse celle de la fenêtre.
Certes, il serait faisable de définir les largeurs en pourcentage de la fenêtre, mais le bloc "menu" ou "navigation" risquerait alors de prendre de mauvaises proportions : trop petit si la fenêtre est inférieure à la taille prévue lors du développement, ou inversement trop grand.
Le mieux étant de combiner tailles fixes pour les blocs de navigation, de menu, etc... et des tailles variables pour le contenu lui-même.
La stratégie que je préfère adopter est le positionnement des blocs de manière absolue (propriété CSS position:absolute) en accrochant les bords des blocs à ceux de la fenêtre (propriétés CSS top, left, right et bottom), de sorte que les bordures étant fixes, les tailles internes, elles, sont variables.
démonstration :
bloc "fenêtre", taille fixée à 400px de large et 100px de haut
dans lequel on place un div navigation de 150 px de large, fixé sur toute la hauteur à gauche,
et un div contenu, fixé sur toute la hauteur, à 150px de la gauche et à 0px de la droite :
Code html correspondant :
<div id="fenetre">
<div id="navigation">
menu navigation
</div>
<div id="contenu">
contenu
</div>
</div> <!- - fenetre - ->
le style css associé :
#fenetre {
width:400px;
height:100px;
border-style:solid;
border-width:2px;
border-color:snow;
color:black;
}
#navigation {
position:absolute;
left:0;
top:0;
bottom:0;
width:150px;
background-color:lightblue;
}
#contenu {
position:absolute;
left:150px;
right:0;
top:0;
bottom:0;
background-color:orange;
}
Ce qui donne :
contenu
|
Maintenant, "fenêtre" de 600px au lieu de 400, mêmes propriétés CSS pour le reste :
contenu
|
Le bloc "navigation" en bleu est toujours à 150px de large, mais le bloc "contenu" en orange s’est adapté à la taille du bloc "fenêtre".
Par exemple, pour ce site, il y a 4 blocs :