comment enlever la superposition de blocs div inline ?

Bonjour,

Je ne comprends pas pourquoi mes blocs DIV inline se superposent :

http://7up.free.fr/obtenu.jpg

je voudrais qu'ils se mettent l'un à côté de l'autre, comme ça :

http://7up.free.fr/voulu.jpg

Ma CSS est là suivante :

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
.bloc_produit {
 display:inline;
 width:244px;
 height:90px;  
}
.bloc_produit_image {
 display:inline;
 width:107px;
 height:90px;
 float:left;
}
.bloc_produit_details { 
 display:inline;
 width:137px;
 height:90px;
 vertical-align:top;
 text-align:left;
 overflow:hidden
}
.bloc_produit_nom {
 display:block;
 width:137px;
 height:45px;
}
.bloc_produit_btn {
 display:block;
 width:137px;
 height:45px;
}

quelqu'un voit-il mon erreur ?

voilà le code HTML d'appel :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <div class="bloc_produit">
            <div class="bloc_produit_image">
                <img src="../../gfx/catalogue/exemple_pdoduit.gif">
            </div>
            <div class="bloc_produit_details">
                <div class="bloc_produit_nom">
                    &gt; Enduit pour joints de plaques de  pl&acirc;tre cartonn&eacute;es<br>
                </div>
                <div class="bloc_produit_btn">
                    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image65','','../../gfx/catalogue/btn_fiche_produit2.gif',1)"><img src="../../gfx/catalogue/btn_fiche_produit.gif" alt="Fiche produit" name="Image65"  border="0"></a>
                    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image66','','../../gfx/catalogue/btn_fiche2.gif',1)"><img src="../../gfx/catalogue/btn_fiche.gif" alt="Fiche d'utilisation" name="Image66"  border="0"></a>
                    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image67','','../../gfx/catalogue/btn_fiche_donnees_securite2.gif',1)"><img src="../../gfx/catalogue/btn_fiche_donnees_securite.gif" alt="Fiche de données de sécurité" name="Image67" border="0"></a>
                </div>
            </div>
        </div>

j'ai beau cherché, je ne vois rien d'évident.

pouvez-vous m'aider s'il vous plaît ?

Salut
la propriété in-line est propre au célulle de tableau et ne se comporte pas de la même façon sur une div ou un span ...

Pour combler cela j'ai modifier tes inline en display:block et float:left :

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
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
 
<HTML>
<HEAD>
<title>Morne Plaine. Le classement.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
 
.bloc_produit {
 display:block;
 float:left;
 width:244px;
 height:90px; 
  background-color:yellow; 
}
.bloc_produit_image {
 display:block;
 float:left;
 width:107px;
 height:90px;
 float:left;
}
.bloc_produit_details { 
  display:block;
 float:left;
 width:137px;
 height:90px;
 vertical-align:top;
 text-align:left;
 overflow:hidden;
}
.bloc_produit_nom {
 display:block;
 width:137px;
 height:45px;
}
.bloc_produit_btn {
 display:block;
 width:137px;
 height:45px;
}
</style>
 
</HEAD>
<BODY>
<div class="bloc_produit">
            <div class="bloc_produit_image">
                <img src="../../gfx/catalogue/exemple_pdoduit.gif" width="50px" height="40px">
            </div>
            <div class="bloc_produit_details">
                <div class="bloc_produit_nom">
                    &gt; Enduit pour joints de plaques de  pl&acirc;tre cartonn&eacute;es<br>
                </div>
                <div class="bloc_produit_btn">
                    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image65','','../../gfx/catalogue/btn_fiche_produit2.gif',1)"><img src="../../gfx/catalogue/btn_fiche_produit.gif" alt="Fiche produit" name="Image65"  border="0"></a>
                    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image66','','../../gfx/catalogue/btn_fiche2.gif',1)"><img src="../../gfx/catalogue/btn_fiche.gif" alt="Fiche d'utilisation" name="Image66"  border="0"></a>
                    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image67','','../../gfx/catalogue/btn_fiche_donnees_securite2.gif',1)"><img src="../../gfx/catalogue/btn_fiche_donnees_securite.gif" alt="Fiche de données de sécurité" name="Image67" border="0"></a>
                </div>
            </div>
