Bonjour à tou(te)s.
Je suis actuellement en train de coder une page (aperçu ici).
Comme vous pouvez vous en apeçevoir lorsque vous passez la même page dans Firefox et IE, avec ce dernier, il subsiste un problème au niveau de la barre de login (en jaune tout en bas, repérée par un cadre rouge). Sous IE, cette div est décallée légèrement vers le haut, alors que son contenu, lui, possède les même marges (visibles) sous les deux browsers.
Ça me semble louche, car j'ai codé 'en dur' les dimensions de chaque div et ces dernières se trouvent entièrement intégrées dans une div conteneur elle aussi aux dimensions fixes.
Je précise, que dès le début de la CSS, je force les marges et le padding à zéro.
Bref, en théorie, avec les dimensions des divs codées en dur (px) et les marges de ces même divs à zéro, je me demande bien comment ce cher IE réussit à me superposer deux divs.
Je pense qu'il doit s'agir d'un problème au niveau de a déclaration de certaines divs en absolu et d'autres laissées en statique.
Can you help me ?
D'ordinaire je réussi à trouver une solution, une parade à ce genre de problème de marges, mais là... bonbon et un insupportable sentiment de frustration s'empare de moi.
Voici le code :
et la CSS :
Voilà. Comme ce projet est assez pressé, je vais essayer de trouver un compromis en attendant, mais cela risque de s'éloigner du rendu attendu initialement.
Je remercie donc par avance tou(te)s ceux (celles) qui seront prêt(s) à me filer un petit coup de main
Modifié par Nawak() (08 Jun 2006 - 20:33)
Je suis actuellement en train de coder une page (aperçu ici).
Comme vous pouvez vous en apeçevoir lorsque vous passez la même page dans Firefox et IE, avec ce dernier, il subsiste un problème au niveau de la barre de login (en jaune tout en bas, repérée par un cadre rouge). Sous IE, cette div est décallée légèrement vers le haut, alors que son contenu, lui, possède les même marges (visibles) sous les deux browsers.
Ça me semble louche, car j'ai codé 'en dur' les dimensions de chaque div et ces dernières se trouvent entièrement intégrées dans une div conteneur elle aussi aux dimensions fixes.
Je précise, que dès le début de la CSS, je force les marges et le padding à zéro.
Bref, en théorie, avec les dimensions des divs codées en dur (px) et les marges de ces même divs à zéro, je me demande bien comment ce cher IE réussit à me superposer deux divs.
Je pense qu'il doit s'agir d'un problème au niveau de a déclaration de certaines divs en absolu et d'autres laissées en statique.
Can you help me ?
D'ordinaire je réussi à trouver une solution, une parade à ce genre de problème de marges, mais là... bonbon et un insupportable sentiment de frustration s'empare de moi.
Voici le code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Forum Apprentissage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="themes/classic/screen.css" media="screen" />
</head>
<body>
<div id="conteneur">
<div id="header">
<a href="#contenu" title="Aller au contenu">aller au contenu</a>
<a href="index.html" title="Aller à la page d'accueil">page d'accueil</a> </div>
<div id="login">
<form method="post" action="" enctype="multipart/form-data">
<fieldset>
<label>Identifiant</label><input name="" type="text" />
<label>Mot de passe</label><input name="" type="password" />
<input class="bouton" name="" type="submit" value="Valider" />
<a href="" title="Si vous avez oublié votre mot de passe, cliquez ici">Mot de passe oublié ?</a>
</fieldset>
</form>
</div>
<a name="contenu"></a>
<div id="descriptionForum">
<a href="infosForum.php" title="Voir les infos sur le forum Apprentissage">Informations Forum</a>
<a href="presentationSRC.php" title="Présentation de la formation SRC">Présentation de la formation <acronym title="Services et Réseaux de Communication">SRC</acronym></a>
<a href="presentationAlt.php" title="Présentation de l'alternance">Présentation de l'alternance</a>
<a href="ppdm.php" title="Visualiser le programme de la formation">Programme <acronym title="Services et Réseaux de Communication">SRC</acronym></a>
<p><strong>Bienvenue sur le site du Forum Apprentissage.</strong></p>
<p>Cet évènement a pour but de promouvoir la formation <acronym title="Diplôme Universitaire de Technologie">DUT</acronym> Services et Réseaux de Communication (<acronym title="Services et Réseaux de Communication">SRC</acronym>) par alternance.</p>
<p>Elle ouvre des voies de formations dans des domaines divers et souvent complémentaires tels que la communication, la programmation objet et événementielle, l’infographie ou encore l’audiovisuel.</p>
</div>
<div id="menuContextuel">
<ul id="etudiants">
<li><a href="#" title="Déposer son CV">Déposer son CV</a></li>
<li><a href="#" title="Espace de discussion">Espace de discussion</a></li>
</ul>
<ul id="entreprises">
<li><a href="#" title="Pré-inscriptions">Pré-inscriptions</a></li>
<li><a href="#" title="Entreprises inscrites">Entreprises inscrites</a></li>
<li><a href="#" title="Consultation de CV">Consultation de CV</a></li>
</ul>
</div>
<div id="affiche"> </div>
<div id="footer">
<a href="accessibilite.html" title="Voir la politique d'accessibilité">Politique d'accessibilité</a> -
<a href="planSite.html" title="Voir le plan du site">Plan du site</a> -
<a href="mailto:mail@webmaster.fr" title="Envoyer un e-mail au webmaster">Contacter le webmaster</a> </div>
</div>
</body>
</html>
et la CSS :
/* CSS Document */
/*div{border: 1px solid red;}*/
*{
color: #ffffff;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 0.95em;
margin: 0;
padding: 0;
text-decoration: none;
}
body{
background: #B679B5;
}
#conteneur{
border: 1px solid #fadc17;
height: 648px;
margin-top: -324px;
margin-left: -390px;
position: absolute; top: 50%; left: 50%;
width: 780px;
}
#header{
background: url(images/bg_headerAccueil.png) no-repeat #68066c;
height: 98px;
padding-left: 570px;
width: 210px;
}
#header a:link, #header a:visited{
color: #68066c;
font-size: 0.85em;
margin: 0.5em 0 0 1em;
}
#header a:hover, #header a:active{
text-decoration: underline;
}
#login{
border: 1px red solid;
background: url(images/bg_login.png) repeat-x #f8da16;
height: 37px;
position: absolute; bottom: 0; left: 0;
width: 780px;
}
#login a:link, #login a:visited{
color: #68066c;
font-size: 0.85em;
margin-right: 0;
}
#login a:hover, #login a:active{
text-decoration: underline;
}
#login fieldset{
border: 1px red solid;
margin: 10px 0 20px 0;
}
#login input{
background: #68066c;
border: 0;
vertical-align: middle;
padding: 0.25em;
}
#login input.bouton{
margin: 0 1em 0 1em;
}
#login input.bouton:hover{
color: #d59dd8;
}
#login label{
color: #68066c;
font-size: 0.85em;
margin: 0 0.5em 0 0.5em;
}
#descriptionForum{
background: url(images/bg_descriptionForum.png) no-repeat #68066c;
height: 486px;
position: absolute; left: 0;
width: 260px;
}
#descriptionForum a:link, #descriptionForum a:visited{
display: block;
font-family: arial, helvetica, sans-serif;
font-weight: bold;
line-height: 29px;
text-indent: 1em;
text-transform: uppercase;
}
#descriptionForum a:hover, #descriptionForum a:active{
color: #e2dfe3;
}
#descriptionForum p{
line-height: 1.7em;
margin: 2em 1em 0 1em;
text-align: justify;
text-indent: 1em;
}
#menuContextuel{
background: url(images/bg_bandeauVertical.png) no-repeat #68066c;
height: 486px;
position: absolute; right: 0;
width: 184px;
}
#menuContextuel a:link, #menuContextuel a:visited{
display: block;
font-family: arial, helvetica, sans-serif;
font-weight: bold;
line-height: 25px;
text-indent: 1em;
text-transform: uppercase;
}
#menuContextuel a:hover, #menuContextuel a:active{
background: #68066c;
}
#menuContextuel li{
list-style: none;
list-style-position: inside;
}
#menuContextuel li:hover{
background: #68066c;
}
#menuContextuel ul#etudiants{
height: 70px;
margin-top: 140px;
}
#menuContextuel ul#entreprises{
margin-top: 150px;
}
#affiche{
background: url(images/bg_afficheAccueil.png) no-repeat #f8da16;
height: 486px;
margin-right: 184px;
margin-left: 260px;
width: 336px;
}
#footer{
background: url(images/bg_footerAccueil.png) no-repeat #68066c;
color: #d59dd8;
height: 27px;
position: absolute; left: 0;
text-align: center;
width: 780px;
}
#footer a:link, #footer a:visited{
color: #d59dd8;
font-size: 0.8em;
margin: 0.5em;
}
#footer a:hover, #footer a:active{
color: #f3c6f5;
}
Voilà. Comme ce projet est assez pressé, je vais essayer de trouver un compromis en attendant, mais cela risque de s'éloigner du rendu attendu initialement.
Je remercie donc par avance tou(te)s ceux (celles) qui seront prêt(s) à me filer un petit coup de main
Modifié par Nawak() (08 Jun 2006 - 20:33)