Largeur des balises <li>

Bonjour,

Voila plus d'une semaine que je rame sur un probleme.

Voila deja un exemple qui me pose probleme :

<div style="border: 1px #143E53 solid; background: #F0F6F9;	width: 100%;">
	<ul style="list-style-type: none; width: 100%;	padding: 0;	margin: 0; border: 1px red solid;">
		<ol style="border: 1px green solid; list-style-type: none; padding: 0; width: 100%;">
			<li style="width: 10%; margin: 0; list-style-type: none; height: 30px; border: 1px blue solid; float: right;">col 1</li>
			<li style="width: 60%; margin: 0; list-style-type: none; height: 30px; border: 1px blue solid; float: right;">col 2</li>
			<li style="width: 30%; margin: 0; list-style-type: none; height: 30px; border: 1px blue solid;">col 3</li>
		</ol>
	</ul>
</div>

Pourquoi mes balises <li> se chevauchent alors que 10 + 60 +30 = 100% ??

Pour mieux comprendre ce que je veut dire ^^ voila l equivalent en html :

<table width="100%" border="1" cellspacing=0 cellpadding="5">
<tr>
<td width="10%">Col 1</td>
<td width="60%">Col 2</td>
<td width="30%">Col 3</td>
</tr>
</table>

Merci par avance
Modifié par Hayreon (10 Oct 2008 - 11:49)

bonjour,

peut être à cause des bordures ? 30+10+60= 100 mais 30+10+60+bordures = + que 100...

Merci

En effet ... les bordures

Par contre, pourquoi je retrouve ce probleme en ajoutant un padding de 5px aux balises <li> ??? padding doit modifier les marges intérieures aux cellules non ? (a l inverse de margin)

Je pense avoir la solution, pouvez vous me dire si c est correcte ?

<div style="border: 1px #143E53 solid; background: #F0F6F9;	width: 100%;">
	<ul style="list-style-type: none; width: 100%;	padding: 0;	margin: 0;">
		<ol style="list-style-type: none; padding: 0; width: 100%;">
			<li style="width: 10%; margin: 0; list-style-type: none; height: 30px; float: right; background:green;"><p style="padding:5px;">col 1</p></li>
			<li style="width: 60%; background: blue;  list-style-type: none; height: 30px; float: right;"><p style="padding:5px;">col 2</p></li>
			<li style="width: 30%; background:purple; list-style-type: none; height: 30px;"><p style="padding:5px;">col 3</p></li>
		</ol>
	</ul>
</div>

Merci

sur IE7 en tout cas ça a tendance à déconner la première case a tendance à se mettre sur la ligne en dessous quand on redimensionne la fenetre, mais pas toujours c'est bizare.

je vais laisser les autres répondre mieux...

En effet, je viens de reussir a faire ce que je veut sous FF mais sous IE il y a un decalage. J'ai ajouter clear: both; aux balise <ol>

Merci pour ton aide ginette_78

Si quelqu un a une idée pour le reste ^^

Merci

Un élément OL enfant de UL? Vous avez pas plus gros comme c... bêtise?

(Toujours valider le code HTML au préalable!)

Et, en passant, cette utilisation massive de width: 100% me semble à la fois inutile et casse-gueule. Inutile, car un élément qui a un rendu de type bloc prendra tout seul toute la largeur disponible dans son conteneur, à moins d'être flottant ou positionné en absolu. Casse-gueule, car des largeurs de 100% auxquelles se rajoutent du padding, des border ou des margin, c'est pas une bonne idée.

Enfin, quel est censé être le contenu de ces colonnes? Faire des colonnes avec des LI, c'est pas banal.
Modifié par Florent V. (10 Oct 2008 - 12:57)