scroll horizontal sur ul qui bug

Version imprimable

Bonjour à tous,

je coince sur un problème de scroll horizontale.

Lorsque je fais ceci :

Code:

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:

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 :P

27/06/2011, 16h16
ornitho13

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

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:

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>

Voici une solution sans div :

Code:

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

29/06/2011, 17h10
gianni17

ça fonctionne aussi.

Merci :ccool: