28220 sujets

CSS et mise en forme, CSS3

Afficher des images les unes à côté des autres dans un div

Bonjour,

Je suis en train de créer un site web qui contiendra pas mal d'images. J'aimerais créer un tumbnail dans un div de 150 px de haut. Le problème est que lorsque les images du thumbnail sont nombreuses et dépassent la largeur du div, celles qui dépassent se mettent à la ligne.

Y-a-t-il un attribut css à ajouter au div qui permettrait que les images restent les unes à côté des autres. J'ai déjà une fonction qui me permet de scoller horizontalement et de faire apparaître ce qui dépasse du div.

Merci de votre aide

Jimo
Salut, Jimo..


J'ai pas tout compris, alors un petit exemple de code en ligne serait le bien venu.

Sinon dans le genre cours sur les thumbnails CSS, je te conseil le bouquin de Erix Meyer présenté en haut de ce forum. Y'a un exercise qui traite exactement de ce sujet.

bon courage.
hello,

En fait j'ai pas encore mis le site en ligne.

Voilà le css associé au div concerné:

#thumbnail{
        
        background-color:#CF985D;
        position:absolute;
	width:750px;
        height:150px;
        padding-left:5px;
        padding-top:5px;
        margin-top:580px;
	margin-left:200px;
	border-style:dotted;
        border-width:1px;
        border-color:#ffffff;
        float:right;
	overflow:hidden;
		}


Les images que je veux faire figurer ne font pas plus de 140px de haut, mais lorsque j'en affiche plus de 8, la 9e s'affiche en dessous des 8 premières et non pas à droite. Mon désir est qu'elles continuent de s'afficher à droite, même si dans un premier temps elles sont invisibles. Je trouve pas d'attribut css adéquat. Est-ce que c'est déjà plus clair?

Merci d'avance

Jimo
Modifié par Jimo (05 Sep 2005 - 15:47)
Une chose importante pour les lecteurs du site serait de mettre ton exemple de code entre deux baise [code ] [/code ] sans les espaces.

Edite ton message avec le bouton editer en haut à droite de ton post, pendant que je cherche Smiley cligne

merci
je t'avoue ne jamais avoir expérimenter les overflow et autre réjouissance de ce genre...


honte à moi.

Sinon je t'assure que le bouquin sus-nommé traite exactement de çà de manière très intelligente dans un exercice.

Désolé de ne pouvoir reproduire le contenu ici (ou ailleurs Smiley cligne ) C'est sous copyright et nous n'avons pas la moindre autorisation pour le faire.
Oh, allez... un petit coup d'oeil au bon chapitre... On dira rien... et ça donnera envie de l'acheter...
arf... n'étant pas responsable du contenu ici, je ne me permetterai pas de publier une ligne du lirvre.

Smiley decu

çà tiens sur ue quinzaines de pages... l'idée est de présenter les images sous forme de planches contacts avec un nombre non définit d'image en largeur comme en hauteur, le contenu s'adaptant automatiquement à la page.

avec un habillage style dispositives en hauteur ou en largeur.

parfait pour se rendre compte de quoi est capable CSS. (on n'y resiste pas Smiley smile )
Modifié par ernstein (05 Sep 2005 - 16:47)
Bon.. bon..

en attendant de lire le livre, il y a toujours moyen d'utiliser une table avec une seule ligne et autant de cellules que d'image.
Modifié par GeorgesM (05 Sep 2005 - 17:03)
Merci de votre aide...je vais 1.essayer de trouver ce livre en bibliothèque
2. Tester la solution des tables et cellules

Mais tout cela demain car je suis mort.

Je suis toutefois ouvert à d'autres propositions.....


Merci pour tout

Jimo
Bonjour,

Au vu code cité ci-dessus, choisir entre positionnement absolu et flottant sera déjà la première étape indispensable : une boîte CSS ne peut pas être les deux à la fois.

Revoir ensuite le calcul des largeurs cumulées d'images.
Modifié par Laurent Denis (05 Sep 2005 - 17:37)
Pour avoir essayé de traiter çà en tableau une fois je t'assure que le fais de pouvoir utiliser CSS pour présenter les images est un vrai bonheur.

Car je suppose que ton application est dynamique, ce qui signifie que tu ne connais pas le nombre d'images ainsi que l'orientation des images , ect..... ou en tout cas cela peut évoluer à chaque requête...

Donc il va falloir faire des boucles de coyote ici est la avec pas mal de test..

donc ce n'est pas infaisable en tableau loin de moi cette idée, mais c'est lourd.....

alors qu'avec CSS çà virevolte de partout un vrai bonheur. Smiley cligne

tu affiche cela dans un div ensuite du affiche une liste de description afin de présenter les données de nom d'image, poids, copyright, ect... tu style le tout en flottant comme çà chaque image flotte en rapport à la précédente...
Je vais essayer en css alors, mais je manque quelque peu d'expérience dans le domaine...si tu avais un exemple de code, ernstein, bon pas tiré du livre de Meyer Smiley cligne , ca m'illuminerait....

Merci encore

Jimo
Bonjour,

Si j'ai bien compris, tu veux faire une "barre" d'images. Voilà comment je pense qu'on peut faire:
- tu crées un div conteneur, qui lui aurra la propriété overflow:hidden, avec une largeur fixe.
- dans ce div, tu mets tes images (classe thumbnail par exemple), qui ont comme propriété principale float:left

Code CSS:
#conteneur{
margin:0;
padding:0;
width:750px;  /*par exemple*/
height:180px;
overflow:hidden;
/*il faudra aussi régler son positionnement par rapport aux autres éléments*/
}

.thumbnail{
margin:0;
padding:0;
float:left;
}


Code HTML:
<div id="conteneur>
<img class="thumbnail" ... blah blah blah />
<img class="thumbnail" ... blah blah blah />
...
</div>


Si tu veux voir un exemple, c'est grosso-modo ce que j'ai fait ici

A ce propos, j'ai toujours pas réglé mon problème avec IE MAC

+

(Attention je ne suis pas pro du CSS, alors j'espère pas dire trop de bêtises.)
Modifié par Orlondow (06 Sep 2005 - 10:22)
Hello! ben en fait orlondow, j'ai essayé ta solution, mais ca ne change rien...je vais essayer de potasser le fameux livre de css et peut-etre que l'illumination apparaitra

bonne journée

Jimo
Bonjour,

j'ai poursuivi mes explorations et je crois avoir trouvé une solution dont je posterai le code dès qu'il sera réellement au point....

Pour améliorer encore ma page, il me manque encore une fonction. Voilà ma question: Est-il possible de faire varier l'attribut width (que je définis dans une feuille css externe) d'un <div> en fonction du contenu qui s'y affichera.

Merci de votre aide et bonne journée à tous

Jimo
Sujet clos
Aller à