Changer la position de la colonne de menu (2)

17 novembre 2009

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

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

2- Ajoutez à "leftbar" la propriété margin-left. Donnez-lui une valeur égale à la largeur de "content" ("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 "container" ("width") diminuée éventuellement de l'espace qui séparait les deux colonnes.

exemple (modèle gothic) :
Avant modification :

#container {
      width: 900px;
      padding: 0px;
      margin: 0px auto;
}
#content {
      float: left;
      width: 680px;
      overflow: hidden;
}
#leftbar {
      float: left;
      width: 220px;
      overflow: hidden;
}

Après modification :

#container {
      width: 900px;
      padding: 0px;
      margin: 0px auto;
}
#content {
      float: left;
      width: 680px;
      overflow: hidden;
      margin-left: -900px;
}
#leftbar {
      float: left;
      width: 220px;
      overflow: hidden;
      margin-left: 680px;
}