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 :
Si quelqu'un avait une idée, ça m'éviterait de continuer à arpenter désespérément la toile à la recherche d'une solution...
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>
Partager