Aligner plusieurs images horizontalement sans retour à la ligne ?

Hello,

Je suis en train un site pour un photographe et je veux aligner un paquet d'images horizontalement sans que celles-ci reviennent à la ligne mais qu'elles sortent de la fenêtre.

Pour ça j'ai mis une div dans une autre avec le conteneur en overflow: hidden mais ça se remet à la ligne, à moins que je mette une largeur peu catholique à la div à l'intérieur ce qui n'est pas très propre.

A part le tableau je vois pas, vous avez une idée ?

Mon code :

HTML

<section id="photos">
		<div id="photos-container">
			<ul>
				<?php for($i = 0; $i< 7; $i++): ?>
				<li><img src="/assets/photos/news/<?php echo $i; ?>.jpg" alt=""></li>
				<?php endfor; ?>
			</ul>
		</div>
	</section>

CSS

#photos{
	position:relative;
	overflow: hidden;
}

#photos-container{
	position:relative;
	width: 100000px;
}

#photos li{
	display: inline;
	margin-right: 20px;
}

Merci !

Bonsoir
Alors tous les sliders que je connais qui fonctionne avec cette technique additionnent la taille de toutes les div à mettre à l horizontale puis fixent la tailles du conteneur.
Je ne vois pas comment tu pourrais faire autrement.
sois en jquery soit en php mais ca implique d'ajouter du <style> dans le header

Ok je vois.

Je vais peut-être en rester à ma technique actuelle du coup, ça a le mérite de marcher.

Je pourrais parser la largeur des img avec php mais bon ça me semble relou pour rien.

Si toutes les images ont la même hauteur. Tu peux fixer la hauteur de ton conteneur, et les retours à la ligne ne vont alors pas paraître.

Vaxilart a écrit :
Si toutes les images ont la même hauteur. Tu peux fixer la hauteur de ton conteneur, et les retours à la ligne ne vont alors pas paraître.

Oui mais les images retournent quand même à la ligne même si on ne les voit pas et du coup si j'anime mon conteneur vers la gauche, il n'y a plus rien à droite.

Ce que je veux en fait c'est une div avec une largeur variable qui peut dépasser la largeur de la fenêtre.

Bonsoir, j'ai le même problème que toi. par compte tu fait comment pour avoir la barre de défilement et l'affichage qui ne sort pas de l'écran

Salut,

As-tu pensé à la valeur nowrap de la propriété white-space ?

Hello,

Bon j'ai finis par me bidouiller une solution depuis le temps.

J'ai juste donné à ma div une largeur très grande (10000px de mémoire).
Ca fonctionne très bien par contre c'est problèmatique si on veut mettre une barre de scroll.

Voilà ce que j'ai fais :
http://www.luciebremeault.com/test

[EDIT] Oui bah j'avais oublié mais j'en suis donc resté à ce que j'avais fais au début.
Modifié par Skoua (08 Oct 2011 - 02:06)

Victor BRITO a écrit :
Salut,

As-tu pensé à la valeur nowrap de la propriété white-space ?

Pas mal, je ne connaissais pas. Je testerai à l'occasion.