28172 sujets

CSS et mise en forme, CSS3

Bonsoir , j'ai une liste dans une div, qui contiennent des liens .
Quand je met un padding ou une marge de gauche aux liens pour les aligner.
Ceci agrandi ma div.


<div id="menu_droite">
   <ul class="session_ouverte">
       <li><a href="">Mon espace</a></li>
       <li><a href="">Mes messages</a></li>
       <li><a href="">Mon profil</a></li>
       <li><a href="">Editer mon profil</a></li>
       <li><a href="">Mes paiements</a></li>
  </ul>
  <ul class="session_fermer">
      <li><a href="">Inscription</a></li>
      <li><a href="">Fonctionnement</a></li>
      <li><a href="">Blog</a></li>
      <li><a href="">Aide</a></li>
      <li><a href="">Nous contacter</a></li>
  </ul>
</div>


#menu_droite{
width:206px;
float:right;
}

#menu_droite li{
list-style : none;
}

#menu_droite .session_ouverte li a{
display:block;
width:206px;
height:29px;
background:url('../image/menu_droite/menu1.gif') left top no-repeat;
text-decoration:none;
font :  12px Verdana, Helvetica, sans-serif;
color : #ee9662;
padding-left:20px;
}

#menu_droite .session_fermer li a{
display:block;
width:206px;
height:29px;
background:url('../image/menu_droite/menu.gif') ;
text-decoration:none;
font :  12px Verdana, Helvetica, sans-serif;
color : #4169e1;
line-height : 29px;
}

Modifié par tiesto95 (21 Mar 2009 - 02:25)
Oui merci effectivement ,j'ai bien compris le tuto en clair.
J'ai maintenant soustrait mon padding a la largeur de son contenu.

width:161px; /*206-45*/
padding-left:45px;


Merci super tuto que je garde dans mes favoris Smiley cligne