Bonjour,

j'ai grand besoin de votre aide

J'ai une liste d'images alignées horizontalement et qui dépassent de leur conteneur (que j'ai mis en overflow hidden). Mon problème est que la cassure est trop nette, on voit l'image coupée, j'aimerai l'adoucir. Mon idée est de mettre, à l'endroit de la cassure, au dessus de la dernière image, un png dégradé du transparent vers la couleur de fond du site. Le soucis c'est que je n'arrive pas à quelque chose qui marche bien.

J'ai essayé avec un float right + position relative mais les images descendent à la ligne au dessous.
J'ai essayé avec un position absolute right = x mais j'ai un min width pour mon conteneur et le png n'en tient pas compte.

Si quelqu'un souhaite m'aider, je lui en serais très reconnaissant! Voilà un morceau de code à coller dans un n'importe quel éditeur html, par exemple ici : http://htmledit.squarefree.com/

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
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<head>
  <style type="text/css">
#sliderbanner
{
        background:#F5F5F5;
        border-bottom: 1px solid #666;
        border-color: #E5E5E5;
        height: 68px;
        text-align:left;
        min-width:800px;
}
 
#slider
{
        margin:0px 50px;
        overflow:hidden;
}
 
#slider ul
{
        margin:0;
        padding:0;
        list-style:none;
 
        /* Computed by javascript
           to fit all images on same row.*/
        width:3000px;
}
 
#slider li
{
        display:inline;
        margin:4px 2px;
        float:left;
}
 
#slider img
{
        height:60px;
}
 
  </style>
</head>
	<div id="sliderbanner">
		<div id="slider">
			<ul>
			 <li><a href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ_G81Bn0O9n08JdO8H0hVkfcoJfUly04_nel5VfsmAF-MOEgIK0w"/></a></li>
			 <li><a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSc0Mmd6d5HY1ziMm6gfzHBixGKMPAws6ksLpEs7YJ1MH4MevM7"/></a></li>
			 <li><a href="#"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSW5KEUjgro87sqr0bxg8wMgNFqaypBTbFY45kE0KpC-pknyVe2Bw"/></a></li>
			 <li><a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRIxXRyAA1Z43xfH8RpH84UdWfNd30AyQnZOZJOCo_VaXp7g8IKEA"/></a></li>
			 <li><a href="#"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQZH6bEIax9ldE5HzVe20Ho_f50ZVCWSm4H0XEjh_Cw0MuBLLUkVQ"/></a></li>
			 <li><a href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT87j3yWsYJpTlMiCPlGZEceeimObr5Ulzj9Gp1yhvi2GycwnOC"/></a></li>
			 <li><a href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRSUSKwgtS7bZU7pfEOAD-kwUFTRjx71qEAPD4ahjEnaJkiPeBnhA"/></a></li>
			 <li><a href="#"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQooL0lSP5rgH7u1wP4V5cdOpgjeV8j9xCsdyPxyKa6YIXXeU8T"/></a></li>
			 <li><a href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT7HIGBBedcwaIMxxD14x0-houIgFeBAIiYzH7PnMeNbvrOxrqT"/></a></li>
			 <li><a href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTTv5FP-MKGjEgBNKx48iLoqJ5053iBLpYMmOHfpcCMQ9Vm0zUSnQ"/></a></li>
			 <li><a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4LVZM6alHGyMVwE5h0hgdT6ASyj4kSXz9oIXSjfKPdE_KRmKW7A"/></a></li>
			 <li><a href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ_G81Bn0O9n08JdO8H0hVkfcoJfUly04_nel5VfsmAF-MOEgIK0w"/></a></li>
			 <li><a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSc0Mmd6d5HY1ziMm6gfzHBixGKMPAws6ksLpEs7YJ1MH4MevM7"/></a></li>
			 <li><a href="#"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSW5KEUjgro87sqr0bxg8wMgNFqaypBTbFY45kE0KpC-pknyVe2Bw"/></a></li>
			 <li><a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRIxXRyAA1Z43xfH8RpH84UdWfNd30AyQnZOZJOCo_VaXp7g8IKEA"/></a></li>
			 <li><a href="#"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQZH6bEIax9ldE5HzVe20Ho_f50ZVCWSm4H0XEjh_Cw0MuBLLUkVQ"/></a></li>
			 <li><a href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT87j3yWsYJpTlMiCPlGZEceeimObr5Ulzj9Gp1yhvi2GycwnOC"/></a></li>
			 <li><a href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRSUSKwgtS7bZU7pfEOAD-kwUFTRjx71qEAPD4ahjEnaJkiPeBnhA"/></a></li>
			 <li><a href="#"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQooL0lSP5rgH7u1wP4V5cdOpgjeV8j9xCsdyPxyKa6YIXXeU8T"/></a></li>
			 <li><a href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT7HIGBBedcwaIMxxD14x0-houIgFeBAIiYzH7PnMeNbvrOxrqT"/></a></li>
			 <li><a href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTTv5FP-MKGjEgBNKx48iLoqJ5053iBLpYMmOHfpcCMQ9Vm0zUSnQ"/></a></li>
			 <li><a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4LVZM6alHGyMVwE5h0hgdT6ASyj4kSXz9oIXSjfKPdE_KRmKW7A"/></a></li>
			</ul>
		</div>
	</div>

J'attends vos idées!