Vignettes à la "file" avec un scroll horizontal...

23 sept. 2007, 23:02

Bonsoir à tous,
Me revoilà comme prévu (je vous jure que je fait pas exprès non plus...),
J'essaye de faire une petite galerie photo très simple, et très classique.
Un "bandeau" de vignettes sur une seule ligne, avec un scroll horizontal si besoin est et en dessous une image agrandie...
Alors voici le code que j'ai utilisé:
css:

Code : Tout sélectionner

#vignettes {
  float: left;
  height: 80px;
  overflow: auto;
}
#vignettes li {
  display: inline;
}

html:

Code : Tout sélectionner

<ul id="vignettes">
  <li><img src='photo1_mini.jpg' /></li>
  <li><img src='photo2_mini.jpg' /></li>
</ul>
<div id="maxi">
  <img src='photo2_maxi.jpg' />
</div>

Le principe marche bien, les vignettes sont bien les unes après les autres, seuelement si il y en à trop, le scroll est vertical et non pas horizontal...
Je ne vois pas trop où est le problème...
Merci d'avance pour vos idées!!

bonne nuit

24 sept. 2007, 09:51

mets tout dans un tableau a une seule ligne et tu vas voir ton scroll horizontal et non vertical

Code : Tout sélectionner

<TABLE border ='0'>
<TR>
<TD>photo 1</TD>
<TD>photo 2</TD>
<TD>photo 3</TD>
<TD>photo 4</TD>
</TR>
</TABLE>

24 sept. 2007, 10:03

Merci pour l'idée, mais je ne souhaite pas abandonner ma liste, puisque mon contenu est bien une liste de vignette, donc je ne vois pas pourquoi j'essayerai de choisir un autre code que celui d'une liste...
Encore désolé, mais je veux que mon code veuille dire quelque chose

Bref je cherche encore.

24 sept. 2007, 10:18

pour info les LI utilisées dans un UL ne sont la que pour mettre en place des puces et n'ont pas vocation a faire des listes comme il semblerait (je peux avoir mal pigé

) que tu le conçoives et les LI ne sont que des listes verticales

tien ce site qui est très bien fait sur les balises : http://laurent-bernat.com/html-balises. ... ap_balises

24 sept. 2007, 10:22

@jojolapine : essaie d'ajouter white-space:nowrap; dans le CSS de tes <ul>, ça devrait marcher.

@Gaap : LI ça veut dire List Item et UL/OL (Un)Ordered List. Ça veut dire qu'il s'agit d'une série (liste) de "trucs", mais tu peux présenter cette liste un peu comme tu le souhaites.

24 sept. 2007, 10:55

OK Hubert Roksor, je ne savais pas et n'avais jamais essayé de les modifier, en les utilisant uniquement pour les puces et je pensais que l'on ne pouvait pas les travailler autrement...

Merci pour cette info je me coucherais moins con ce soir

24 sept. 2007, 12:55

Bonjour,
alors j'ai essayer le nowrap, et ça ne fonctionne pas...
Je vais mettre le tout en ligne tout à l'heure pour que vous voyez mieux ce qui se passe...
Je réédite dès que c'est fait!

24 sept. 2007, 13:43

Euh, t'as dû te gourrer quelque part, parce que j'ai essayé et ça marche d'IE 6 à Firefox 3 chez moi. (pas essayé Safari)

24 sept. 2007, 14:08

Ben j'ai beau regarder, je vois pas où j'ai fait une erreur...
J'ai mis à jour le site de prod: http://leregrave.fr/photos.html
et voici mon code css (le code html n'a pas changé):

Code : Tout sélectionner

#vignettes {
  padding-top: 10px;
  list-style-type: none;
  height: 90px;
  overflow: auto;
  white-space:nowrap;
}
#vignettes li {
margin: 5px;
width:110px;
  float: left;
  display: inline;
  text-align: center;
  background-color: red;
}
#vignettes li img {
  cursor: pointer;
}

Voilou merci encore hubert pour le temps que tu prends...

24 sept. 2007, 15:01

No prob'.

Ce qui pose problème dans ton exemple c'est le float:left dans la définition de #vignettes li. Tu ne peux pas "flotter" et être "inline" à la fois ou un truc du genre. Il existe un attribut display:inline-block qui devrait correspondre à ce que tu recherches, mais il ne marchera pas partout. De plus, IE ne gère pas l'overflow-x si le container n'a pas une largeur fixe. Si tu ne mets pas de largeur fixe sur #vignettes la page s'étirera en largeur sous IE pour accomoder les images.

24 sept. 2007, 16:11

OK en virant le float: left; ça à l'air de le faire à priori (j'ai tester juste avec la barre d'outil webdeveloper de firefox), reste plus qu'a affiner les réglages, pour que les marges et tout le tintouin soient au poil!
Je passe en résolu, j'attend de faire les vrai tests sur plusieurs navigateurs

Vignettes à la "file" avec un scroll horizontal...

Qui est en ligne