28173 sujets

CSS et mise en forme, CSS3

[Résolu] Plusieurs images sur une même ligne

Bonjour



J'essaie d'afficher une suite d'images sur une même ligne dans un div, sachant que quand la largeur de la suite d'image dépasse l'espace disponible (soit bordure de la fenêtre ou définition d'un 'width') il faut afficher tout ce qu'on peut et s'arrêter là (si besoin en milieu d'image)


Mon code de base est le suivant

<div  id="contenu">
   <span><img src="01.gif" alt="image01"/></span>
   <span><img src="02.gif" alt="image02"/></span>
   <span><img src="03.gif" alt="image03"/></span>
   <span><img src="04.gif" alt="image04"/></span>
</div>


ce qui affiche les trois premières images sur la première ligne et la 4ème images sur la 2ème ligne

j'ai essayé de jouer sur la largeur, de me passer des span pour mettre les images, d'utiliser l'overflow et de fouiller les forums mais rien n'y fait

quelqu'un aurait il une solution ?
Modifié par Archiloque (05 Dec 2006 - 20:55)
Salut.

Il faut fixer les dimensions du div, et utiliser overflow: hidden; pour cacher les morceaux d'image qui dépassent.

Les <span> sont a priori inutiles.
Sopo a écrit :
Salut.

Il faut fixer les dimensions du div, et utiliser overflow: hidden; pour cacher les morceaux d'image qui dépassent.

Les <span> sont a priori inutiles.


J'ai essayé de définir des largeurs, par exemple

#contenu {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 400px;
    overflow: hidden;
}


mais le comportement est toujours le même
Sopo a écrit :
Les dimensions, ça comprend aussi la hauteur Smiley cligne


bien tenté mais 

#contenu {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 607px;
    height: 300px;
    overflow: hidden;
}


ne change rien, à moins que tu parles d'autre chose

pour info le probleme apparaît sur firefox, safari et opera (ie pas essayé)
À priori, fixer le largeur et passer en overflow: hidden ne suffit pas. Cacher le contenu qui dépasse, fort bien. Mais le fait de fixer une largeur n'obligera pas le contenu à ne pas passer à la ligne comme un grand lorsque on arrive vers le bord de droite.

Imaginez la même chose avec du texte, par exemple. Le texte ne restera pas sur la même ligne comme par magie.

Il me semble qu'il faut créer un sous-conteneur qui aura une largeur fixe plus importante que celle du conteneur principal, et mettre le conteneur principal en overflow: hidden.

HTML :
<div  id="conteneur">
	<div id="sous-conteneur">
		<img src="01.gif" alt="image01"/>
		<span><img src="02.gif" alt="image02"/>
		<img src="03.gif" alt="image03"/>
		<img src="04.gif" alt="image04"/>
	</div>
</div>

CSS :
div#conteneur {
	width: 500px;
	overflow: hidden;
}
div#sous-conteneur {
	width: 1000px;
}

Cela dit, je dis ça de tête et sans garantie de résultat. Smiley cligne

Autre chose : explorer aussi les possibilités avec un white-space: nowrap (sur un sous-conteneur dont la largeur n'est pas fixe ?). Comme il n'est pas supporté par IE6 (et IE7 ?), il faudra peut-être utiliser un white-space: pre (ou un élément pre), avec le code des images sur une seule ligne...
Modifié par mpop (02 Dec 2006 - 16:04)
Avec l'élément <pre> on s'en sort assez facilement :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
		<!--
		body {
			width: 700px;
			margin: 0 auto;
			}
		pre {
			overflow: hidden;	
			}
		pre img {
			border: 1px solid #666;
			}
		-->
		</style>
	</head>
	<body>
		<pre>
			<img src="soleil.jpg" alt="" width="300" height="300" /> <img src="soleil.jpg" alt="" width="300" height="300" /> <img src="soleil.jpg" alt="" width="300" height="300" /> <img src="soleil.jpg" alt="" width="300" height="300" /> <img src="soleil.jpg" alt="" width="300" height="300" />
		</pre>
	</body>
</html>
Le code que j'ai proposé fonctionne, mais n'est pas valide. <pre> ne peut pas contenir d'images, en principe Smiley ohwell
Sujet clos
Aller à