</div>
<div class="bloc_produit" style="background-color:red">
            <div class="bloc_produit_image">
                <img src="../../gfx/catalogue/exemple_pdoduit.gif" width="50px" height="40px">
            </div>
            <div class="bloc_produit_details">
                <div class="bloc_produit_nom">
                    &gt; Enduit pour joints de plaques de  pl&acirc;tre cartonn&eacute;es<br>
                </div>
                <div class="bloc_produit_btn">
                    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image65','','../../gfx/catalogue/btn_fiche_produit2.gif',1)"><img src="../../gfx/catalogue/btn_fiche_produit.gif" alt="Fiche produit" name="Image65"  border="0"></a>
                    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image66','','../../gfx/catalogue/btn_fiche2.gif',1)"><img src="../../gfx/catalogue/btn_fiche.gif" alt="Fiche d'utilisation" name="Image66"  border="0"></a>
                    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image67','','../../gfx/catalogue/btn_fiche_donnees_securite2.gif',1)"><img src="../../gfx/catalogue/btn_fiche_donnees_securite.gif" alt="Fiche de données de sécurité" name="Image67" border="0"></a>
                </div>
            </div>
</div>
<div class="bloc_produit">
            <div class="bloc_produit_image">
                <img src="../../gfx/catalogue/exemple_pdoduit.gif" width="50px" height="40px">
            </div>
            <div class="bloc_produit_details">
                <div class="bloc_produit_nom">
                    &gt; Enduit pour joints de plaques de  pl&acirc;tre cartonn&eacute;es<br>
                </div>
                <div class="bloc_produit_btn">
                    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image65','','../../gfx/catalogue/btn_fiche_produit2.gif',1)"><img src="../../gfx/catalogue/btn_fiche_produit.gif" alt="Fiche produit" name="Image65"  border="0"></a>
                    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image66','','../../gfx/catalogue/btn_fiche2.gif',1)"><img src="../../gfx/catalogue/btn_fiche.gif" alt="Fiche d'utilisation" name="Image66"  border="0"></a>
                    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image67','','../../gfx/catalogue/btn_fiche_donnees_securite2.gif',1)"><img src="../../gfx/catalogue/btn_fiche_donnees_securite.gif" alt="Fiche de données de sécurité" name="Image67" border="0"></a>
                </div>
            </div>
</div>
<div class="bloc_produit" style="background-color:red">
            <div class="bloc_produit_image">
                <img src="../../gfx/catalogue/exemple_pdoduit.gif" width="50px" height="40px">
            </div>
            <div class="bloc_produit_details">
                <div class="bloc_produit_nom">
                    &gt; Enduit pour joints de plaques de  pl&acirc;tre cartonn&eacute;es<br>
                </div>
                <div class="bloc_produit_btn">
                    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image65','','../../gfx/catalogue/btn_fiche_produit2.gif',1)"><img src="../../gfx/catalogue/btn_fiche_produit.gif" alt="Fiche produit" name="Image65"  border="0"></a>
                    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image66','','../../gfx/catalogue/btn_fiche2.gif',1)"><img src="../../gfx/catalogue/btn_fiche.gif" alt="Fiche d'utilisation" name="Image66"  border="0"></a>
                    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image67','','../../gfx/catalogue/btn_fiche_donnees_securite2.gif',1)"><img src="../../gfx/catalogue/btn_fiche_donnees_securite.gif" alt="Fiche de données de sécurité" name="Image67" border="0"></a>
                </div>
            </div>
</div>
<div class="bloc_produit">
            <div class="bloc_produit_image">
                <img src="../../gfx/catalogue/exemple_pdoduit.gif" width="50px" height="40px">
            </div>
            <div class="bloc_produit_details">
                <div class="bloc_produit_nom">
                    &gt; Enduit pour joints de plaques de  pl&acirc;tre cartonn&eacute;es<br>
                </div>
                <div class="bloc_produit_btn">
                    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image65','','../../gfx/catalogue/btn_fiche_produit2.gif',1)"><img src="../../gfx/catalogue/btn_fiche_produit.gif" alt="Fiche produit" name="Image65"  border="0"></a>
                    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image66','','../../gfx/catalogue/btn_fiche2.gif',1)"><img src="../../gfx/catalogue/btn_fiche.gif" alt="Fiche d'utilisation" name="Image66"  border="0"></a>
                    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image67','','../../gfx/catalogue/btn_fiche_donnees_securite2.gif',1)"><img src="../../gfx/catalogue/btn_fiche_donnees_securite.gif" alt="Fiche de données de sécurité" name="Image67" border="0"></a>
                </div>
            </div>
</div>
</BODY>
</HTML>

coordialement

Il me semble que tu as déja créer un topic pour ca ...