28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème d'overflow et de div

Bonjours,

En train de réaliser un site, je peche sur un problème de div, j'ai un div conteneur de 200px, avec un overflow:hidden dont je voudrais faire défiler horizontalement le contenu grâce à du javascript (le js marche le soucis n'est pas là).
Je vous présente le code simple que j'aimerai déjà faire marcher Smiley langue 


		<div id="conteneur_principal" style="overflow:hidden; width:200px">
			<div class="sub" style="float:left; width: 180px">
				mon contenu
			</div>
			<div class="sub" style="float:left; width: 180px">
				mon contenu
			</div>
		</div>

(sans appliquer de style particulier (jai juste écris des class/id histoire de savoir à quoi correspond chaque div Smiley smile )
Je voudrais donc que mes conteneurs "sub" soient à côtés les uns les autres, mais il semble que dès que la somme de leur largeur (ici 360px donc) dépasse la largeur du conteneur "principal" (200px) .. ils se positionnent les uns en dessous des autres sans prendre en compte la propriété "overflow:hidden" de mon conteneur principal :\)

Quelqu'un aurait il une petite astuce ? Smiley confused

Merci d'avance, en espérant avoir été clair ^^
Modifié par nuts62 (11 Jul 2008 - 16:57)
Hello nuts62 Smiley cligne ,

tu pourrais par exemple rajouter une div #scroller suffisamment large pour contenir tous les éléments en float.

Par exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css" media="screen,projection"><!--
#conteneur_principal {
	overflow: hidden;
	width: 200px;
	background-color:#FF6600;
}

#scroller {
	width: 2000px;
}

.sub {
	float: left;
	width: 180px;
	background-color: #FF0000;
}
--></style>
</head>
<body> 
<div id="conteneur_principal">
	<div id="scroller">
		<div class="sub">
			<p>mon contenu</p>
			<p>mon contenu</p>
		</div>
		<div class="sub">
			<p>mon contenu</p>
			<p>mon contenu</p>
			<p>mon contenu</p>
			<p>mon contenu</p>
		</div>
	</div>
</div>
</body>
</html>

A noter que pour des raisons d'accessibilité (et notamment en cas de Javascript désactivé) il vaudrait mieux mettre un overflow: auto; à la place du hidden et ne le modifier que par JS.

A+
Merci la solution marche très bien Smiley smile
Je vais juste voir pour que le div scroller prenne la taille nécessaire, et pas trop Smiley smile

Merci bien Smiley smile
Hum en fait, après avoir réussi à paramétrer ma page, je viens de tester sous IE, et à mon grand désespoir ce dernier m'affiche tout mon div que tu nommais "scroller" :\ donc ça déforme tout .. y a t'il une astuce pour l'overflow sur IE de ce fait ?
J'ai trouvé la solution, qui consistait à mettre un "width:100%" sur mon div ayant l'overflow (je ne lui avait pas refixé de taille, je pense que le problème venait de là Smiley smile

Je laisse le sujet ouvert au cas où j'aurais de mauvaises surprises ou d'autres s'y rapportant, et l'indiquerais comme "résolu" sous peu Smiley smile
Sujet clos
Aller à