comment enlever la superposition de blocs div inline ?

**Ekimasu** · 15/11/2007, 11h02

Bonjour,

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

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

Ma CSS est là suivante :

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

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

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 ?

**le_chomeur** · 15/11/2007, 11h42

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 :

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

**mLk92** · 15/11/2007, 12h03

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

comment enlever la superposition de blocs div inline ?

CSS

Vue hybride

Discussions similaires

Partager

Partager