11 novembre 2009

Changer la position de la colonne de menu (1)

Voici la procédure à suivre pour changer la position de la colonne de menu par rapport à la colonne des articles. On ne modifie que la feuille de style sans rien modifier à la page HTML.

Premier cas : la colonne se trouve à droite et vous voulez qu'elle soit à gauche.

1- Vérifiez que la propriété "float"  dans les définitions de "content" et "rightbar" a bien pour valeur "left".

2- Ajoutez à "rightbar" la propriété margin-left. Donnez-lui une valeur égale à la largeur de "container" ("width"). Ajoutez le signe "moins" devant car cette valeur doit être négative.

3- Ajoutez à "content" la propriété margin-left et donnez-lui une valeur égale à la largeur de "rightbar" ("width") augmentée éventuellement de l'espace qui séparait les deux colonnes.

exemple (modèle city) :
Avant modification :

#container {
          width: 900px;
          padding: 0px;
          margin: 0 auto;
}
#content {
          float: left;
          width: 678px;
          overflow: hidden;
}
#rightbar {
          float: right;
          width: 220px;
          overflow: hidden;
          border: solid 1px #304D91;
}

Après modification :

#container {
          width: 900px;
          padding: 0px;
          margin: 0 auto;
}
#content {
          float: left;
          width: 678px;
          overflow: hidden;
          margin-left: 220px;
}
#rightbar {
          float: left;
          width: 220px;
          overflow: hidden;
          border: solid 1px #304D91;
          margin-left: -900px;
}

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