Archive Version 1.94 Over-Blog Trucs en vrac : un overblog pour les nuls

Passer ses colonnes de modules du même côté

Par défaut, sur les modèles de type 2XX, pour la structure contenant 3 colonnes, la colonne principale est encadrée par les 2 colonnes de modules .
La colonne principale est positionnée à gauche avec une colonne à sa gauche et une à sa droite:

/*~~~~~~~~~~ structure 1colonne à droite + 1 colonne principale + 1 colonne à gauche~~~~~~~~~~*/
#troisCol #main {position:relative; float:left; overflow:hidden; width:400px; margin-left:5px;}
/*colonne principale*/
#troisCol #rightnav {position:relative; float:right; margin-bottom:5px; width:195px;}
/*colonne de droite*/
#troisCol #leftnav {position:relative; float:left; margin-bottom:5px; width:195px;}
/*colonne de gauche*/

Il est bien-sûr possible de passer les 2 colonnes de modules du même côté de la colonne princiale. Il suffit pour cela de modifier les positions relatives des colonnes

Exemple pour une colonne principale à gauche et les 2 colonnes de modules à droite:

/*~~~~~~~~~~ structure 1colonne à droite + 1 colonne principale + 1 colonne à gauche~~~~~~~~~~*/
#troisCol #main {position:relative; float:left; overflow:hidden; width:400px; margin-left:5px;}
/*colonne principale*/
#troisCol #rightnav {position:relative; float:right; margin-bottom:5px; width:195px;}
/*colonne de droite*/
#troisCol #leftnav {position:relative; float:right margin-bottom:5px; width:195px;}
/*colonne de gauche*/

Exemple pour une colonne principale à droite et les 2 colonnes de modules à gauche:

/*~~~~~~~~~~ structure 1colonne à droite + 1 colonne principale + 1 colonne à gauche~~~~~~~~~~*/
#troisCol #main {position:relative; float:lright; overflow:hidden; width:400px; margin-left:5px;}
/*colonne principale*/
#troisCol #rightnav {position:relative; float:left; margin-bottom:5px; width:195px;}
/*colonne de droite*/
#troisCol #leftnav {position:relative; float:left; margin-bottom:5px; width:195px;}
/*colonne de gauche*/

publié dans : Archive Version 1.94 Over-Blog
ajouter un commentaire commentaires (7)

Rendre un modèle de Design 2XX élastique

Les modèles de Design de type 1XX (N°^s 101, 102, 103, 104, 105 ) s'adaptent à la largeur de l'écran du visiteur tandis que les modèles de type 2XX ont par défaut une largeur fixe (de 800px).

Or, il est possible de rendre ces modèles élastiques.
Il suffit pour cela de modifier la partie Structure du CSS qui se présente typiquement ainsi:

#global {width:800px;}
/*definie la taille du blog*/
/*~~~~~~~~~~ structure 1 colonne principale + 1 colonne à droite~~~~~~~~~~*/
#deuxColDroite #main {position:relative; float:left; overflow:hidden; width:595px;}
/*colonne principale*/
#deuxColDroite #rightnav {position:relative; float:right; margin-bottom:5px; width:195px;}
/*colonne de droite*/
/*~~~~~~~~~~ structure 1 colonne principale + 1 colonne à gauche~~~~~~~~~~*/
#deuxColGauche #main {position:relative; float:right; overflow:hidden; width:595px;}
/*colonne principale*/
#deuxColGauche #leftnav {position:relative; float:left; margin-bottom:5px; width:195px;}
/*colonne de gauche*/
/*~~~~~~~~~~ structure 1colonne à droite + 1 colonne principale + 1 colonne à gauche~~~~~~~~~~*/
#troisCol #main {position:relative; float:left; overflow:hidden; width:400px; margin-left:5px;}
/*colonne principale*/
#troisCol #rightnav {position:relative; float:right; margin-bottom:5px; width:195px;}
/*colonne de droite*/
#troisCol #leftnav {position:relative; float:left; margin-bottom:5px; width:195px;}
/*colonne de gauche*/

Il suffit de remplacer les valeurs fixes en pixels par des valeurs relatives (en pourcentage de la largeur de l'écran). Par exemple :

#global {width:80%;}
/*definie la taille du blog*/
/*~~~~~~~~~~ structure 1 colonne principale + 1 colonne à droite~~~~~~~~~~*/
#deuxColDroite #main {position:relative; float:left; overflow:hidden; width:74%;}
/*colonne principale*/
#deuxColDroite #rightnav {position:relative; float:right; margin-bottom:5px; width:24%;}
/*colonne de droite*/
/*~~~~~~~~~~ structure 1 colonne principale + 1 colonne à gauche~~~~~~~~~~*/
#deuxColGauche #main {position:relative; float:right; overflow:hidden; width:74%;}
/*colonne principale*/
#deuxColGauche #leftnav {position:relative; float:left; margin-bottom:5px; width:24%;}
/*colonne de gauche*/
/*~~~~~~~~~~ structure 1colonne à droite + 1 colonne principale + 1 colonne à gauche~~~~~~~~~~*/
#troisCol #main {position:relative; float:left; overflow:hidden; width:50%; margin-left:5px;}
/*colonne principale*/
#troisCol #rightnav {position:relative; float:right; margin-bottom:5px; width:24%;}
/*colonne de droite*/
#troisCol #leftnav {position:relative; float:left; margin-bottom:5px; width:24%;}
/*colonne de gauche*/

Bien-sur, les rapports entre les largeurs de colonne sont à personnaliser (si les colonnes de modules passent sous la colonne principale, vérifier que la somme des largeurs des colonnes ne dépasse pas la largeur totale du blog).

publié dans : Archive Version 1.94 Over-Blog
ajouter un commentaire commentaires (13)

Passer ses colonnes de modules du même côté

Rendre un modèle de Design 2XX élastique

Je le dis

des trucs

Remarque

Catégories

Vos remarques

Rechercher

Copinage


Il y a 2 curieux sur ce blog