[Résolu] Deux listes contenant des thumbnails qui s'emboîtent

Bonjour à vous,

Je viens de créer deux listes l'une à la suite de l'autre. Techniquement, chacune des listes affiche des thumbnails les uns à côté des autres. Mais voilà : le float:left du dernier élément de la liste fait afficher la liste suivante... à côté.



Je colle le code incriminé. Désolé pour les attributs STYLE : l'intégration des éléments dans un CSS externe est la prochaine étape.

<h4>Salles de bains</h4>
<ul style="margin: 0; padding: 0; list-style-type: none; display: block; width: 100%;">
	<li style="float: left; padding-right: 10px;"><a href="realisations/salle-bains-1-v.asp" style="display: block; background: url(realisations/bg-tb.gif) no-repeat top left; height: 236px; width: 236px;"><img src="realisations/tb-salle-bains-1-v.jpg" alt="" width="150" height="200" style="margin: 18px; margin-left: 43px; border: 0px none white;" /></a></li>
	<li style="float: left; padding-right: 10px;"><a href="realisations/salle-bains-2-v.asp" style="display: block; background: url(realisations/bg-tb.gif) no-repeat top left; height: 236px; width: 236px;"><img src="realisations/tb-salle-bains-2-v.jpg" alt="" width="150" height="200" style="margin: 18px; margin-left: 43px; border: 0px none white;" /></a></li>
	<li style="float: left; padding-right: 10px;"><a href="realisations/salle-bains-3-h.asp" style="display: block; background: url(realisations/bg-tb.gif) no-repeat top left; height: 236px; width: 236px;"><img src="realisations/tb-salle-bains-3-h.jpg" alt="" width="200" height="150" style="margin: 18px; margin-top: 43px; border: 0px none white;" /></a></li>
	<li style="float: left; padding-right: 10px;"><a href="realisations/salle-bains-4-v.asp" style="display: block; background: url(realisations/bg-tb.gif) no-repeat top left; height: 236px; width: 236px;"><img src="realisations/tb-salle-bains-4-v.jpg" alt="" width="150" height="200" style="margin: 18px; margin-left: 43px; border: 0px none white;" /></a></li>
	<li style="float: left; padding-right: 10px;"><a href="realisations/salle-bains-5-v.asp" style="display: block; background: url(realisations/bg-tb.gif) no-repeat top left; height: 236px; width: 236px;"><img src="realisations/tb-salle-bains-5-v.jpg" alt="" width="150" height="200" style="margin: 18px; margin-left: 43px; border: 0px none white;" /></a></li>
</ul>
<h4>Chambres d'enfant</h4>
<ul style="margin: 0; padding: 0; list-style-type: none; display: block; width: 100%;">
	<li style="float: left; padding-right: 10px;"><a href="realisations/chambre-bebe-1-h.asp" style="display: block; background: url(realisations/bg-tb.gif) no-repeat top left; height: 236px; width: 236px;"><img src="realisations/tb-chambre-bebe-1-h.jpg" alt="" width="200" height="150" style="margin: 18px; margin-top: 43px; border: 0px none white;" /></a></li>
	<li style="float: left; padding-right: 10px;"><a href="realisations/chambre-bebe-2-h.asp" style="display: block; background: url(realisations/bg-tb.gif) no-repeat top left; height: 236px; width: 236px;"><img src="realisations/tb-chambre-bebe-2-h.jpg" alt="" width="200" height="150" style="margin: 18px; margin-top: 43px; border: 0px none white;" /></a></li>
	<li style="float: left; padding-right: 10px;"><a href="realisations/chambre-bebe-3-h.asp" style="display: block; background: url(realisations/bg-tb.gif) no-repeat top left; height: 236px; width: 236px;"><img src="realisations/tb-chambre-bebe-3-h.jpg" alt="" width="200" height="150" style="margin: 18px; margin-top: 43px; border: 0px none white;" /></a></li>
	<li style="float: left; padding-right: 10px;"><a href="realisations/chambre-bebe-1-h.asp" style="display: block; background: url(realisations/bg-tb.gif) no-repeat top left; height: 236px; width: 236px;"><img src="realisations/tb-chambre-bebe-1-h.jpg" alt="" width="200" height="150" style="margin: 18px; margin-top: 43px; border: 0px none white;" /></a></li>
	<li style="float: left; padding-right: 10px;"><a href="realisations/chambre-bebe-2-h.asp" style="display: block; background: url(realisations/bg-tb.gif) no-repeat top left; height: 236px; width: 236px;"><img src="realisations/tb-chambre-bebe-2-h.jpg" alt="" width="200" height="150" style="margin: 18px; margin-top: 43px; border: 0px none white;" /></a></li>
	<li style="float: left; padding-right: 10px;"><a href="realisations/chambre-bebe-3-h.asp" style="display: block; background: url(realisations/bg-tb.gif) no-repeat top left; height: 236px; width: 236px;"><img src="realisations/tb-chambre-bebe-3-h.jpg" alt="" width="200" height="150" style="margin: 18px; margin-top: 43px; border: 0px none white;" /></a></li>
</ul>

Modifié par Adrenalys (08 Jun 2006 - 03:06)

Bonsoir et bienvenue au club

<ul style="margin: 0; padding: 0; list-style-type: none; display: block; width: 100%;">

display: block est inutile puisqu'un <ul> est déja une balise de type block. Quant au width: 100% je suis pas sûre que ça soit necessaire.

Pour ton problème une des solutions possibles consiste à àjouter la propriété clear (degagement) qui permet d'éviter d'avoir des éléments flottant à sa gauche, sa droite ou les 2 à la fois (clear:both).
L'élément auquel est attribuée cette propriété sera alors repoussé vers le bas jusqu'à ce qu'il apparaisse sous l'élément flottant.

Donc dans ton cas:

<h4 style="clear:left">Chambres d'enfant</h4>

Modifié par Hermann (08 Jun 2006 - 02:21)