scroll horizontal sur ul qui bug [Résolu]

gianni17 · 26/06/2011, 16h17

Bonjour à tous,

je coince sur un problème de scroll horizontale.

Lorsque je fais ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
<ul style="overflow-x:auto;overflow-y:none;white-space:nowrap;height:150px;">
<li style="display: inline"><img src="" alt="" title="" /></li>
<li style="display: inline"><img src="" alt="" title="" /></li>
<li style="display: inline"><img src="" alt="" title="" /></li>
<li style="display: inline"><img src="" alt="" title="" /></li>
<li style="display: inline"><img src="" alt="" title="" /></li>
<li style="display: inline"><img src="" alt="" title="" /></li>
<li style="display: inline"><img src="" alt="" title="" /></li>
<li style="display: inline"><img src="" alt="" title="" /></li>
</ul>

pas de soucis, ça fonctionne, les images se mettent sur une seule ligne, et le scroll horizontale se met.

Par contre, lorsque je dois changer mon code html, pour y ajouter un <div> au dessus de l'image (pour lui donner un titre), ça ne fonctionne pas et je ne comprend pas du tout pourquoi.
les <li> en float: left, ça bug.
les <div> en display: inline, ça bug

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<ul style="overflow-x:auto;overflow-y:none;white-space:nowrap;height:150px;">
<li><div style="width: 119px; overflow: hidden; white-space: nowrap;"><a href="">aaa</a></div><a href=""><img src="" alt="" title="" /></a></li>
<li><div style="width: 119px; overflow: hidden; white-space: nowrap;"><a href="">aaa</a></div><a href=""><img src="" alt="" title="" /></a></li>
<li><div style="width: 119px; overflow: hidden; white-space: nowrap;"><a href="">aaa</a></div><a href=""><img src="" alt="" title="" /></a></li>
<li><div style="width: 119px; overflow: hidden; white-space: nowrap;"><a href="">aaa</a></div><a href=""><img src="" alt="" title="" /></a></li>
<li><div style="width: 119px; overflow: hidden; white-space: nowrap;"><a href="">aaa</a></div><a href=""><img src="" alt="" title="" /></a></li>
<li><div style="width: 119px; overflow: hidden; white-space: nowrap;"><a href="">aaa</a></div><a href=""><img src="" alt="" title="" /></a></li>
<li><div style="width: 119px; overflow: hidden; white-space: nowrap;"><a href="">aaa</a></div><a href=""><img src="" alt="" title="" /></a></li>
<li><div style="width: 119px; overflow: hidden; white-space: nowrap;"><a href="">aaa</a></div><a href=""><img src="" alt="" title="" /></a></li>
<li><div style="width: 119px; overflow: hidden; white-space: nowrap;"><a href="">aaa</a></div><a href=""><img src="" alt="" title="" /></a></li>
<li><div style="width: 119px; overflow: hidden; white-space: nowrap;"><a href="">aaa</a></div><a href=""><img src="" alt="" title="" /></a></li>
<li><div style="width: 119px; overflow: hidden; white-space: nowrap;"><a href="">aaa</a></div><a href=""><img src="" alt="" title="" /></a></li>
</ul>

si quelqu'un à une idée

ornitho13 · 27/06/2011, 16h16

Salut,

