Menu inactif sous Mozilla/Firefox

Question

dbee

29 Jun 2005 à 18:39

Bonjour à tous Smiley smile

Déja, bravo pour ce site et ce forum qui sont une source précieuse d'infos sur l'utilisation des standards web. Je me suis lancée pour une 1ère mise en page en <div> et en css dont voici le résultat :
http://www.contrezut.com/css/

Le 1er essai que j'ai tenté en 2 colonnes collait parfaitement sous Mozilla/Firefox, mais toute l'interface se décalait sous IE, malgré des réglages differents. Le menu marchait parfaitement dans les 3 navigateurs, bien que très allongé sous IE

J'ai donc tenté un 2ème découpage de page avec 2 colonnes + 1 pied de page (contenant l'image du bas qui était coupée en 2 ds l'essai précédent), et ds ce cas là l'affichage est correct dans chaque navigateur, mais la navigation ne fonctionne plus du tout sous Mozilla/Firefox. Pas de survol, aucune réaction. Apparemment ce sont les deux derniers div (ban et bottom) qui cause le conflit puisq qd je les retire, le menu est à nouveau réactif. Comment puis-je corriger cela?
Merci de votre aide !!

Voila le code de ma page :


 <body>

<div id="page"> 
  <div id="main"> 
    <div id="content"> 
      <?php 
if (!isset($_GET['page'])) $page= 'accueil'; else $page= $_GET['page']; 
 switch($page)
{
case 'actu': include ('actu.txt');break;
case 'contrezut': include ('contrezut.txt');break;
case 'direction':include ('direction.txt');break;
case 'repertoire':include ('repertoire.txt');break;
case 'liens':include ('liens.txt');break;
case 'contact':include ('contact.txt');break;
} 
?>
    </div>
  </div>
  <!-- barre droite -->
  <div id="sidebar"> 
    <div id="logo"><span><img src="imgs/logo.gif"></span></div>
    <!-- navigation verticale -->
    <ul id="navbox">
      <li><a href="index.php?page=actu">Actu</a></li>
      <li><a href="index.php?page=contrezut">Contre-Z'Ut</a></li>
      <li><a href="index.php?page=direction">Direction</a></li>
      <li><a href="index.php?page=repertoire">Répertoire</a></li>
      <li><a href="index.php?page=liens">Liens</a></li>
      <li><a href="index.php?page=contact">Contact</a></li>
    </ul>
    <div id="contrezut"><span><img src="imgs/photo.jpg"></span></div>
  </div>
  <!-- bas de page -->
  <div id="ban"><span><img src="imgs/ban_bas.jpg"></span></div>
  <div id="bottom">© 2005 Tous droits réservés Contrezut - Crédits </div>
</div>

</body>

et celui de la css :


/* --- 
LAYOUT 
--- */
body{
	text-align: center;
	padding: 0 ;
}

#page{
	position: relative;
	width: 760px !important;
	width: 762 px;/*pour IE*/
	margin: 0 auto;
	color: inherit;
	text-align: left;
	border: 1px solid #CCCCCC;
	-moz-border-radius: 0px;
}

#main{
	position: relative;
	width: 520px;	height: 488px;
	background: url(imgs/ban_fond.jpg) no-repeat right bottom;
	float: left;
	/*overflow: auto;*/
	}

#content{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	margin: 20px;
}

#sidebar{
	width: 240px;
	height:  488 px;
	background: #FFF url(imgs/ban.gif) repeat-y;
	float: right;
	}

#ban{
	display: block;
	position: relative;
}

#bottom{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: xx-small;
	color: #999999;
}

/* --- 
NAVIGATION VERTICALE
--- */	
ul#navbox {
	clear: both;
	margin: 0;
	padding: 0;
	list-style-type : none;
	height: 228px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: bold;
	}

ul#nav-box li {
	padding : 3px 0;
}
	
ul#navbox li a {
	display: block;
	color: #666666;
	text-decoration: none;
    background: transparent url(imgs/ban.gif) left center no-repeat;
     padding-left: 40px;
}
ul#navbox li a:hover {
	color: #F63;
	background: url(imgs/select.gif) no-repeat left; 
}

Modifié par dbee (29 Jun 2005 - 18:41)

Sujet clos