Bonjour
J'ai recopié le code du menu déroulant horizontal pour l'intégrer à mon site. J'ai bidouillé un peu pour que ça colle à ce que je voulais mais j'ai du me planter quelque part car maintenant l'affichage bugue sous Firefox.
C'est sûrement pas grand chose mais comme j'y connais rien en java, impossible de localiser mon erreur.
Merci d'avance pour votre aide
Lysithée
xxxx
Plutôt que de décrire laborieusement mon souci, voici la preuve en image :
Sous IE6
http://img145.imageshack.us/img145/6248/affichageie4ly.jpg
Sous Firefox
http://img145.imageshack.us/img145/4590/bug1nb.jpg
Et voici la partie du code qui concerne le menu :
Modifié par Lysithee (06 Oct 2005 - 16:44)
J'ai recopié le code du menu déroulant horizontal pour l'intégrer à mon site. J'ai bidouillé un peu pour que ça colle à ce que je voulais mais j'ai du me planter quelque part car maintenant l'affichage bugue sous Firefox.
C'est sûrement pas grand chose mais comme j'y connais rien en java, impossible de localiser mon erreur.
Merci d'avance pour votre aide
Lysithée
xxxx
Plutôt que de décrire laborieusement mon souci, voici la preuve en image :
Sous IE6
http://img145.imageshack.us/img145/6248/affichageie4ly.jpg
Sous Firefox
http://img145.imageshack.us/img145/4590/bug1nb.jpg
Et voici la partie du code qui concerne le menu :
a écrit :
<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>
</script>
<style type="text/css">
<!--
/* CSS issu des tutoriels www.alsacreations.com/articles */
body {
margin: 0;
padding: 0;
background: white;
font: 80% georgia, arial, sans-serif;
color: #339933;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 800px;
}
#menu dl {
float: left;
width: 100px;
margin: 0 0px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 0px solid gray;
}
#menu dd {
border: 0px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
a {text-decoration: none;
color: black;
color: #222;
}
-->
</style>
</head>
<body>
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><img src="kit/accueil.jpg" width="105" height="41" /></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');"><img src="kit/indiscretions.jpg" width="200" height="41" /></dt>
<dd id="smenu1">
<ul>
<li><a href="#"><img src="kit/lieux.jpg" border="0" /></a></li>
<li><a href="historique.htm"><img src="kit/retrospective.jpg" width="100" height="20" border="0" /></a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');"><img src="kit/decouvrir.jpg" width="173" height="41" /></dt>
<dd id="smenu2">
<ul>
<li><a href="#"><img src="kit/Nantes.jpg" border="0" /></a></li>
<li><a href="#"><img src="kit/maldives.jpg" border="0" /></a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');"><img src="kit/infos.jpg" width="206" height="41" /></dt>
<dd id="smenu3">
<ul>
<li><a href="#"><img src="kit/deplacer.jpg" border="0" /></a></li>
<li><a href="#"><img src="kit/loger.jpg" border="0" /></a></li>
<li><a href="#"><img src="kit/recommendations.jpg" border="0" /></a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><img src="kit/contact.jpg" width="116" height="41" /></dt>
</dl>
</div>
Modifié par Lysithee (06 Oct 2005 - 16:44)
