largeur éléments template blogger

obtenir ces boutons

Largeur des éléments d'un blog

Largeurs maximales des images

Pour définir la largeur d'un élément d'un blog, on a recours à l'instruction "width".

Rappel : un lexique des principaux éléments constituant le blog, qui sont répertoriés dans la partie "mise en page" ("CSS") du "modèle" (template) de blog, figure ici.

L'instruction "width" indique la largeur en px (pixels) ou en pourcentage (%) de la largeur disponible.

Exemples :
width: 800px;
width: 33%;

"Width" est un des premiers éléments à corriger pour améliorer un blog. On a en effet souvent d'abord envie d'élargir les colonnes. Il faut cependant tenir compte du fait que la largeur (width) de la page se trouve dans "#outer-wrapper" ou "body". Elle doit être égale ou supérieure aux largeurs additionnées des messages (main), de la barre latérale (sidebar) et des espaces à gauche et à droite de ces éléments. Sans cela, la colonne de droite n'a pas assez de place et se retrouve en bas à gauche.

* * * * *
Une option intéressante est de définir une largeur maximale pour toutes les images insérées dans les messages du blog. Cela peut être obtenu en ajoutant dans le code CSS du modèle (template) l'instruction suivante ("400" doit être adapté) :

.post img {max-width:400px;}

De la même manière, on pourrait fixer une taille minimale pour les images avec l'instruction qui suit, mais l'image rique d'être brouillée si la résolution des images est trop faible :

.post img {min-width:400px;}

À consulter : Agrandir les images.

On peut ajouter l'instruction suivante dans la version HTML d'un seul message pour que la taille minimale ne concerne que les images de ce seul message :

<style type="text/css">.post img {min-width:400px;}</style>

* * * * *
Pour élargir facilement les colonnes (messages et colonne latérale) des "modèles" (template) classiques de Blogger, consulter cette page.

Aucun commentaire: