28173 sujets

CSS et mise en forme, CSS3

Position de menu decale sous FF

Bonjour,

J'ai un petit souci avec mon menu dont voici les codes.

Il s'affiche correctement sous IE mais une barre entre mon entete et mon menu "s'insere" entre le menu et mon entete sous Firefox (pour une fois).

D'où mes questions :

1 - Comment réduire la taille du menu sur sa hauteur et comment éliminer ce petit souci sous FF.

2 - Si une ame charitable peut m'expliquer le pourquoi de ce petit souci, et a l'occasion m'expliquer les fonctions navlist et leurs differences (je les ai utilisées pour la 1e fois) : ce serait formidable.

Merci a tous par avance du temps consacre a l'étude de ce post.

Code html :

<!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>AB CS... ... </title>
<style type="text/css" media="screen">@import url(menuaccueil.css);</style>           
</head>

<body>
<div class="conteneur">
<div class="banniere">
  <div class="logo"> <img src="file:///C|/AtoutBio/images/tournesolentete.jpg" alt="Grenouille" width="247" height="100" /></div>
  <div class="tournesol"><img src="file:///C|/AtoutBio/images/tournesold.jpg" alt="Fleur Tournesol" width="191" height="100" /></div>
</div>
<div class="hautmenu">
  <div id="navcontainer">
    <ul id="navlist">
      <li id="active"><a href="#" id="current">Accueil</a></li>
      <li><a href="#">Menu A</a></li>
      <li><a href="#">Menu B;</a></li>
      <li><a href="#">Menu C</a></li>
      <li><a href="#">Menu D</a></li>
    </ul>
  </div>
</div>
<div class="gauche">
<h3>menu</h3>
<ul>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul>
</div>

<div class="corps"><p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>
ErrorDocument 401  http://401.html  <cite>=> Erreur 401 accès non autorisé.</cite></p>
  <p>  ErrorDocument 402  http://402.html  <cite>=> Erreur 402 reformuler votre paiement.</cite><br/>
    ErrorDocument 403  http://403.html  <cite>=> Erreur 403 accès interdit.</cite><br/>
    ErrorDocument 404  http://404.html  <cite>=> Erreur 404 non trouvé.</cite><br/>
    ErrorDocument 500  http://500.html  <cite>=> Erreur 500 erreur interne.</cite></p>
  <span class="tire"></span>
../..
</div>
<div class="pied">
  <p>Pied de page... ... ... </p>
</div>
</div>

</body>
</html>


Code CSS externe 

#navlist ul
{
margin: 0;
white-space: nowrap;
padding: 0;
}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a
{
padding: 1px 8px 1px 24px;
border: 1px solid #333;
background-color: #999;
background-image: url(images/l1_down.gif);
}

#navlist a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#navlist a:hover
{
border: 1px solid #333;
background-color: #FF6600;
background-image: url(images/l1_over.gif);
color: #333;
}

#active a:link, #active a:visited, #active a:hover
{
border: 1px solid #333;
background-color: #FF6600;
background-image: url(images/l1_over.gif);
color: #333;
}

<style type="text/css" media="screen">
body {margin:10px;}
div.conteneur {border:1px solid #666;background-color:gray;}
div.banniere {background-image:url(file:///C|/AtoutBio/images/degradentete.jpg);height:100px;border-bottom:1px solid #666;}
div.logo {position:absolute;}
div.tournesol {position:absolute; right:10px;}
div.hautmenu {height:30px; background-color:#66FF00;}

div.gauche {width:140px;float:left;margin-bottom:-1.2em;padding:5px;padding-top:30px;}
div.corps {margin-right:0;margin-left:150px;border-left:1px solid #666;padding:5px;background-color:white;}
div.pied {background-color:yellow;height:30px;border-top:1px solid #666;line-height:30px;text-align:center} 
.tire {clear:both;padding:0 5px;display:block;}
h1, p{margin:0;}
</style>
Sujet clos
Aller à