Titre: Décalage vers le bas avec Firefox
Posté par: CrazyHorse07 le le 29-09-2008 a 15:04:26
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 (http://zarinakhan.org/Test_Accueil.html).
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... |
Titre: Re:Décalage vers le bas avec Firefox
Posté par: h4ck.n3t le le 30-09-2008 a 18:03:12
En fait moi c'est l'inverse...
Sous IE, il m'affiche des marges grises affreuses, alors que sous Firefox il n'y a rin...
Quel est exactement le problème ? |
Titre: Re:Décalage vers le bas avec Firefox
Posté par: CrazyHorse07 le le 30-09-2008 a 18:11:28
Le problème c'est qu'il y a une marge invisible (laissant apparaître l'image de fond) d'une quinzaine de pixels qui me décale toutes mes balises div vers le bas, sauf celle contenant le gif animé du logo.
J'ai essayé de voir si il y avait une différence de code entre les layers, mais je ne vois pas pourquoi la fonction top: 0px foncionne pour mon logo et pas pour les autres balises.
De plus, ce qui est étrange, c'est que les balises contenant les titres gardent entre elles l'espace que j'avais programmé pourtant avec la fonction top, et position: absolute !
Je ne comprends pas d'où vient le problème... |
Titre: Re:Décalage vers le bas avec Firefox
Posté par: CrazyHorse07 le le 03-10-2008 a 13:21:55
Voilà, j'ai résolu le problème en ajoutant ceci à la définition de mon titre h5 dans ma feuille de style CSS WebZK :
Code:
margin-top: 0px;
margin-bottom: 0px;
padding-top:0px;
padding-bottom: 0px;
border-top: 0px;
border-bottom: 0px;
|
|
Maintenant j'obtiens la mise en page voulue sur tous les navigateurs. |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|