Décalage complet du site par raport au body sous ie

**nO_life** · 29/11/2008, 01h16

Affichage décalé sous ie comme vous allez pouvoir le constater avec le lien suivant.
J'ais aussi un soucis au niveau du menu de droite il ne s'affiche pas en entier.
Je vous fourni le css et html .

http://promos-mails.com/demoettest/index.html

code css

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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
/*body*/
 
body{
background:url(images/fond.png) no-repeat top center #780601;
margin:0;
padding:0;
font-family:Verdana,Geneva,sans-serif;
font-size:9px;
}
 
/*header*/
 
#header{
height:312px;
background:url(images/header.png) no-repeat top center;
padding:0;
margin:0 auto;
}
 
/* barre de recherche*/
 
#recherche{
height:77px;
background:url(images/recherche.png) no-repeat;
margin:-235px 385px;
}
 
/* bouton recherche*/
 
#bouton{
height:41px;
background:url(images/recherchebouton.png) no-repeat;
margin:175px 568px;
}
 
/* menu du haut*/
 
/*bouton gauche*/
 
#menuhautboutongauche{
height:81px;
width:117px;
background:url(images/menuhautboutongauche.png) no-repeat;
margin : -15px 305px;
}
 
 
 
#menuhautboutongauche a{
font-size:14px;
text-decoration:none;
text-align:center;
display:block;
line-height:81px;
}
 
/*bouton central 1*/
 
#menuhautboutoncentre{
height:81px;
width:117px;
background:url(images/menuhautboutoncentre.png) no-repeat;
margin : -81px 422px;
}
 
#menuhautboutoncentre a{
font-size:14px;
text-decoration:none;
text-align:center;
display:block;
line-height:81px;
}
 
/*bouton central 2*/
 
#menuhautboutoncentre2{
height:81px;
width:117px;
background:url(images/menuhautboutoncentre.png) no-repeat;
margin : -81px 527px;
}
 
#menuhautboutoncentre2 a{
font-size:14px;
text-decoration:none;
text-align:center;
display:block;
line-height:81px;
}
 
/*bouton central 3*/
 
#menuhautboutoncentre3{
height:81px;
width:117px;
background:url(images/menuhautboutoncentre.png) no-repeat;
margin : -81px 633px;
}
 
#menuhautboutoncentre3 a{
font-size:14px;
text-decoration:none;
text-align:center;
display:block;
line-height:81px;
}
 
/*bouton central 4*/
 
#menuhautboutoncentre4{
height:81px;
width:117px;
background:url(images/menuhautboutoncentre.png) no-repeat;
margin : -81px 739px;
}
 
#menuhautboutoncentre4 a{
font-size:14px;
text-decoration:none;
text-align:center;
display:block;
line-height:81px;
}
 
/*bouton droit */
 
#menuhautboutondroit{
height:81px;
width:117px;
background:url(images/menuhautboutondroit.png) no-repeat;
margin : -81px 845px;
}
 
#menuhautboutondroit a{
font-size:14px;
text-decoration:none;
text-align:center;
display:block;
line-height:81px;
}
 
/*Fin du menu haut */
 
/*menu de droite*/
 
#menudroit{
height:172px;
width: 976px;
background:url(images/menudetg.png) no-repeat;
margin :93px 155px;
padding:0;
}
 
/*menu de droite bouton 1*/
 
#menudroitbouton{
height:60px;
width:136px;
background:url(images/boutonmenudetg.png) no-repeat;
margin : -200px 168px;
}
 
#menudroitbouton a{
font-size:14px;
text-decoration:none;
text-align:center;
display:block;
line-height:81px;
}
 
/*menu de droite bouton 2*/
 
#menudroitbouton2{
height:60px;
width:136px;
background:url(images/boutonmenudetg.png) no-repeat;
margin : 200px 168px;
}
 
#menudroitbouton2 a{
font-size:14px;
text-decoration:none;
text-align:center;
display:block;
line-height:81px;
}
 
/*menu de droite bouton 3*/
 
#menudroitbouton3{
height:60px;
width:136px;
background:url(images/boutonmenudetg.png) no-repeat;
margin : -200px 168px;
}
 
#menudroitbouton3 a{
font-size:14px;
text-decoration:none;
text-align:center;
display:block;
line-height:81px;
}

code html

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Webmedia</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div id="header"></div>
 <div id="recherche"></div>
 <div id="bouton"></div>
 <div id="menuhautboutongauche"><a href="http://liens.com">1111</a></div>
 <div id="menuhautboutoncentre"><a href="http://liens.com">1111</a></div>
 <div id="menuhautboutoncentre2"><a href="http://liens.com">1111</a></div>
 <div id="menuhautboutoncentre3"><a href="http://liens.com">1111</a></div>
 <div id="menuhautboutoncentre4"><a href="http://liens.com">1111</a></div>
 <div id="menuhautboutondroit"><a href="http://liens.com">1111</a></div>
 <div id="menudroit"></div>
 <div id="menudroitbouton"><a href="http://liens.com">1111</a></div>
 <div id="menudroitbouton2"><a href="http://liens.com">1111</a></div>
 <div id="menudroitbouton3"><a href="http://liens.com">1111</a></div>
</body>
</html>

**GihefBey** · 29/11/2008, 19h58

Bonjour (ça se fait),

Je ne peux rien constater sous IE, mais je constate quelques erreurs de conception et du code (beaucoup) inutile.

Décalé comment, où ?

Le menu ne s'affiche pas “en entier” parce que l'image est plus haute que la hauteur que tu lui donnes.

