17 novembre 2009

Changer la position de la colonne de menu (2)

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;
}

Posté par Michal53 à 09:24 - - Permalien [#]
Tags : , , , , , , ,