5568 sujets

Sémantique web et HTML

[Résolu] Problèmes d'Affichage d'un menu sous Firefox

Bonsoir à tous,

je travail actuellement sur le dépoussierage d'un menu pour le site d'une communauté d'étudiant. Le site utilise à la base une multitude de table (jusqu'à 10 tables imbriquées les unes dans les autres Smiley langue ).
J'ai réussi a dégager completement le code afin d'avoir un code tout propre. Celui-ci fonctionne impeccablement sous IE mais pas sous FF (c'est bien la première fois d'ailleurs).
Avant de venir vous voir, j'ai fait validé mon code xhtml et css via le validateur du W3C. Les 2 codes sont valides...

voici un screen du rendu sous FF :
http://img182.imageshack.us/img182/5136/menuffbo3.jpg

et un screen de l'affichage désiré et tel qu'il apparait sous IE:
http://img256.imageshack.us/img256/4700/menuietz2.jpg

Maintenant voici le code du menu ainsi que le css :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
 <head>
  <title>Menu</title>
  <link href="_css/standard_new.css" rel="stylesheet" type="text/css" />
 </head>
<body background="_img/interface/background.gif">

<div class="left">
 <div class="left_interieur">
  <div  id="navigation">

  <!-- Bouton supérieur : Home - Agenda - Forum -->
  <div class="centrage">        
   <img src="_img/interface/left_rond_home.gif" alt="Home" width="35" height="52" border="0" />      
   <img src="_img/interface/left_rond_calendar.gif" alt="Calendrier" width="35" height="52" border="0" />
   <img src="_img/interface/left_rond_forum.gif" alt="Forum" width="35" height="52" border="0" />
  </div>
  
   <!-- Section -->
   <h1>Informations</h1>
   	<!-- Sous-Section Sans Liste-->
  <ul>
	<li><a href="main.php5?comite=cercle">Cercle</a></li>
	<li><a href="main.php5?comite=bapteme">Baptême</a></li>
	<li><a href="main.php5?comite=comites">Comités</a></li>
	<li><a href="main.php5?comite=activites">Activités</a></li>
  </ul>
   <!-- Section -->
   <h1>Activités</h1>
	<!-- Sous-Section Sans Liste-->
  <ul>
	<li><a href="main.php5?comite=culture">Culture</a></li>
	<li><a href="main.php5?comite=balef">Fêtes</a></li>
	<li><a href="main.php5?comite=folklore">Folklore</a></li>
	<li><a href="main.php5?comite=librex">Librex</a></li>
	<li><a href="main.php5?comite=revue">Revue</a></li>
	<li><a href="main.php5?comite=social">Social</a></li>
	<li><a href="main.php5?comite=sports">Sports</a></li>
	<li><a href="main.php5?comite=voyages">Voyages</a></li>
  </ul>
   <!-- Section -->
   <h1>Publications</h1>
	<!-- Sous-Section Sans Liste-->
  <ul>
	<li><a href="main.php5?comite=ssb">Annuaire (SSB)</a></li>
	<li><a href="main.php5?comite=caducee">Caducé</a></li>
	<li><a href="main.php5?comite=ges">Cours - Ges</a></li>
	<li><a href="main.php5?comite=photos">Photos</a></li>
  </ul>
   <!-- Section -->
   <h1>Services</h1>
	<!-- Sous-Section Sans Liste-->
  <ul>
	<li><a href="main.php5?comite=bar">Bar</a></li>
	<li><a href="main.php5?comite=bd">Bédéthèque</a></li>
	<li><a href="main.php5?comite=erasmus">Erasmus</a></li>
	<li><a href="main.php5?comite=ssj">SSJ - Stages</a></li>
  </ul> 
  <!-- Fin du Code -->
  </div>
 </div>
</div>
</body>
</html>


CSS :


body,div,span,th,td,p
{
	font-family:Verdana,Helvetica,"MS Sans Serif", Geneva, Arial,sans-serif;
	font-size:12px;
	margin:0px;
}

.left
{
	background-color:#EBEBEB;
	color:#000000;
	width:122px;
	height:inherit;
	float:none;
}

.left_interieur
{
	width:114px;
	float:none;
	border-right-color:#000000;
	border-right-style:solid;
	border-right-width:1px;
}

#navigation h1
{
	font-size:10px;
	font-weight:bold;
	color:black;
	background-color:#CCCCCC;
	background: url(../_img/interface/left_menu_titre.gif) no-repeat;
	height:22px;
	line-height:22px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0px;
	margin-top:0px;
	width:114px;
	text-align:center;
}

