Avoir un scroll horizontal avec une bonne largeur

lionheart33806 · 19/10/2011, 16h16

Bonjour,

J'ai une suite de <dl> les uns à côté des autres mais ça peut prendre au final une sacrée largeur.
Je veux donc les mettre dans un <div> qui donnera un scroll horizontal.

Le problème, c'est que je dois fixer une très grande largeur dans le div du contenu (1500). Je n'arrive pas à avoir une largeur qui s'adapte au contenu car au final, ça sera généré par du PHP donc impossible de prédire la largeur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!doctype html>
<html>
<head>
<title>Demo</title>
</head>
<style type="text/css">
 
 
.dlhori dl, .dlhorifixe, .dlhorisroll, .dlhoricontainer {
	display: inline-block;
}
 
.dlhorisroll {
background-color: green;
/*padding: 3px;*/
}
 
.dlhorifixe {
background-color: red;
/*padding: 3px;*/
}
 
</style>
<body>
 
	<div class="dlhori" style="background-color: fuchsia;">
		<div class="dlhorifixe"></div><div class="dlhoricontainer" style="width: 500px;overflow: auto; word-wrap:break-word;"><div class="dlhorisroll" style="width: 1500px;">
			<dl style="background-color: yellow">
				<dt>Référence</dt>
				<dd>CA26/123456</dd>
			</dl><dl style="background-color: yellow">
				<dt>Libellé</dt>
				<dd>Bouteille jaune en face de la tour eiffel avec beaucoup de sous</dd>
			</dl><dl style="background-color: yellow">
				<dt>Date de début de comm. prévue</dt>
				<dd>01/02/03</dd>
			</dl><dl style="background-color: yellow">
				<dt>Date de début de comm. réelle</dt>
				<dd>02/03/03</dd>
			</dl><dl style="background-color: yellow">
				<dt>Date de fin de comm. prévue</dt>
				<dd>04/03/02</dd>
			</dl><dl style="background-color: yellow">
				<dt>Date de fin de comm. réelle</dt>
				<dd>05/03/02</dd>
			</dl>
		</div></div>
	</div>
</body>
</html>

Le "<div class="dlhorifixe"></div>" doit être conservé mais si on peut éviter le "<div class="dlhoricontainer">", ça m'arrange.

Merci d'avance pour vos idées !

NB : Désolé, le code n'est pas au simpliste. Je l'optimiserai.

oceane751 · 20/10/2011, 12h16

Euh, ça ne fait pas deux fois que je vois le même post ou j'hallucine ?

Bref..
Elle sert à quoi cette class .dlhorifixe ?
Que doit faire exactement la div avec .dlhoricontainer (couleur verte et jaune) ?

lionheart33806 · 24/10/2011, 10h34

Je vois aussi des posts qui ressemble à mon problème mais j'ai pas l'impression que c'est exactement le même soucis.

.dlhoricontainer m'aide à obtenir le résultat souhaité.
Ici, .dlhorifixe sert à rien ("Désolé, le code n'est pas au simpliste.").

EDIT : Voici le code simplifié :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<html>
<head>
<title>Demo</title>
</head>
<style type="text/css">
.dlhorisroll {
	width: 500px;
	overflow: auto;
}
 
.dlhoricontainer {
	background-color: green;
	width: 1500px;
}
 
dl {
	background-color: yellow;
	display: inline-block;
}
</style>
<body>
	<div class="dlhorisroll">
		<div class="dlhoricontainer">
			<dl>
				<dt>Référence</dt>
				<dd>CA26/123456</dd>
			</dl>
			<dl>
				<dt>Libellé</dt>
				<dd>Bouteille jaune en face de la tour eiffel avec beaucoup de sous</dd>
			</dl>
			<dl>
				<dt>Date de début de comm. prévue</dt>
				<dd>01/02/03</dd>
			</dl>
			<dl>
				<dt>Date de début de comm. réelle</dt>
				<dd>02/03/03</dd>
			</dl>
			<dl>
				<dt>Date de fin de comm. prévue</dt>
				<dd>04/03/02</dd>
			</dl>
			<dl>
				<dt>Date de fin de comm. réelle</dt>
				<dd>05/03/02</dd>
			</dl>
		</div>
	</div>
</body>
</html>

Comme je n'ai pas d'autre solution que de fixer la taille du contenu, ça me donne (pour un div de 1500px dans un div de 500px) :

lionheart33806 · 31/10/2011, 10h54

Je voulais séparer l'encadré (.dlhoriscoll) du conteneur (.dlhoricontainer) des contenus (les <dl>).

Dans cette vision, j'ai fini par mettre une règle "white-space: nowrap" à la place de la largeur. C'est vraiment cela qui oblige les <dl> à bien rester les uns à côté des autres avec un ascenseur horizontal.

Par contre, le conteneur reste à la taille de l'encadré. Ça a pour effet d'avoir 500px de background vert donc quand on défile, le vert part à gauche.

Je m'étais égarer dans la notion d'overflow. Je résonnais plus en "ascenseur" qu'en "gestion de surplus de contenu".
En testant, je me rends compte que ça marche mieux en inversant entre le contenu et l'encadré : le conteneur prend la largeur du contenu et non de l'encadré (plus de prob de background).

Juste pour finir, j'ai retiré le ".dlhoricontainer" et appliqué toutes ses règles à ".dlhoriscoll". Ça donne le même résultat mais avec 11 pixels en hauteur en plus (?!). Dans le précédent schéma, l'encadré avait la hauteur max d'un dl mais maintenant c'est augmenté de 11px.

Une explication ?

Le code tout beau tout propre (testé IE9/Chrome 15) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!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="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demo</title>
<style type="text/css">
.dlhorisroll {
	width: 500px;
	height: 100px;
	background-color: green;
	white-space: nowrap;
	overflow: auto;
}
 
dl {
	background-color: yellow;
	display: -moz-inline-stack;
	display: inline-block;
	zoom: 1; /* pour IE */
	*display: inline; /* pour IE */
}
</style>
</head>
<body>
	<div class="dlhorisroll">
		<dl>
			<dt>Référence</dt>
			<dd>CA26/123456</dd>
		</dl>
		<dl>
			<dt>Libellé</dt>
			<dd>Bouteille jaune en face de la tour eiffel avec beaucoup de sous</dd>
		</dl>
		<dl>
			<dt>Date de début de comm. prévue</dt>
			<dd>01/02/03</dd>
		</dl>
		<dl>
			<dt>Date de début de comm. réelle</dt>
			<dd>02/03/03</dd>
		</dl>
		<dl>
			<dt>Date de fin de comm. prévue</dt>
			<dd>04/03/02</dd>
		</dl>
		<dl>
			<dt>Date de fin de comm. réelle</dt>
			<dd>05/03/02</dd>
		</dl>
	</div>
</body>
</html>

20/10/2011, 12h16	#2
oceane751 Membre éprouvé Intégrateur Web Inscription : novembre 2004 Messages : 992 Détails du profil Informations personnelles : Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Intégrateur Web Informations forums : Inscription : novembre 2004 Messages : 992 Points : 434 Points : 434	Euh, ça ne fait pas deux fois que je vois le même post ou j'hallucine ? Bref.. Elle sert à quoi cette class .dlhorifixe ? Que doit faire exactement la div avec .dlhoricontainer (couleur verte et jaune) ?
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email