Fixe, fluide, élastique
Éclaircissons déjà un point : bien que ces termes ne recouvrent pas tout à fait la même chose, vous entendrez souvent évoquer thème, layout ou design, voire template pour désigner la mise en forme graphique d'un site ou d'un blog. Les utilisateurs de DotClear emploient le plus souvent le mot thème.
Selon leur comportement en fonction de la taille de la fenêtre et/ou des caractères on les dira fixes, fluides ou élastiques.
Fixe
La dimension des blocs est donnée en valeur en pixels. Quels que soient la taille des caractères ou de la fenêtre, cette dimension est intangible. Le thème DotParking v2 en est un exemple. La page mesure 750 pixels en toutes circonstances.
Fluide
La largeur générale de la page s'adapte à la taille de la fenêtre. L'option choisie par son créateur peut-être d'en faire varier tous les éléments ou seulement l'un d'entre eux. Les dimensions sont alors données en pourcentage. Ainsi en est-il de l'ancien thème par défaut de Dotclear 1. Quelle que soit la taille de la fenêtre, la page en occupe toute la largeur. Dans ce thème, c'est la partie des billets qui varie en fonction de la largeur disponible.
Élastique
Ici, toutes les dimensions sont proportionnelles à la taille des caractères. Les dimensions données en em[1] permettent un redimensionnement de la page en fonction de la taille des caractères. Vous pouvez en voir un exemple avec le thème Keldroledenom.
Testez ces différences
Affichez grâce aux liens ci-dessus ces différents types de mise en page et redimensionnez votre fenêtre et/ou la taille des caractères. Là... c'est plus clair maintenant ?
Pour aller plus loin
J'ai volontairement simplifié mes explications. Si le sujet vous intéresse, vous lirez avec profit chez Pompage : Du stretching pour vos sites et chez Alsacréations : Réalisation d'un design complet (XHTML / CSS) en 5 étapes.
Notes
[1] 1 em correspondant à la taille que vous avez choisie dans les préférences de votre navigateur pour l'affichage des caractères. Le plus souvent, cette dimension est réglée à 14px par défaut.
Commentaires
Dans la feuille de style CSS : Je conseille de mettre une taille en "em" dans la redéfinition de la balise body. Ensuite vous appliquez un pourcentage à chaque fois que vous déclarez une nouvelle Class ou ID. Par exemple :
body { font-size:120%; }Par cette méthode votre feuille de style est cohérente et plus simple à modifier par la suite et plus accessible..
Dans la feuille de style CSS : Je conseille de mettre une taille en "em" dans la redéfinition de la balise body. Ensuite vous appliquez un pourcentage à chaque fois que vous déclarez une nouvelle Class ou ID. Par exemple :
body { font-size:1.2em; }.text { font-size:130%; }Par cette méthode votre feuille de style est cohérente et plus simple à modifier par la suite et plus accessible..
L'exemple donné est contradictoire avec la phrase précédente : vous indiquez une font-size en pourcentage dans le body après avoir déclaré qu'il fallait la déclarer en em... Vous vouliez parler d'unités relatives je pense.
Par ailleurs, cela n'a pas grand chose à voir avec ce qui nous occupe ici.
L'exemple donné dans votre premier commentaire, je vois qu'entre-temps vous avez rectifié. Ce qui ne rend pas plus pertinente sa présence ici...
En relisant, je m'aperçois de mes erreurs. Si l'administrateur pouvait supprimer mon commentaire. Merci. :s
j'ai rien à dire, c'est pour essayer...
mmm il me semble que ton clavier a fourché : dans la partie "fixe", tu parles d'une dimension "intangible", ce qui signifie "que l'on ne peut pas saisir, toucher". Je suppose que tu voulais dire "inaltérable" ? (oui je joue ma chieuse, mais en l'occurence c'est pour être sûre de comprendre).
Je ne sais pas ce qui m'a pris ce jour-là, c'est un drôle de choix de mot en effet ! Inaltérable ne convient pas trop non plus, car on voit sur certains blogs que ces layouts peuvent être très altérés ! Je corrigerai, merci beaucoup, je suis assez "chieuse" moi-même à mes heures ;-)
c'est un peu ésoterique pour ma petite tete. Il y a un exemple visualisable quelque part ?
Bonjour,
une faute de frappe relevée au passage :
Quels que soient la taille des caractères ou de la fenêtre,
=> Quelle que soit la taille des caractères ou de la fenêtre,
Une petite précision : « em », au moins en latex, est une unité qui désigne la largeur de la lettre « M » majuscule, dans la police courante ; c'est de là que vient son nom (en latex, il existe aussi « ex », mesure verticale).
Merci à toi Jeremie pour l'info...