#navigation ul
{
	margin-left:0px;
	padding-left:0px;
	text-indent:15px;
	margin-bottom:0px;
	padding-bottom:0px;
	margin-top:0px;
	padding-top:0;
}

#navigation li
{ 
	color:black;
	font-size:10px;
	font-weight:bold;
	list-style-type:none;
	float:left;
	height:15px;
	line-height:15px;
	list-style-position:inside;
}
	#navigation li a
	{ 
		color:black;
		font-size:10px;
		font-weight:bold;
		text-decoration:none;
		list-style-type:none;
		background: url(../_img/interface/left_menu_square_list.jpg) no-repeat left;
		float:left;
		height:15px;
		line-height:15px;
		width:114px;
		border-bottom-color:#CCCCCC;
		border-bottom-style:solid;
		border-bottom-width:1px;
		border-top-color:#FFFFFF;
		border-top-style:solid;
		border-top-width:1px;
	}
	#navigation li a:hover
	{
		color:black;
		background-color:#EBEBEB;
		font-size:10px;
		font-weight:bold;
		text-decoration:none;
		list-style-type:none;
		background: url(../_img/interface/left_menu_square_list_over.jpg) no-repeat left;
		float:left;
		height:15px;
		line-height:15px;
		width:114px;
		border-bottom-color:#CCCCCC;
		border-bottom-style:solid;
		border-bottom-width:1px;
		border-top-color:#FFFFFF;
		border-top-style:solid;
		border-top-width:1px;
	}

.centrage
{
	text-align:center;
}


Jusqu'à présent la seule solution (mais que ne me convient pas) que j'ai pu trouvé sans pour autant pouvoir en tirer une solution alternative, c'est de mettre un espace (&nbsp;) ou un paragraphe blance (<p></p>). Le menu s'affiche alors normalement avec un espace entre les titres et les menus ...

Si quelqu'un pourrait eclairer ma lanterne.
D'avance merci
Modifié par Kent (10 Feb 2007 - 16:34)
Bonjour,

Il y a des révisions à faire sur les propriétés des css !!
http://wiki.media-box.net/documentation/css et sur leurs utilisations
http://css.alsacreations.com/

.left
{
	background-color:#EBEBEB;
	color:#000000;
	width:122px;
}

.left_interieur
{
	width:114px;
	margin: auto;
	border-right:1px solid #000;
	border-left:1px solid #000;
}

#navigation h1
{
	font-size:10px;
	font-weight:bold;
	color:black;
	background-color:#CCCCCC;
	height:22px;
	line-height:22px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0px;
	margin-top:0px;
	width:114px;
	text-align:center;
}

#navigation ul
{
	margin: 0;
	padding: 0;
	list-style-type:none;	
   	width:114px;
	margin: auto;

}

#navigation li a
{	
	display: block;
	color:black;
	font-size:10px;
	font-weight:bold;
	text-decoration:none;
	height:15px;
	line-height: 15px;
	padding-left: 15px;
	background: yellow;
	border-bottom:1px solid #CCCCCC;
	border-top-color:1px solid #FFF;
}

	#navigation li a:hover
{
	background-color:red;
}

.centrage
{
	text-align:center;
}
je check ça dès ce soir (et moi qui croyait avoir une source css correcte mis à part les avertissements habituel concernant les couleurs de fond...), d'avance merci pour ta réponse en espérant que cela pourra faire avancer le schmilblik.

Bonne journée
Toujours le meme soucis, meme apres le remaniement du code css ...

je seche méchament là :s

si l'un d'entre vous aurait un briquet pour allumer ma chandelle ...
Bonjour,

Le bout de css que j'ai posté fonctionne chez moi en local pour FF IE7 à 6, il y aurait 4 modifs à faire pour IE5.5 !!
je me replonge dans ce bout de code des ce soir Smiley lol

en tout cas d'ores et déjà merci pour le coup de main Smiley cligne
MERCI Ghost,

ai finalement réussi a afficher correctement ce menu.

Un tout grand merci pour ton aide
C'est moi qui ait loupé l'explication, ou bien aucune n'a été donnée ? Si c'est le cas, c'est un peu dommage.

À vue de nez, il s'agissait d'un problème de dépassement de flottants : les li flottants dépassent de leur conteneur (ul, puis div...).
Bonjour,

C'était un peu de tout ça à la fois et plus encore ... Donc je lui ai donné un gabarit de code et les liens qui vont pour "réviser"
Sujet clos
Aller à