du texte dans les lignes du menu : ça marche sous InternetExplorer, Safari, Opera ainsi que Firefox et Mozilla !
ensuite avec des images.jpg dans les lignes,
si ça marche bien pour les 3 premiers IE, Safari et Opera,
il y a un défaut pour les 2 autres Firefox et Mozilla :
- avec les images, une ligne sur 2 reste en surimpression au lieu de reprendre la forme d'avant le passage de la souris sur la ligne de lien.
tous les exemples que j'ai vus n'utilisent que du texte, je n'ai rien trouvé avec des images.
la page qui affiche le menu :
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Description" content="Le site de..." /><meta name="author" content="mh333" /><META NAME="GENERATOR" CONTENT="mh333">
<link href="menus.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
if (document.getElementById('smenu')) {document.getElementById('smenu').style.display='none';}
if (d) {d.style.display='block';}}
//-->
</script>
</head>
<BODY>
<table border=1 valign=top CELLPADDING=0 CELLSPACING=0>
<tr><td valign=top width=50 height=120 align=left>menu :<br>
<dl id="menu">
<dt onmouseover="javascript:montre('smenu');" onmouseout="javascript:montre();">
<a HREF=a-e.htm onMouseOut="ae.src='ae.jpg'" onMouseOver="ae.src='aen.jpg'"><img src=ae.jpg name="ae" border=0></a></dt>
<dd id="smenu" onmouseover="javascript:montre('smenu');" onmouseout="javascript:montre();">
<ul>
<li><a href=a.htm onMouseOut="a.src='http://djenina.eu/a.jpg'" onMouseOver="a.src='http://djenina.eu/an.jpg'"><img src="http://djenina.eu/a.jpg" name="a" border=0></a></li>
<li><a href=b.htm onMouseOut="b.src='http://djenina.eu/b.jpg'" onMouseOver="b.src='http://djenina.eu/bn.jpg'"><img src=http://djenina.eu/b.jpg name="b" border=0></a></li>
<li><a href=c.htm onMouseOut="c.src='http://djenina.eu/c.jpg'" onMouseOver="c.src='http://djenina.eu/cn.jpg'"><img src=http://djenina.eu/c.jpg name="c" border=0></a></li>
<li><a href=d.htm onMouseOut="d.src='http://djenina.eu/d.jpg'" onMouseOver="d.src='http://djenina.eu/dn.jpg'"><img src=http://djenina.eu/d.jpg name="d" border=0></a></li>
<li><a href=e.htm onMouseOut="e.src='http://djenina.eu/e.jpg'" onMouseOver="e.src='http://djenina.eu/en.jpg'"><img src=http://djenina.eu/e.jpg name="e" border=0></a></li>
</ul>
</dd>
</dl>
<br>
</td><td valign=top width=50>images</td></tr>
</table>
</BODY>
</HTML>
Code : Tout sélectionner
dl, dt, dd, ul, li {margin: 0;padding: 0;list-style-type: none;font-family: Arial;font-size: 14px;}
#menu {position:absolute;padding-left: 0px;font-size: 12px;padding-top:0px;}
#menu dt {cursor: pointer;height: 42px;line-height: 20px;margin-left: 3px;border-bottom: 0px;}
#menu dd {position: absolute;z-index: 0;left:3.7em;margin-top: -3.0em;width: 50px;background: #FF0000;display:none;}
#menu ul {padding: 0px;border: 1px;font-size: 0px;width: 50px;}
#menu li {text-align: right;font-size: 85%;height: 20px;line-height: 15px;width: 50px;float: left;}
#menu li a {display: block;background: #FF0000;height: 20px;width: 50px;float: left;}
#menu dt a {display: block;}
#menu li a:hover {background: #FF0000;height: 20px;width: 50px;float: left;}
#menu dt a:hover {background: #FF0000;}
où est l'erreur ? qu'est-ce qui empêche que ça marche avec des images sous Firefox, quel paramètre manque ?
on peut voir ce désagrément sur le site de : sandra-bessis.com
merci pour une petite aide (un petit complément comme d'ajouter float:left; par exemple)
mh333
Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)