CSS d'Over-Blog : modifier les largeurs du blog et/ou des colonnes

Avec l’article précédent : Le CSS d'Over-Blog et ses héritages, nous avons vu la structure générale d’un blog.

Ainsi, nous savons qu’un blog se compose de lignes horizontales et de colonnes verticales.

Pour modifier la largeur globale de votre blog, il faut d’abord modifier l’ensemble de tout ces éléments, et pour cela il suffit de modifier : #global

Pour modifier la largeur des colonnes, il nous suffit alors de modifier les éléments correspondants dans le CSS.

Quel est votre blog ?  
Pour choisir la mise en page de votre blog, vous pouvez aller sur "configurer" et "mise en page". Préférez le mode "avancés".

Un blog avec trois colonnes avec la colonne principale au centre ? (modèle A)

Un blog avec une seule colonne ? (modèle B)

Un blog à deux colonnes avec la colonne principale à droite ? (modèle C)

Un blog à deux colonnes avec la colonne principale à gauche ? (modèle D)

Le blog avec une structure comme le modèle A comprend une entête une colonne d'articles (#cl_1_1), une colonne à gauche (#cl_1_0) et une colonne à droite (#cl_1_2), et un pied de page.

Ensuite, si vous souhaitez modifier les dimensions des colonnes, il vous suffit d’utiliser les éléments suivants :

Modèle A :

   #cl_1_0 (la colonne de gauche)

   #cl_1_1 (la colonne centrale)

   #cl_1_2 (la colonne de droite)

Modèle B :

 #cl_1_0 (une seule colonne)

Modèle C :

 #cl_1_0 (colonne de gauche)

 #cl_1_1 (la colonne principale)

Modèle D :

 #cl_1_0 (la colonne principale)

 #cl_1_1 (la colonne droite)

Maintenant la question est : comment indiquer une dimension dans le CSS ?

Il y a deux possibilités : les pixels et les pourcentages

Par exemple :

#global {width: 800px ;}   

Ce qui signifie que le blog aura une largeur de 800px et que si la résolution d’écran de ses visiteurs est plus large (ce qui est fort possible), son fond (background) sera visible sur les côtés.

#global {width: 80% ;}

Ce qui signifie que le blog affichera une largeur de 80% de la taille d’affichage du navigateur quelque soit sa résolution d’écran et aura un fond (background) visible à 10% de chaque côté.

Pour modifier les largeurs des colonnes, voici le code à modifier dans le CSS :

#global {width: Xpx;} ou    #global {width: X%;} 

#cl_0_0 {width:Xpx;}  ou    #cl_0_0 {width:X%;}

#cl_1_0 {width:Xpx;}  ou    #cl_1_0 {width:X%;}

#cl_1_1 {width:Xpx;}  ou    #cl_1_1 {width:X%;}

#cl_1_2 {width:Xpx;}  ou    #cl_1_2 {width:X%;}

#cl_2_0 {width:Xpx;}  ou    #cl_2_0 {width:X%;}