|
La Communauté Webmaster 
| Pages: [1] |
 |
|
|
|
 Auteur |
Sujet: Décalage vers le bas avec Firefox (Lu 1176 fois) |
|
 |
Décalage vers le bas avec Firefox
« sur: le 29-09-2008 a 15:04:26 » |
|
CrazyHorse07
Membre récent
 Hors-Ligne
Messages: 3
Je suis un lama!
|
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 :
<!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... |
|
|
|
|
|
|
 |
Re:Décalage vers le bas avec Firefox
« Répondre #1 sur: le 30-09-2008 a 18:03:12 » |
|
|
|
|
|
Re:Décalage vers le bas avec Firefox
« Répondre #2 sur: le 30-09-2008 a 18:11:28 » |
|
|
|
|
|
Re:Décalage vers le bas avec Firefox
« Répondre #3 sur: le 03-10-2008 a 13:21:55 » |
|
|
|
|
| Pages:
[1] |
 |
|
|
| |
|
|
