18041 sujets

Questions générales et questions de débutants

Menu déroulant sous Firefox et déroutant sous IE

Bonjour,
Pour me faire la main, je me suis lancé dans la réalisation d'une menu déroulant en xhtml et css. Dans FIrefox, les menus déroulant apparaissent par dessus l'image de fond, comme je le veux, mais dans IE7, ils la repousse et casse complètement la page. J'ai essayé de mettre "position: absolute;" sur l'imag de fond, mais dans ce cas les menus se déroulent sous l'image (y compris dans Firefox. Je suis la dessus depuis bien 24 heures (bon, d'accord, j'ai dormi aussi un peu Smiley cligne mais rien à faire, je n'arrive pas à trouver la solution. Quelqu'un peut-il venir à mon secours ?

La page est là : http://equipageinfo.site.voila.fr/

Et voici le fichier xhtml:


<!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" >
   
   <head>
       <title>Equipage informatique 2.0</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="design" href="style/design.css" />
   </head>
   
   <body>
  
	<div id="en_tete">
   <!-- Ici on mettra la bannière -->
	</div>
 
   <!-- Début du menu déroulant-->
   <div id="menu">
   <ul id="menuDeroulant">
			<li><a href="#">Notre société</a>
				<ul class="sousMenu">
					<li><a href="#">Mot du président</a></li>
					<li><a href="#">L'entreprise</a></li>
					<li><a href="#">Notre équipe</a></li>
					<li><a href="#">Chiffres clés</a></li>
					<li><a href="#">Nos références</a></li>
					<li><a href="#">Nos partenaires</a></li>
				</ul>
			</li>
				
			<li><a href="#">Nos services </a>
				<ul class="sousMenu">	
					<li><a href="#">Audit</a></li>
					<li><a href="#">Conseil avant-vente</a></li>
					<li><a href="#">Conseil infrastructure</a></li>
					<li><a href="#">Distribution</a></li>
					<li><a href="#">Administration</a></li>
					<li><a href="#">Expertise</a></li>
					<li><a href="#">Gestion de projets</a></li>
					<li><a href="#">Installation déploiement</a></li>
					<li><a href="#">Help desk</a></li>
					<li><a href="#">Transfert de compétences</a></li>
					<li><a href="#">Support</a></li>
				</ul>
			</li>
			
			<li><a href="#">Actualités</a></li>
			
			<li><a href="#">Nous contacter</a></li>
			
			<li><a href="#">Recrutement</a>
				<ul class="sousMenu">
					<li><a href="#">La vie chez EI</a></li>
					<li><a href="#">Offres d'emploi</a></li>
					<li><a href="#">Les métiers</a></li>
				</ul>
			</li>
			
			<li><a href="#">Intranet</a>
				<ul class="sousMenu">
					<li><a href="#">Equipier</a></li>
					<li><a href="#">Client</a></li>
					<li><a href="#">Partenaires</a></li>
				</ul>	
			</li>
		</ul>
   
	</div>
 <!-- fin du menu déroulant) -->
	<div id="corps">
	
	</div>
	
	<div id="corpsbis">
		<h3>Bienvenue sur le site d'Equipage informatique<br/>
		spécialiste des systèmes de stockage, réseau et sécurité.</h3>
	</div>
	<div id="pied_de_page">
   <!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright... -->
		<p class="copyright">Copyright Equipage Informatique, tous droits réservés.</p>
	
	</div>

  
  
   </body>
</html>


ainsi que le fichier CSS:

body
{
   width: 780px;
   margin: auto; /* Pour centrer notre page */
   background-color: #999999;
   background-image: url("../images/lefond.png") ;
   background-repeat: repeat-y;
   background-position: center; /* aligner l'image de fond */
}

h3
{
   font-size: 18px;
   text-align: center;
   font-family: "Arial", Verdana, serif;
}

.copyright
{
	text-align: center;
	color: white; 
}

#en_tete
{
   height: 178px;
   background-image: url("../images/banniere.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0;
}
/* début du menu déroulant*/

#menuDeroulant
{
 text-align: center;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
 width: 780px;
 list-style-type: none;
 position: absolue;
 top: 0;
 left: 0;
}
#menuDeroulant li
{
 float: left;
 width: 130px;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant .sousMenu
{
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant .sousMenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
}

#menuDeroulant li a:link, #menuDeroulant li a:visited
{
 display: block;
 height: 1%;
 color: #FFF;
 background: #333366;
 margin: 0;
 padding: 2px 8px;
 border-right: 1px solid white;
 text-decoration: none;
}
#menuDeroulant li a:hover { background-color: black; }
#menuDeroulant li a:active { background-color: red; }
#menuDeroulant li a:visited { background-color: #333366; }

#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
 display: block;
 color: #FFF;
 margin: 0;
 border: 0;
 text-decoration: none;
 background: transparent url("../images/ft.png") repeat;
 }
#menuDeroulant .sousMenu li a:hover
{
 background-image: none;
 background-color: #999999;
}
#menuDeroulant .sousMenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
 width: 129px;
 border-top: 1px solid transparent;
 border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu
{
 display: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}

#menuDeroulant li:hover > .sousMenu 
{ display: block; 
}

/* Fin du menu déroulant */

#corps
{
   width: 780px;
   height: 370px;
   background-image: url("../images/equipagebis.jpg");
   margin-top:28px;
   margin-bottom: 0;
}

#corpsbis
{ 
	margin-top:50px; 
	height: 170px;
}

#pied_de_page
{
	background-color: black;
}


Je précise que c'est ma première page xhtml/css, il y a donc sans doute pas mal de maladresses...
Merci d'avance à ceux qui pourront m'aider
Jlr
Sujet clos
Aller à