28172 sujets

CSS et mise en forme, CSS3

Liste et passage à la colonne suivante

Bonsoir,

Je vous sollicite pour m'aider sur un projet scolaire !
J'utilise une liste pour afficher des images.

  
       
       <ol id="list">
            <li><img src="img.jpg" /></li>
            <li><img src="img.jpg" /></li>
            <li><img src="img.jpg" /></li>
            <li><img src="img.jpg" /></li>
            <li><img src="img.jpg" /></li>
            <li><img src="img.jpg" /></li>
            <li><img src="img.jpg" /></li>
            <li><img src="img.jpg" /></li>
            <li><img src="img.jpg" /></li>
         </ol>



Les images se superposent façon jeu de cartes !



ol {
  border: 2px dashed #ccc;
  margin: 8px;
  padding: 0;
  height: 256px;
}

li {
  list-style: none;
  height: 88px;
  width: 63px;
  cursor: pointer;
  margin-bottom: -64px;
}




Voici le résultat:
upload/34947-alsa.JPG

Les huit premières cartes s'affichent parfaitement dans les 256px du cadre car
(88 * 8) - (64 * 7) = 256 !


Comment faire pour que la 9eme "carte" s'affiche sur la droite des 8 premières et non pas en bas... Est-ce possible en modifiant des propriétés css/html ? Si vous avez une idée, vous me sauvez ! Smiley biggol
Modifié par Emp1 (22 Dec 2010 - 02:00)
Bonjour,

Donnez une classe ou un id au dernier élément de votre liste et positionnez le en CSS comme vous le souhaitez.
Merci beaucoup Smiley smile

Il est donc impossible de gérer ça uniquement en CSS sans toucher au code HTML ?
Par exemple en définissant une hauteur limite à la liste ou je ne sais trop quoi...
Modifié par Emp1 (28 Dec 2010 - 18:05)
Bonjour,

Tu peux gérer une position spécifique du dernier élément en CSS avec le propriété last-child mais attention ce n'est pas compatible avec IE :
Last Child

Par contre cela est uniquement valable si tu as au final seulement 9 cartes. Si c'est "à partir de 9" que tu dois créer une deuxième colonne de cartes, il faudra procéder autrement. Soit en utilisant une boucle php ou javascript qui créée une nouvelle liste html toutes les 8 cartes (tu positionnes ensuite ces listes en float:left).
Modifié par Spacedementia (28 Dec 2010 - 19:26)
Sujet clos
Aller à