Sinon, pour un conteneur global, on peut faire des choses marrantes avec mes
min-width,
width et
max-width, en utilisant des EM, des pourcentages et des pixels.
Avertissements :
1. les largeurs en pourcentages c'est bien, mais si on ne met pas de limite ça peut donner des trucs tout étirés et des lignes de texte de 200 signes (longueur optimale : entre 40 et 70 signes) ;
2. les largeurs en EM c'est bien pour les longueurs de ligne, mais si on agrandit le texte (ou si la taille de texte par défaut configurée par l'utilisateur est importante) tout part en sucette ;
3. avec des largeurs en pixels on prend moins de risques... mais c'est peu adaptable et pas toujours tip top pour l'accessibilité. La solution de facilité, quoi.
Maintenant, si on joue avec tous les outils à notre disposition dans les navigateurs modernes (IE7 compris, mais pas IE6 hélas), on peut faire des choses comme :
1. largeur en EM, mais avec une largeur maximale en pourcentages pour éviter un scroll horizontal
div#global {
width: 50em;
max-width: 90%;
}
Mon préféré, mais hélas difficile à rendre compatible avec IE6... de plus, si on n'arrive pas à émuler le max-width dans IE6, on retrouve le danger d'une largeur fixée en EM.
2. largeurs max et mini en pixels, largeur globale en pourcentages
div#global {
width: 70%;
min-width: 720px;
max-width: 980px;
}
C'est un simple
width: 70%, mais où l'on combat les deux écueils rencontrés habituellement : résultat trop étroit sur un écran en 800x600 (ici avec du 720px on devrait être bon), et résultat trop large sur des très grosses résolutions (plus de 1280px de large).
3. Une petit subtilité pour la route...
div#global {
width: 90%;
max-width: 50em;
}
L'effet sera presque le même que le (1), alors qu'on a inversé les propriétés.
