28172 sujets

CSS et mise en forme, CSS3

Scrolling horizontal

Bonjour,

Je dois réaliser un site comportant un scrolling horizontal.
Voici mon code actuel :

#content {
	height:510px;
	width:100%;
	}
#contenu1 {
	float:left;
	width:200px;
	height:510px;
	}
#contenu2 {
	float:left;
	width:200px;
	height:510px;
	}
#contenu3 {
	float:left;
	height:510px;
	}



<div id="content">
	<div id="contenu1">contenu1...</div>
	<div id="contenu2">contenu2...</div>
	<div id="contenu3">contenu3...</div>
</div>


Le troisième contenu est de largeur variable ; il est susceptible de contenir de grandes photos panoramiques.

Je suis parti sur du float pour juxtaposer les divs de contenu, mais évidemment, quand on dépasse la largeur de l'écran, les divs passent à la ligne.

Connaissez-vous une solution pour empêcher ce passage à la ligne des float, et forcer le respect de la hauteur imposée, afin de générer un scroll horizontal ?

Merci beaucoup !
Modifié par yakou32 (22 Nov 2009 - 20:33)
Essaie avec un overflow: auto sur le div #content. Mais, il y a de fortes chances, cependant, que, pour que le débordement horizontal fonctionne, il faille que ton dernier div ne soit pas en positionnement flottant (pas de float: left à #contenu3).
Merci pour ta réponse, mais ça ne fonctionne pas trop...
J'ai toujours mon content3 qui repasse à la ligne

J'ai trouvé certains sites qui utilisaient ce scrolling horizontal, comme The Horizontal Way.

Je n'arrive pas à reproduire le même système, mais les contenus répétés sont en float:left + position:relative.
J'avoue ne pas comprendre le concept de float allié à un positionnement relatif, mais c'est peut-être là la clef...
yakou32 a écrit :

Le troisième contenu est de largeur variable

Ben... non.
Un div sans largeur spécifiée prend forcément 100% de la larguer octroyée. D'ailleurs la taille de ton premier div ne sert à rien (la hauteur non plus d'ailleurs, vu qu'elle s'adapte au contenu, à savoir des div de hauteur 510px).

A part ça, je sens bien que j'ai pas répondu à ta question. Je cherche et je m'édite.

Edit : en fait sur ton site, y a pas de tour de magie, ils ont préciser ça :
<body style="width:5839px">

Ce n'est pas fait automatiquement (ou alors via javascript ?). Du coup, en élargissant volontairement le body en fonction du contenu, ça passe.
Modifié par Ralf (24 Nov 2009 - 17:19)
Oui, c'est vrai pour les DIVs, disons que dans mon cas, ça va servir des intérêts de design en jouant sur la continuité des fonds et des bordures...

Bref, j'avais bien vu cette valeur de body...
Je vais essayer de faire une page plus simple isolant les seuls paramètres du scroll horizontal pour voir s'il n'y aurait pas des éventuels conflits...

Je fais ça et je reviens m'éditer Smiley ravi

Edit : Alors effectivement, j'arrive bien à reproduire le même principe que sur TheHorizontalWay, en forçant la largeur du body.
Seulement, ma mise en page est un peu différente : je cherche à établir le scroll-horizontal pour la div content seulement. Je cherche donc à contraindre sa largeur conformément à celle de l'écran, afin que le surplus de contenu génère un scroll horizontal dans cette div content....
Modifié par yakou32 (24 Nov 2009 - 18:14)
yakou32 a écrit :

Je vais essayer de faire une page plus simple isolant les seuls paramètres du scroll horizontal pour voir s'il n'y aurait pas des éventuels conflits...

Déjà fait Smiley smile (c'est calme au bureau, en ce moment...) Pas de conflit en vue, tout roule.
Sujet clos
Aller à