28172 sujets

CSS et mise en forme, CSS3

[Résolu] Bandeau horizontal sans largeur absolu

Bonjour à tous,
j'essaye désespérément de mettre dans un bandeau avec une scrollbar horizontal une série d'images. Les images sont dans une div "listeimage" qui devrait prendre la largeur de toutes les images. Cette div "listeimage" est dans une div "conteneur" qui elle doit faire une largeur fixe et avoir la scrollbar.
Le nombre d'images et la largeur des images contenu dans "listeimage" est variable ; je ne peux donc pas lui donner une largeur fixe.
Et je ne peux pas mettre tout ça dans un tableau non plus…

Voici les codes :

CSS :

#conteneur {
	overflow: auto;
	width: 800px;	
}
#listeimage {
	width: 4000px;
}
.image {
	float: left;
}



HTML :

<div id="conteneur">
<div id="listeimage">

<div class="image"><img src="images/circleproject01.jpg" width="550" height="413" /></div>
<div class="image"><img src="images/circleproject02.jpg" width="550" height="413" /></div>
<div class="image"><img src="images/circleproject03.jpg" width="550" height="413" /></div>
<div class="image"><img src="images/circleproject04.jpg" width="550" height="413" /></div>
<div class="image"><img src="images/circleproject05.jpg" width="550" height="413" /></div>


</div>
</div>


Si vous avez une idée, merci d'avance !
bonne journée

fschaff
Modifié par fschaff (27 May 2009 - 21:48)
Bonjour,

Si tu connais le nombre d'images (à l'instant T) tu peux calculer la largeur nécessaire à ton div (en PHP).

Je ne sais pas comment tu "ajoutes" tes images dans tes pages, mais si c'est avec un script PHP (ou autre) qui récupère les info d'un DB ou d'un fichier il y a moyen de mettre un compteur en place. Toute dépends de la façon dont est généré ton HTML donc.

ps. : n'oublie pas l'attribut alt pour les images Smiley cligne
Modifié par Laurie-Anne (27 May 2009 - 15:04)
Salut,

Sans renseigner la largeur de #listeimage ça sera impossible. Donc il faut dans tous les cas trouver un moyen d'obtenir cette largeur.

Par exemple, si tu dis que cette liste d'images est variable, cela veut dire que cette liste est générée dynamiquement (en PHP sans doute). Donc (on admet toujours que c'est en PHP) tu peux récupérer avec ce code dynamique le nombre d'images et leur largeur, et en affecter dynamiquement la largeur de ton #listeimage.

Edit : Owned.
Modifié par Agylus (27 May 2009 - 15:05)
Hmm, impossible, impossible... Smiley murf : 
[b]HTML[/b]
<div>
    <img alt="..." src="...">
    <img alt="..." src="...">
    <img alt="..." src="...">
    <img alt="..." src="...">
    <img alt="..." src="...">
    <img alt="..." src="...">
</div>

[b]CSS[/b]
div {
    white-space:nowrap;
    overflow:auto;
    width: ... ;
}
marcv,
ta solution fonctionne si je mets juste les images comme ça mais si je les mets chacune dans une div ça fonctionne plus… y'a un moyen de contourner ça ?

Sinon je vais essayer de récupérer la longueur totale des images pour l'attribuer à ma div listeimage

Merci
fschaff
Salut,

fschaff a écrit :
ta solution fonctionne si je mets juste les images comme ça mais si je les mets chacune dans une div ça fonctionne plus… y'a un moyen de contourner ça ?
Les mettre dans un SPAN ou mettre ces DIV en display:inline par exemple.
Incroyable ! ça marche nickel
merci à tous pour votre aide

je récapitule au cas où ça servirait à qqun :


HTML

<div id="conteneur">
<div id="listeimage">

<div class="image"><img src="…" alt="…" /></div>
<div class="image"><img src="…" alt="…" /></div>
<div class="image"><img src="…" alt="…" /></div>
<div class="image"><img src="…" alt="…" /></div>
<div class="image"><img src="…" alt="…" /></div>


</div>
</div>




CSS

#conteneur {
	overflow: auto;
	width: 800px;	
}
#listeimage {
	white-space:nowrap;
}
.image {
	display: inline;
}
Par curiosité : à quoi ça te sert de mettre un conteneur aux images ? D'ailleurs même si cela est justifié ce serait plus logique d'utiliser SPAN qui est déjà de type 'en-ligne'.

Et sinon la class="image" ne sert à rien puisque tu peux cibler plus simplement en faisant 
#listeimage div {
	display: inline;
}

Modifié par Heyoan (27 May 2009 - 21:59)
Sujet clos
Aller à