le problème vient de ton div dans le li qui est en display:block par défaut et donc met à la ligne le reste du contenu (donc le lien et l'image).

Met un float: left ou un display:inline sur ces div et cela devrait fonctionner

gianni17 · 29/06/2011, 14h52

Bonjour,

j'ai déja essayé mais ça ne fonctionne pas, essayez un peu de prendre un nouveau document html, et d'y include le code suivant, le titre se met à gauche et non au dessus de l'image :

Code html :

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
<!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><title>Test</title>
<style type="text/css">
li { display: inline; width: 119px; }
div { display: inline; width: 119px; overflow: hidden; white-space: nowrap; }
img { max-width: 115px; max-height: 115px; }
</style>
</head>
<body>
<ul style="overflow-x:auto;overflow-y:none;white-space:nowrap;">
<li><div><a href="">aaa</a></div><a href=""><img src="http://images.allocine.fr/rx_160_214/b_1_cfd7e1/medias/nmedia/18/35/22/82/19696318.jpg" alt="" title="" /></a></li>
<li><div><a href="">aaa</a></div><a href=""><img src="http://images.allocine.fr/rx_160_214/b_1_cfd7e1/medias/nmedia/18/35/22/82/19696318.jpg" alt="" title="" /></a></li>
<li><div><a href="">aaa</a></div><a href=""><img src="http://images.allocine.fr/rx_160_214/b_1_cfd7e1/medias/nmedia/18/35/22/82/19696318.jpg" alt="" title="" /></a></li>
<li><div><a href="">aaa</a></div><a href=""><img src="http://images.allocine.fr/rx_160_214/b_1_cfd7e1/medias/nmedia/18/35/22/82/19696318.jpg" alt="" title="" /></a></li>
<li><div><a href="">aaa</a></div><a href=""><img src="http://images.allocine.fr/rx_160_214/b_1_cfd7e1/medias/nmedia/18/35/22/82/19696318.jpg" alt="" title="" /></a></li>
<li><div><a href="">aaa</a></div><a href=""><img src="http://images.allocine.fr/rx_160_214/b_1_cfd7e1/medias/nmedia/18/35/22/82/19696318.jpg" alt="" title="" /></a></li>
<li><div><a href="">aaa</a></div><a href=""><img src="http://images.allocine.fr/rx_160_214/b_1_cfd7e1/medias/nmedia/18/35/22/82/19696318.jpg" alt="" title="" /></a></li>
<li><div><a href="">aaa</a></div><a href=""><img src="http://images.allocine.fr/rx_160_214/b_1_cfd7e1/medias/nmedia/18/35/22/82/19696318.jpg" alt="" title="" /></a></li>
<li><div><a href="">aaa</a></div><a href=""><img src="http://images.allocine.fr/rx_160_214/b_1_cfd7e1/medias/nmedia/18/35/22/82/19696318.jpg" alt="" title="" /></a></li>
<li><div><a href="">aaa</a></div><a href=""><img src="http://images.allocine.fr/rx_160_214/b_1_cfd7e1/medias/nmedia/18/35/22/82/19696318.jpg" alt="" title="" /></a></li>
<li><div><a href="">aaa</a></div><a href=""><img src="http://images.allocine.fr/rx_160_214/b_1_cfd7e1/medias/nmedia/18/35/22/82/19696318.jpg" alt="" title="" /></a></li>
<li><div><a href="">aaa</a></div><a href=""><img src="http://images.allocine.fr/rx_160_214/b_1_cfd7e1/medias/nmedia/18/35/22/82/19696318.jpg" alt="" title="" /></a></li>
<li><div><a href="">aaa</a></div><a href=""><img src="http://images.allocine.fr/rx_160_214/b_1_cfd7e1/medias/nmedia/18/35/22/82/19696318.jpg" alt="" title="" /></a></li>
</ul>
</body>
</html>

ornitho13 · 29/06/2011, 16h25

Voici une solution sans div :

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
<!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><title>Test</title>
<style type="text/css">
li { display: inline-block; width: 119px; }
img { float:left;max-width: 115px; max-height: 115px; }
a {
	float:left;
	width:119px;
}
</style>
</head>
<body>
<ul style="overflow-x:auto;overflow-y:none;white-space:nowrap;">
<li><a href="">aaa</a><a href=""><img src="http://images.allocine.fr/rx_160_214/b_1_cfd7e1/medias/nmedia/18/35/22/82/19696318.jpg" alt="" title="" /></a></li>
<li><a href="">aaa</a><a href=""><img src="http://images.allocine.fr/rx_160_214/b_1_cfd7e1/medias/nmedia/18/35/22/82/19696318.jpg" alt="" title="" /></a></li>
<li><a href="">aaa</a><a href=""><img src="http://images.allocine.fr/rx_160_214/b_1_cfd7e1/medias/nmedia/18/35/22/82/19696318.jpg" alt="" title="" /></a></li>
<li><a href="">aaa</a><a href=""><img src="http://images.allocine.fr/rx_160_214/b_1_cfd7e1/medias/nmedia/18/35/22/82/19696318.jpg" alt="" title="" /></a></li>
<li><a href="">aaa</a><a href=""><img src="http://images.allocine.fr/rx_160_214/b_1_cfd7e1/medias/nmedia/18/35/22/82/19696318.jpg" alt="" title="" /></a></li>
<li><a href="">aaa</a><a href=""><img src="http://images.allocine.fr/rx_160_214/b_1_cfd7e1/medias/nmedia/18/35/22/82/19696318.jpg" alt="" title="" /></a></li>
<li><a href="">aaa</a><a href=""><img src="http://images.allocine.fr/rx_160_214/b_1_cfd7e1/medias/nmedia/18/35/22/82/19696318.jpg" alt="" title="" /></a></li>
<li><a href="">aaa</a><a href=""><img src="http://images.allocine.fr/rx_160_214/b_1_cfd7e1/medias/nmedia/18/35/22/82/19696318.jpg" alt="" title="" /></a></li>
<li><a href="">aaa</a><a href=""><img src="http://images.allocine.fr/rx_160_214/b_1_cfd7e1/medias/nmedia/18/35/22/82/19696318.jpg" alt="" title="" /></a></li>
<li><a href="">aaa</a><a href=""><img src="http://images.allocine.fr/rx_160_214/b_1_cfd7e1/medias/nmedia/18/35/22/82/19696318.jpg" alt="" title="" /></a></li>
<li><a href="">aaa</a><a href=""><img src="http://images.allocine.fr/rx_160_214/b_1_cfd7e1/medias/nmedia/18/35/22/82/19696318.jpg" alt="" title="" /></a></li>
<li><a href="">aaa</a><a href=""><img src="http://images.allocine.fr/rx_160_214/b_1_cfd7e1/medias/nmedia/18/35/22/82/19696318.jpg" alt="" title="" /></a></li>
<li><a href="">aaa</a><a href=""><img src="http://images.allocine.fr/rx_160_214/b_1_cfd7e1/medias/nmedia/18/35/22/82/19696318.jpg" alt="" title="" /></a></li>
</ul>
</body>
</html>

J'ai supprimé les div et mis les <a> et <img> en float:left avec une taille

gianni17 · 29/06/2011, 17h10

ça fonctionne aussi.

Merci

27/06/2011, 16h16	#2
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	Salut, le problème vient de ton div dans le li qui est en display:block par défaut et donc met à la ligne le reste du contenu (donc le lien et l'image). Met un float: left ou un display:inline sur ces div et cela devrait fonctionner
	00

29/06/2011, 17h10	#5
gianni17 Futur Membre du Club Inscription : juin 2005 Messages : 44 Détails du profil Informations forums : Inscription : juin 2005 Messages : 44 Points : 16 Points : 16	ça fonctionne aussi. Merci
	00

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