08 novembre 2009

Ajouter une colonne aux modèles proposés

Un bon nombre de modèles proposés ici ne comporte que deux colonnes, une pour les articles et une pour le menu. Il est possible d'ajouter une colonne de menu à certains d'entre eux (mais pas à tous !). Voici la marche à suivre.

DANS LA FEUILLE DE STYLE

1- En faisant un copier-coller de la définition d'une colonne ("#leftbar" ou "#rightbar"), ajoutez la définition de la colonne manquante. Si la définition de la colonne manquante figurait déjà remplacez-la par cette nouvelle définition.

exemple (modèle lily) :

On obtient la définition de la barre gauche ("leftbar") en recopiant celle de la barre droite ("rightbar").

#rightbar {
          float: right;
          width: 220px;
          background: url(http://i29.tinypic.com/2pyp46a.jpg);
          overflow: hidden;
          border: solid 1px #000000;
}

#leftbar {
          float: right;
          width: 220px;
          background: url(http://i29.tinypic.com/2pyp46a.jpg);
          overflow: hidden;
          border: solid 1px #000000;
}

2- Modifiez si nécessaire la valeur de la propriété "float" qui force l'objet à se placer à gauche ou à droite dans le "container". Ici, on remplacera "float:right" par "float:left".

3- Comme cette nouvelle colonne prend de la place, il faut diminuer la largeur de la colonne principale contenant les articles ("content"). Ne pas oublier de compter la largeur des bordures s'il y en a.
Ici on aura "width: 454px;" pour "#content".

4- Si l'on désire espacer les colonnes, il faudra ajouter ou modifier la propriété "margin-left" (ou "margin") en lui donnant une valeur en pixels suffisante sans oublier de retrancher d'autant la valeur de "content".

DANS LES PAGES HTML

Pour ajouter une colonne à droite :

1- Recopiez la partie de la page qui commence par :
    <div id="leftbar"><div class="navlinks">
et qui s'arrête juste avant :
    <div id="content"><div class="blogbody">
2- Collez-la entre :
    </div></div>
et :
    <div class="clear">&nbsp;</div>
3- Remplacer :
    <div id="leftbar">
par :
    <div id="rightbar">

Pour ajouter une colonne à gauche :

1- Recopiez la partie de la page qui commence par :
    <div id="rightbar"><div class="navlinks">
et qui s'arrête juste avant :
    <div class="clear">&nbsp;</div>
2- Collez-la entre :
    </div></div>
et :
    <div id="content"><div class="blogbody">
3- Remplacer :
    <div id="rightbar">
par :
    <div id="leftbar">

Il faudra évidemment répartir les sous-menus dans les colonnes de façon à ne pas avoir de doublon.

Posté par Michal53 à 08:20 - - Permalien [#]
Tags : , , , , , , ,