Bonjour,
Ceux qui m'avaient aidé ici même à refaire le design de mon site pour qu'il soit conforme aux normes du W3C seront peut-être étonnés que je recommence ce codage. C'est en fait toput simple : j'ai fait un stage en entreprise, j'ai énormément progressé, et je pense donc être capable de "pondre" un bien meilleur code.
Je suis d'ores et déjà confronter à un problème que je ne sais pas régler à part en le détournant.
Voici la structure de ma page :
et la CSS :
Voici mon problème :
Il se trouve que sous Firefox, le margin-top de #menu-horizontal est appliqué par rapport au haut de la page.
Alors que sous IE6, il est appliqué par rapport au bas de la DIV (clear-both) qui se trouve juste au dessus.
Il y a donc 60 pixels environ de différence entre les 2 browsers pour l'apllication de ce margin...
Pour avoir un résultat semblable, il faut un margin de 10px sous IE et un de 70px sous firefox.
Bon, les solutions qui se présentent pour corriger le problème ne manquent pas...je n'en ai pas essayer, car je voudrai comprendre ce problème avant !
STOP !
Je m'apprête à poster et je viens de penser à uen chose : ma div "clear-both" est vide. Je rajoute donc un espace et tout est réglé.
Non pas tout, puisque cet espace a une hauteur, pour la diminuer, il suffit de changer la taille de la font...
Mon problème est donc résolu, mais est-ce la bonne solution ?
Firefox n'interprète pas les DIV "vides" ? C'est bien ça ?
Modifié par Graph-Site (25 Jan 2007 - 12:19)
Ceux qui m'avaient aidé ici même à refaire le design de mon site pour qu'il soit conforme aux normes du W3C seront peut-être étonnés que je recommence ce codage. C'est en fait toput simple : j'ai fait un stage en entreprise, j'ai énormément progressé, et je pense donc être capable de "pondre" un bien meilleur code.
Je suis d'ores et déjà confronter à un problème que je ne sais pas régler à part en le détournant.
Voici la structure de ma page :
<!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" xml:lang="fr" >
<head>
<link rel="stylesheet" type="text/css" href="design/style.css" media="screen" />
</head>
<body>
<div id="conteneur">
<img id="logo" src="design/img/logo.gif" alt="" />
<img id="pub" src="http://www.graph-site.net/img/pubcrealeg.gif" alt="" />
<div class="clear-both"></div>
<div id="menu-horizontal">
<strong>
<a class="menu" href="http://www.graph-site.net/index.php" target="_self">Home</a>
<a class="menu" href="services.php" target="_self">Services</a>
<a class="menu" href="ressources.php" target="_self">Ressources graphiques</a>
<a class="menu" href="tutoriaux.php" target="_self">Tutoriaux</a>
<a class="menu" href="annuaire-du-webmaster.php" target="_self">L'annu du webmaster</a>
<a class="menu" href="forum.php" target="_self">Forum</a>
</strong>
</div>
</div>
</body>
</html>
et la CSS :
html, body {
padding: 0px;
margin: 0px;
background-color: #E3E3E7;
font: normal normal normal 12px/normal Verdana, Geneva, Arial, Helvetica, sans-serif;
}
a {
color: #385A02;
text-decoration: none;
}
a:hover {
color: #7D9F05;
text-decoration: none;
}
a.menu {
color: #000066;
font-size: 14px;
}
a:hover.menu {
color: #7D9F05;
}
#conteneur {
padding:5px 5px 0px 5px;
margin: 3px 0px 0px 0px;
}
#logo {
float: left;
border-width:0px;
margin:0px;
}
#pub {
float: right;
border-width: 0px;
margin: 0px 30px 0px 0px;
}
#menu-horizontal {
margin: 10px 0px 8px 12px;
}
.clear-both {
clear: both;
}
Voici mon problème :
Il se trouve que sous Firefox, le margin-top de #menu-horizontal est appliqué par rapport au haut de la page.
Alors que sous IE6, il est appliqué par rapport au bas de la DIV (clear-both) qui se trouve juste au dessus.
Il y a donc 60 pixels environ de différence entre les 2 browsers pour l'apllication de ce margin...
Pour avoir un résultat semblable, il faut un margin de 10px sous IE et un de 70px sous firefox.
Bon, les solutions qui se présentent pour corriger le problème ne manquent pas...je n'en ai pas essayer, car je voudrai comprendre ce problème avant !
STOP !
Je m'apprête à poster et je viens de penser à uen chose : ma div "clear-both" est vide. Je rajoute donc un espace et tout est réglé.
Non pas tout, puisque cet espace a une hauteur, pour la diminuer, il suffit de changer la taille de la font...
Mon problème est donc résolu, mais est-ce la bonne solution ?
Firefox n'interprète pas les DIV "vides" ? C'est bien ça ?
Modifié par Graph-Site (25 Jan 2007 - 12:19)