[RESOLU] CSS afficher des thumbs en lignes et colonnes

11 avr. 2011, 19:52

Bonjour,

Je ne suis absolument pas un pro du CSS. Je souhaite afficher des thumbs dans un DIV de cette manière :

<div id="thumbs">
 <ul class="ulThumbs">
   <li><a href="..."><img src="lathumb1" alt="" class="mini"></a></li>
   <li><a href="..."><img src="lathumb2" alt="" class="mini"></a></li>
   <li><a href="..."><img src="lathumb3" alt="" class="mini"></a></li>
   <li><a href="..."><img src="lathumb4" alt="" class="mini"></a></li>
   <li><a href="..."><img src="lathumb5" alt="" class="mini"></a></li>
   <li><a href="..."><img src="lathumb6" alt="" class="mini"></a></li>
   ...
 </ul>
</div>

#thumbs { width: 750px; margin: 0; padding: 0; }
ul.ulThumbs { width: 750px; list-style: none; }
ul.ulThumbs li { display: inline; width: 150px; float: left; }

J'ai trente thumbs à afficher, soit 5 en horizontal et 6 en vertical.
Mon code m'affiche les trente thumbs en vertical uniquement, et à gauche.

Un peu d'aide serait la bienvenue.
Merci.

12 avr. 2011, 11:15

Bonjour.

1. Je viens de tester ton code, ça me donne bien ce que tu attends (sous FF 2)
Tu as testé sous quel navigateur ? Il y a certainement autre chose qui modifie le comportement de ta liste...

2. Pour tester le CSS, un truc de base, c'est d'utiliser des couleurs de fond, ça donne une première idée du problème.

Code : Tout sélectionner

#thumbs { width: 750px; margin: 0; padding: 0; background-color:green}
ul.ulThumbs { width: 750px; list-style: none; background-color:red}
ul.ulThumbs li { display: inline; width: 140px; float: left; background-color:blue}

3. Ton DIV, il sert à quoi ?
Parce que là comme ça, il semble faire doublon avec le UL...

12 avr. 2011, 16:07

Oui effectivement, problème avec mon DIV ! Soucis résolu, merci à toi

[RESOLU] CSS afficher des thumbs en lignes et colonnes

Qui est en ligne