Vous ne voulez pas des deux bandes verticales qui sont de chaques côtés de votre blog (comme le mien) mais vous voulez que votre blog couvre toute la surface de l'écran du lecteur ?
OK ! Faisons ça.
Il vous faut tout d'abord personnaliser votre css, puisque c'est lui qui gère l'apparence de votre blog.
Pour cela, je vous propose de lire
cet article.
Pour les personnes qui ont personnalisé le thème d'Over-Blog, il faut bien lire jusqu'au bout afin d'aller sur l'article de Cln qui permet de récupérer le css de sa personnalisation du thème.
Dans votre css, vous allez trouver ces lignes (exemple du modèle Japan à trois colonnes) :
body, html {padding: 0px; margin: 0px;}
#global {padding: 0px; margin: 0px auto; width: 950px;}
.ln {clear:both;}
.cl {float:left;}
/* modele */
#cl_0_0 {margin:0 0 15px 0; padding:0px; width:100%;}
#cl_1_0 {margin:0; width:180px;}
#cl_1_2 {margin:0; width:300px;}
#cl_1_1 {margin:0 10px 0 10px; width:440px; padding:5px;}
#cl_2_0 {width:100%; margin:15px 0 0 0;}
.box {width:100%; overflow:hidden;}
Faisons une lecture de certaines lignes.
#global {padding: 0px; margin: 0px auto; width: 950px;}
La largeur utile de votre blog fait 950 pixels de large, les marges sont soit nulles, soit automatiques pour que le blog soit centré.
#cl_1_0 {margin:0; width:180px;}
#cl_1_2 {margin:0; width:300px;}
#cl_1_1 {margin:0 10px 0 10px; width:440px; padding:5px;}
La première colonne n'a pas de marge et une largeur de 180 pixels.
La troisième colonne (ligne non présente si vous n'avez que deux colonnes) n'a pas de marge et une largeur de 300 pixels.
La seconde colonne a des marges variées et une largeur de 440 pixels.
Petit calcul : 180px + 300px + 440px + (2x5px) = 930px
(colonne 1 + colonne 3 + colonne 2 + marges droite et gauche de la colonne 2 =< largeur utile)
C'est inférieur ou égal à 950 donc toutes les colonnes logent en largeur.
C'est sur ces lignes qu'il faut agir.
Il faut transformer une largeur fixe en largeur variable pour qu'elle s'adapte à tous les écrans de tous les visiteurs.
La solution la plus simple est de tout transformer en pourcentages.
Je reprends le même exemple transformé :
body, html {padding: 0px; margin: 0px;}
#global {padding: 0px; margin: 0px auto; width: 100%;}
.ln {clear:both;}
.cl {float:left;}
/* modele */
#cl_0_0 {margin:0 0 15px 0; padding:0px; width:100%;}
#cl_1_0 {margin:0; width:18%;}
#cl_1_2 {margin:0; width:18%;}
#cl_1_1 {margin:0 1% 0 1%; width:60%; padding:1%;}
#cl_2_0 {width:100%; margin:15px 0 0 0;}
.box {width:100%; overflow:hidden;}
Je refais le petit calcul :
18% + 18% + 60% + (2x1%) = 100%
Le compte est bon.
Vous pouvez choisir d'autres nombres, bien sûr, le but du jeux est d'arriver à 100% au plus.
Vous pouvez aussi mélanger les pourcentages et les pixels pour conserver une largeur de 300 pixels à une colonne contenant de la pub.
Merci à Bakémono dont j'ai repris l'essence de l'article et les images.
Derniers Commentaires