28221 sujets

CSS et mise en forme, CSS3

Différence Menu dynamique IE, Firefox

Salut,

Tout d'abord, je tiens à féliciter l'auteur pour ce site, qui est une vrai mine d'info ! Smiley smile

Voilà, je suis en train de créer un menu dynamique horizontal (sur une seule ligne), sur la base de l'exemple fourni ici.

J'essaie de mettre une couleur de fond à ce menu, mais sans succès....
Dond j'ai pensé ajouter un bloc de couleur, en arrière plan.

Toutefois, si cette technique fonctionne sous IE, sous Firefox, ça ne fonctionne pas....

Pouvez-vous m'aider ?

Voilà le code : 


<!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>Menu horizontal déroulant sur une ligne en CSS</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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">
<!--
/* CSS issu des tutoriels  www.alsacreations.com/articles  */
body {margin-top: 0px;
padding: 0;
font: 0.8em Verdana, sans-serif;
text-align: center; /* pour corriger le bug de centrage IE */
}

dd {
list-style-type: none;
margin: 0 0px 0 0;
padding: 0;
background : #CCCCCC;
}

ul{
list-style-type: none;
margin: 0 0px 0 0;
padding: 0;
}

li {
list-style-type: none;
margin: 0 0px 0 0;
padding-left: 10px;
padding-right: 10px;
}


dl{
list-style-type: none;
}

dt{
list-style-type: none;
padding-left: 20px;
padding-right: 20px;
}

.m_gauche{
	padding-left : 65px;
	}


#global {
     position:absolute;
     left:50%;
	 width: 800px;
     height: 400px;
     margin-left: -400px; /* moitié de la largeur */
	 border: 1px solid #000;
	 }

#menu {
z-index : 2;
}

#menu dl {
float: left;
}
#menu li {
display: inline;
}

#menu a {
text-decoration: none;
color:#CC0000
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5 {
position: absolute;
left: 0;
font-size: 0.7em;
border-top: 1px solid;
border-color:#CC0000;
padding-top : 3px;
padding-bottom : 1px;
width: 800px;
}

#b_jaune{
	height : 15px;
	width : 800px;
	background : #FFCC66;
	z-index : 1;
	}



-->
</style></head>

<body>
<div id="global">
<div id="b_jaune"><div id="menu">
	<dl>
		<dt onmouseover="montre('smenu1');" class="m_gauche"><a href="#">Accueil</a></dt>
			</dl>
	
	<dl>			
		<dt onmouseover="montre('smenu2');"><a href="#">Programme</a></dt>
			<dd style="display: block;" id="smenu2">
				<ul>
					<li><a href="#">F&eacute;vrier</a></li>
					<li><a href="#">Mars</a></li>
					<li><a href="#">Avril</a></li>
					<li><a href="#">Mai</a></li>
					<li><a href="#">Juin</a></li>
					<li><a href="#">Juillet</a></li>
					
          <li><a href="#">Ao&ucirc;t</a></li>
					<li><a href="#">Septembre</a></li>
					<li><a href="#">Octobre</a></li>
					<li><a href="#">Novembre</a></li>
					<li><a href="#">D&eacute;cembre</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="montre('smenu3');"><a href="#">Infos pratiques</a></dt>
			
	</dl>
	
	<dl>	
		<dt onmouseover="montre('smenu4');"><a href="#">Le Département et le livre</a></dt>
			<dd style="display: none;" id="smenu4">
				<ul>
					<li><a href="#">Sous-menu</a></li>
					<li><a href="#">Sous-menu</a></li>
					<li><a href="#">Sous-menu</a></li>
				</ul>
			</dd>
	</dl>
	<dl>	
		<dt onmouseover="montre('smenu5');"><a href="#">Le monde du livre</a></dt>
			<dd style="display: none;" id="smenu5">
				<ul>
					<li><a href="#">Sous-menu</a></li>
					<li><a href="#">Sous-menu</a></li>
					<li><a href="#">Sous-menu</a></li>
				</ul>
			</dd>
	</dl>
	
</div>
</div>

</div>


</body></html>


Merci à vous
Buku
Bonjour et bienvenue à toi sur ce forum,

Il me semble que tu as d'abord un problème de marge, car sous Firefox comme sous Opera les textes contenus dans les dt se trouvent sous le bandeau de couleur Orange. Pour ce qui concerne les problèmes de marges tu devrais trouver ton bonheur dans la méthodologie en "post-it" de ce salon qui pointe en particulier sur un billet de Raphaël (Méthodologie pour résoudre les problèmes d'affichage en CSS).

Une fois ce problème résolu, tu ne devrais pas avoir besoin de rajouter un nouveau block pour la couleur de fonds, tu as déjà des éléments de types block qui peuvent supporter une couleur de fonds.
Sujet clos
Aller à