Comment gérer la taille des éléments web ?

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 :

Maintenant, "fenêtre" de 600px au lieu de 400, mêmes propriétés CSS pour le reste :

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 :

• entete en haut, qui fait 50px fixes de hauteur, et 100% de la largeur de la page (ce qui équivaut à le fixer à 0px du bord gauche et du bord droite)
• navigation à gauche fixé à 50px du haut, 25px du bas, 0px de la gauche, et de 232 px fixes de largeur
• contenu à droite, fixé lui aussi à 50px du haut, 25px du bas, 235px de la gauche, et 0px de la droite. Ce qui rend sa taille variable.
• pied de page en bas, de 25px de haut, largeur 100% de la page.