Décalage de certaines balises div selon Navigateur

**CrazyHorse07** · 30/09/2008, 19h06

Bonjour à tous,

Je suis un néophyte en matière de programmation. Le langage html n'est plus tout à fait du chinois pour moi, mais j'ai beaucoup de lacunes.

J'essaie de programmer (bénévolement) un nouveau site pour l'association Zarina Khan, dont le site actuel est bourré de bugs, de liens morts, et n'est tout simplement plus d'actualité. Il faut que le site soit opérationnel rapidement, car de nombreux évènements sont prévus pour les mois à venir. Je pars donc sur quelque chose de relativement simple, mais il faut quand même que ça soit sympathique et agréable.

Ça fait des heures que je me prends la tête sur un problème de mise en page. Il y a sûrement une solution simple, mais je ne parviens pas à la trouver seul.

Vous pouvez voir la page incriminée ici.

Si vous l'ouvrez avec IE, vous verrez le résultat que j'aimerais obtenir pour ma Topframe. Si vous l'ouvrez avec Firefox, Opera ou Netscape, vous comprendrez mon problème...

Ce qui est étrange, c'est que la balise div qui contient le Gif animé se positionne correctement (tout en haut), alors que les 8 autres (qui contiennent chacune un titre) sont décalée vers le bas mais gardent néanmoins la position relative que je souhaite qu'elles maintiennent entre elles (pourtant je leur ai donné leur position en absolute).

Je ne comprends pas d'où vient cette "marge" qui me décale tout vers le bas et pourquoi Internet Exploreur l'ignore et m'affiche ce que je cherche à obtenir (il y a pourtant forcément une erreur quelque part).

Vous pouvez jeter un œil au code ci-dessous :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Navigation</title>

<style>

<!--

body {
background-image: url(Images/Divers_elements/Cadres_Navigation/Fond_Navigation1.png);
top: 0px;
left: 0px;
margin: 0;
padding: 0;
}

#Logo_anime
{
position: absolute;
width: 200px;
height: 115px;
z-index: 8;
left: 32.6171875%;
top: 0%;
margin:0;
padding:0;
}

#Presentation
{
position: absolute;
width: 250px;
height: 30px;
z-index: 2;
left: 1%;
top: 13px;
margin:0;
padding:0;
}

#Les_oeuvres
{
position: absolute;
width: 250px;
height: 30px;
z-index: 3;
left: 1%;
top: 68px;
margin:0;
padding:0;
}

#Atteliers
{
position: absolute;
width: 250px;
heigh: 60px;
z-index: 4;
left: 1%;
top: 123px;
margin:0;
padding:0;
}

#Grands_projets
{
position: absolute;
width: 250px;
height: 30px;
z-index: 5;
left: 1%;
top: 203px;
margin:0;
padding:0;
}

#Stages
{
position: absolute;
width: 250px;
height: 30px;
z-index: 5;
left: 74.609375%;
top: 13px;
margin:0;
padding:0;
}

#Boutique
{
position: absolute;
width: 250px;
height: 30px;
z-index: 6;
left: 74.609375%;
top: 68px;
margin:0;
padding:0;
}

#Contacts
{
position: absolute;
width: 250px;
height: 30px;
z-index: 7;
left: 74.609375%;
top: 138px;
margin:0;
padding:0;
}

#Plan_site
{
display: block;
position: absolute;
width: 250px;
height: 30px;
z-index: 1;
left: 74.609375%;
top: 203px;
margin:0;
padding:0;
}

-->
</style>

<link href="./Styles_CSS/WebZK.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="WebZK" id="Presentation">
<h5 align="left">Présentation</h5>
</div>

<div class="WebZK" id="Les_oeuvres">
<h5 align="left">Les oeuvres</h5>
</div>

<div class="WebZK" id="Atteliers">
<h5 align="left">Atteliers d'écriture & <br />
de pratique théâtrale</h5>
</div>

<div class="WebZK" id="Grands_projets">
<h5 align="left">Les grands projets</h5>
</div>

<div class="WebZK" id="Stages">
<h5 align="right">Les stages</h5>
</div>

<div class="WebZK" id="Boutique">
<h5 align="right">La boutique</h5>
</div>

<div class="WebZK" id="Contacts">
<h5 align="right">Contacts</h5>
</div>

<div class="WebZK" id="Plan_site">
<h5 align="right">Plan du site</h5>
</div>

<div id="Logo_anime"><img src="Images/Divers_elements/Cadres_Navigation/Logo_FondCadreNavig1.gif" width="370" height="250" alt="Logo_anime" /></div>

</body>

</html>

Si quelqu'un avait une idée, ça m'éviterait de continuer à arpenter désespérément la toile à la recherche d'une solution...

**Erwan31** · 01/10/2008, 13h12

Bonjour,
cela provient d'un problème de fusion des marges (l'espace supérieur correspond à la marge haute par défaut du h5), mais avant d'aller plus loin dans l'explication, tu dois savoir que tu as un certains
nombres de défaillances qui portent préjudice à l'ergonomie, l'accessibilité et au référencement de ton site.
Est ce que tu souhaites les connaitre et améliorer tous ces aspects de ton site en conséquence?

**CrazyHorse07** · 03/10/2008, 13h29

Merci beaucoup.

Grâce à toi j'ai pu résoudre le problème et obtenir la mise en page désirée.

J'ai ajouter les lignes suivantes à la définition de mon titre h5 dans ma feuille de style CSS WebZK associée à mes pages :

Code :

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

1
2
3
4
5
6
7
margin-top: 0px;
margin-bottom: 0px;
padding-top:0px;
padding-bottom: 0px;
border-top: 0px;
border-bottom: 0px;

J'ai essayé aussi la fonction overflow, mais ça m'a mis encore plus le bordel dans mes titres, alors je l'ai retirée.

Si tu as repéré d'autres erreurs qui pourraient me pauser des soucis à l'avenir, je veux bien deux trois conseils avisés.

J'ai découvert notamment, en parcourant le web à la recherche d'une solution pour le problème évoqué dans ce post, que je n'avais pas inséré un certain nombre de "définitions" à faire figurer en haut de chaque page. Ça à l'air un peu complexe et je n'ai pas vraiment eu le temps d'approfondir la question.

Décalage de certaines balises div selon Navigateur

Discussions similaires

Partager

Partager