En supposant que les boutons de tes menus vont rester graphiquement identiques avec du texte dedans, je te propose de simplifier et de tester, d'adapter ces modifications et propositions.

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
html, body {
  margin: 0;
  padding:0;
  text-align : center;
  }
body {
  background: #780601 url(images/fond.png) no-repeat top center;
width : 1000px;
  font-family: Verdana,Geneva,sans-serif;
  font-size: 9px;  /* à éviter, les px */
  }

Code css :

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
/* menu du haut*/
#menuhaut {
  width: 660px;  /* à adapter */
  height: 81px;
  margin: 0 auto;
  }
.boutonsmenuhaut {
  float : left;
  }
 
/*bouton gauche*/
#menuhautboutongauche {
  height:81px;
  width:117px;
  background:url(images/menuhautboutongauche.png) no-repeat 0 0;
/*  margin : -15px 305px; */
  }
 
/*boutons centraux - une class */
.menuhautboutoncentre {
width:106px;
  height:81px;
  background:url(images/menuhautboutoncentre.png) no-repeat 0 0;
/*  margin : -81px 422px; */
  }
 
/*bouton droit */
#menuhautboutondroit {
  height:81px;
  width:117px;
  background:url(images/menuhautboutondroit.png) no-repeat;
/*  margin : -81px 845px; */
  }
 
/* ils sont identiques, regroupe */
#menuhautboutongauche a, .menuhautboutoncentre a, #menuhautboutondroit a {
  display: block;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  line-height: 81px;
  }
/*Fin du menu haut */

avec

Code html :

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

1
2
3
4
5
6
7
8
 <div id="menuhaut"> <!-- créé -->
   <div id="menuhautboutongauche" class="boutonsmenuhaut"><a href="http://liens.com">1g</a></div>
   <div class="menuhautboutoncentre boutonsmenuhaut"><a href="http://liens.com">2c</a></div>
   <div class="menuhautboutoncentre boutonsmenuhaut"><a href="http://liens.com">3c</a></div>
   <div class="menuhautboutoncentre boutonsmenuhaut"><a href="http://liens.com">4c</a></div>
   <div class="menuhautboutoncentre boutonsmenuhaut"><a href="http://liens.com">5c</a></div>
   <div id="menuhautboutondroit" class="boutonsmenuhaut"><a href="http://liens.com">6d</a></div>
 </div>  <!-- fin du menu haut -->

Et aussi

Code css :

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
/*menu de droite*/
/* rien n'indique qu'il est à droite */
 
#menudroit {
/*  height:172px;*/
/*  width: 976px;      ???      */
width: 170px;
  background: url(images/menudetg.png) -1px 0 no-repeat;
  margin : 93px 155px;
padding-top: 60px;
  }
 
/*menu de droite boutons */
.menudroitbouton {
  height:60px;
  width:136px;
  background:url(images/boutonmenudetg.png) no-repeat;
  margin : 0 14px 0;
  }
 
.menudroitbouton a {
  font-size:14px;
  text-decoration:none;
  text-align:center;
  display:block;
line-height:60px;
  }
 
#menudroitbas {
  height : 30px;
  background: #53c7fb url(images/menudetg.png) no-repeat -1px bottom;
  }
/*Fin du menu de droite */

avec

Code html :

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

1
2
3
4
5
6
7
8
9
10
 <div id="menudroit">
   <div class ="menudroitbouton"><a href="http://liens.com">0</a></div>
   <div class ="menudroitbouton"><a href="http://liens.com">2</a></div>
   <div class ="menudroitbouton"><a href="http://liens.com">3</a></div>
 <!-- tu en ajoutes autant que les hauteurs le permettent  -->
   <div class="menudroitbouton"><a href="http://liens.com">4</a></div>
 <!-- pour avoir l'image du bas qui s'affiche quel que soit le contenu
  mais on pourrait faire autement -->
   <div id="menudroitbas"></div>
 </div>

Restent les autres problèmes.

-

**nO_life** · 29/11/2008, 22h03

Merci pour vos explications je vais etudier sa de pret demain matin

Pour les erreurs sous IE je vous ferais des screens au lieu de liens.
Je tien encore une fois a vous remercier por votre aide

**kaiser59** · 30/11/2008, 19h17

Salut,

Sur IE6 je voie l'erreur dont tu parles, pour corriger ça, il te faut dans un 1er temps revoir ta découpe, ensuite IE ne gère pas les png transparent ce qui donne un truc tout moche notamment un fond blanc d'où le fait de revoir ta découpe.

Par exemple, tu peux le découper en 3 ou 4 parties,
header (avec/sans menu)
contenu (avec/sans menu)
footer

et les trois div tu leur appliques :

Code css :

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

#header, #contenu, #footer {width:1000px;margin-left:auto;margin-right:auto;}

afin de les centrer.

Code html :

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

1
2
3
4
5
6
7
8
9
<div id="header">
  <div id="recherche">
    <form></form>
  </div>
</div>
 
<div id="contenu"></div>
 
<div id="footer"></div>

où ton header contiendra le haut de ton image + l'image avec la tete et recherche en background et tu n'aurais qu'à placer ton formulaire de recherche avec un div.

En espèrant que tu aies compris le principe

**nO_life** · 02/12/2008, 20h11

Merci pour votre explication je vais appliquer cela demain matin et je vous tien au courant .

Décalage complet du site par raport au body sous ie

CSS

Vue hybride

Discussions similaires

Partager

Partager