28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Liste et decalage

Bonjour
J'aurais voulu que quelqu'un m'explique pourquoi dans ma 2eme liste le descalage de 50 pixels que j'ai mis ne fonctionne pas.


<style type="text/css">
<!--

#global {
	position:absolute;
	width: 850px; /* -> 3 */
	margin: 0 auto; /* -> 4 */
	margin-left: 80px;
	top: 320px;
}
#global img{
	padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
}
#navigation {
	width: 370px;
	float: left; /* -> 6 */
	margin-left: 10px;
	padding: 10px 30px 20px 5px;
	text-align: justify;
	background-color:#0F0;
}

#contenu {
	margin-left: 10px; /* -> 8 */
	padding: 10px 20px;
	text-align: justify;
	background-color:#630;
}
li {
	margin-left: 50px;
}
-->
</style>
</head>
<body>

      <div id="global">
        
        <div id="navigation" > 
        <p >liste 1</p>
        <ul>
          <li><strong>1er</strong></li>
          <li><strong>2er</strong>. </li>
        </ul>
		</div>
        
        <div id="contenu">
          <p ><strong>liste 2</strong></p>
          <ul>
            <li><strong>1er</strong></li>
            <li><strong>2eme</strong></li>
          </ul>
        </div>
      </div>

Modifié par Nad21 (24 Jun 2009 - 11:00)
Salut,

De manière imagée :
- ta liste1 est floatée, elle sort donc du flux normal et se met donc à "voler" au-dessus du document.
- avec liste1 sortie du flux, liste2, qui comme tous les éléments web subit l'attraction magnétique de l'angle supérieur gauche du document, glisse et se retrouve à occuper la place de liste1 (collée contre le bord gauche de #global). Elle s'affiche donc juste au-dessous de cette dernière. Applique {opacity:0.5} à liste1 et tu verras liste2 passer dessous.
- pour ne pas que liste1 masque liste2, le *contenu* de liste2 est écarté sur la droite, comme par un bon vieux {margin-left: <largeurDeListe1>px;}.

Tout ça pour te dire que, liste2 n'étant pas floatée, son bord gauche n'est pas là où tu le crois (à droite de liste1), mais bien collé au bord gauche de #global. Le margin-left compte donc à partir de là. Solution : floater liste2 également.
Sujet clos
Aller à