28220 sujets

CSS et mise en forme, CSS3

Bonjour

J'ai trouvé de bonnes idées ici pour faire un menu horizontal déroulant à une ligne. Les items du menu sont des images avec rollOver dessus.
Quand on passe sur une des images du niveau 1 ça fait apparaître une ligne de sous menus. Tout fonctionne sauf que Firefox affiche des décalages. Sur IE c'est calé, mais c'est peut être parce que j'ai commencé par calé mon menu sur IE Smiley cligne

Voici mon script :

<div class="menuhaut">  
	<dt onmouseover="montre('smenu1');"><a class="navSociete" href="#"></a> </dt>
		<dd id="smenu1">
						<a class="navEngagements" href="#"></a>
						<a class="navClients" href="#"></a>		
		</dd>
	<dt onmouseover="montre('smenu2');"><a class="navMetiers" href="#"></a> </dt>
		
  <dd id="smenu2"> 
    <ul>
						<li><a href="#">Sous-menu 1.1</a></li>
						<li><a href="#">Sous-menu 1.2</a></li>
					</ul>
		</dd>
</div>


et la css (avec un peu de javascript) :


<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">

.menuhaut {
	width: 710px; 
	text-align: left;
	height: 60px;
	white-space: nowrap; 
	border: 0px solid gray;
}

.menuhaut a {
text-decoration: none; /* pour éviter le soulignement au survol */margin-left: 0px; /* espacement entre chaque sous-menu */}

#smenu1 {
	position: absolute;
	left: 10px;
	top: 43px;
	border: 1px solid #10B0EF;
	text-align: left;
	height: 15px;
	white-space: nowrap;

}

#smenu2 {
	position: absolute;
	left: 11px;
	top: 43px;
	border: 1px solid #FF9933;
	width: 400px;
	text-align: left;
	height: 30px;
	white-space: nowrap;
	
}


a.navSociete:hover { /* définition de la classe "image" de la balise <a> au survol */
     background-image: url(images/titre_navig_societe_on.gif); /* source de l'image d'arrivée */
} 

a.navSociete { /* définition de la classe "image" de la balise <a> */
     float: left; /* la balise a doit être en bloc */
     width: 254px; /* largeur de l'image réactive */
     height: 28px; /* hauteur de l'image réactive */
     background-image: url(images/titre_navig_societe_off.gif); /* source de l'image de départ */
     background-repeat: no-repeat;
}

a.navMetiers:hover { /* définition de la classe "image" de la balise <a> au survol */
    background-image: url(images/titre_navig_metiers_on.gif); /* source de l'image d'arrivée */
} 

a.navMetiers { /* définition de la classe "image" de la balise <a> */
   	 float: left;/* la balise a doit être en bloc */
     width: 255px; /* largeur de l'image réactive */
     height: 28px; /* hauteur de l'image réactive */
     background-image: url(images/titre_navig_metiers_off.gif); /* source de l'image de départ */
     background-repeat: no-repeat;
}

a.navEngagements:hover { /* définition de la classe "image" de la balise <a> au survol */
     background-image: url(images/titre_navig_engagements_on.gif); /* source de l'image d'arrivée */
} 

a.navEngagements { /* définition de la classe "image" de la balise <a> */
     float: left; /* la balise a doit être en bloc */
     width: 153px; /* largeur de l'image réactive */
     height: 16px; /* hauteur de l'image réactive */
     background-image: url(images/titre_navig_engagements_off.gif); /* source de l'image de départ */
     background-repeat: no-repeat;
}

a.navClients:hover { /* définition de la classe "image" de la balise <a> au survol */
     background-image: url(images/titre_navig_nosclients_on.gif); /* source de l'image d'arrivée */
} 

a.navClients { /* définition de la classe "image" de la balise <a> */
     float: left; /* la balise a doit être en bloc */
     width: 153px; /* largeur de l'image réactive */
     height: 16px; /* hauteur de l'image réactive */
     background-image: url(images/titre_navig_nosclients_off.gif); /* source de l'image de départ */
     background-repeat: no-repeat;
}
</style>


Merci d'avance pour votre aide
Philippe