Scroll et block

Bonjour à tous,
J'essaye de créer un bloc horizontal de 500 px avec un scroll horizontal si le contenu dépasse ces 500 px. Ce contenu est constitué d'images, contenues dans des miniblocs, renvoyées par une requête php/sql.

voici le code CSS :

<!-------mini bloc qui contient une image--->
#blocImage{
display:inline;
float:left;
width:200px;height:200px;
}
 
<!--div qui contient les blocs contenant eux-mêmes les images---------->
#scroll{
width:500px;height:500px;
overflow-x:scroll;overflow-y:hidden;
 }

Mon problème est que je ne déclenche pas le scroll horizontal. Lorsque j'arrive au bout de mon div "scroll" le bloc image suivant va à la ligne...

Grand merci de votre aide.
Modifié par allweb (25 Nov 2008 - 09:09)

Bonjour,

Dans ton code, #blocImage (qui devrait être une classe s'il y en a plusieurs dans ta page) est défini comme flottant (float:left) ce qui signifie qu'ils vont se mettre côte à côte tant qu'il y a de la place puis passer à la ligne quand l'espace nécessaire n'est plus disponible.

Si j'ai bien compris ce que tu souhaites, il faudrait englober les mini blocs dans un conteneur dont la largeur est calculée en fonction du nombre d'images.

Merci de ta réponse Jihel.

En fait je ne maitrise pas le nombre d'images (et donc de miniblocs) car ces dernières sont le résultat d'une requête PHP

Olivier

Je pense que c'est jouable avec la propriété white-space :

white-space: nowrap;

Tu trouveras les détails sur yoyodesign. Tes images devraient être juxtaposées à l'intérieur du conteneur (<p> par ex.) lui même contenu dans #scroll. C'est sur le conteneur que tu appliques la propriété.

Sans succès. Je ne comprends vraiment pas ce qui se passe. En fait tout se passe comme si les largeurs des miniblocs contenant les images n'étaient pas prises en compte...