Bonjour à tous, sur le site d'une assoc germano-yougoslave pour laquelle je suis webmaster, lien ici, j'ai installé et arrangé deux menus, un vertical et un horizontal, tous les deux javascript+css très chouettes et qui fonctionnent sans problème sur MIE. Sur Mozilla/Firefox ils fonctionnent aussi mais déconnent un peu : Les sous-menus du menu horizontal se chevauchent parfois, alors qu'il devrait n'apparaître qu'un seul à la fois. Et en ce qui concerne le menu vertical, où il n'y a heureusement qu'un seul sous-menu ("Aktuelles"), celui-ci déconne aussi sur Firefox. C'est un peu difficile à expliquer comme ça mais le plus simple est de comparer entre MIE et Firefox.
A tout hasard, et dans l'espoir que certains viendront à mon secour , ci-après les codes de l'un et de l'autre (pour chacun une page *html, car le site est encore sur frames )
Code du menu horizontal ( je pense que le javascript du menu horizontal est peut-être en cause ) :
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Suedost_Navioben</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
/* CSS issu des tutoriels www.alsacreations.com/articles */
body {
margin: 10px;
padding: 0px;
background-color: #ffcc66;
}
dt, dl, dd, ul, li {
list-style-type: none;
margin: 0 10px 0 0;
}
.menu {
position : absolute;
left: 0px;
top: 30px;
width: 650px;
}
.menu dl {
float: left;
}
.menu li {
display: inline;
list-style: none;
}
.menu a {
text-decoration: none;
color: #007cc3;
background: transparent url(../Webbilder/Bilder/bluebullet.gif) left center no-repeat;
padding-left: 10px;
font: bold 0.9em Arial, "Times New Roman", Times, serif;
}
#smenu1, #smenu2, #smenu3, #smenu4 {
display: none;
font: bold 0.75em Georgia, Verdana, Arial, Times, serif;
height: 40px;
padding-top:5px;
}
#smenu1 {
position: absolute;
left: 0px;
width: 700px;
}
#smenu2 {
position: absolute;
left: 0px;
width: 700px;
}
#smenu3{
position: absolute;
left: 120px;
width: 700px;
}
#smenu4 {
position: absolute;
left: 310px;
width: 400px;
}
.frieden2 {left: 0px; font: bold 0.9em Arial, "Times New Roman", Times, serif; font-style: normal; color: #FFFFCC; letter-spacing: 3px}
html>body li a { width: 10em; }
a:hover
{
background: transparent url(../Webbilder/Bilder/orangebullet.gif) left center no-repeat;
color: #ffffcc;
padding-left: 10px;
}
a:active
{
background: transparent url(../Webbilder/Bilder/redbullet.gif) left center no-repeat;
color: #f30;
padding-left: 7px;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
function montre(id) {
if (document.getElementById) {
document.getElementById(id).style.display="inline";
} else if (document.all) {
document.all[id].style.display="inline";
} else if (document.layers) {
document.layers[id].display="inline";
} }
function cache(id) {
if (document.getElementById) {
document.getElementById(id).style.display="none";
} else if (document.all) {
document.all[id].style.display="none";
} else if (document.layers) {
document.layers[id].display="none";
} }
//-->
</script>
</head>
<body>
<div id="frieden" style="position:absolute; left:5px; top:12px; width:507px; height:15px; z-index:3;"><span class="frieden2">Friedensarbeit
durch</span></div>
<div class="menu" onclick="this.style.color='red'">
<dl>
<dt onmouseover="montre('smenu1');" onmouseout="cache('smenu1');"><a href="#"> Kultur</a></dt>
<dd id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<ul>
<li><a href="../kultur/kulturallg.htm" target="Inhalt"> allgemein</a></li>
<li><a href="../kultur/ausstellungen.htm" target="Inhalt"> Kunstaustellungen</a></li>
<li><a href="../kultur/musik.htm" target="Inhalt"> Musik</a></li>
<li><a href="../kultur/literatur.htm" target="Inhalt"> Literatur</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu2');" onmouseout="cache('smenu2');"><a href="#"> Praktische Hilfen</a></dt>
<dd id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<ul>
<li><a href="../praktischeHilfen/sozberatung.htm" target="Inhalt"> Sozialberatung</a></li>
<li><a href="../praktischeHilfen/ther_hilfe.htm" target="Inhalt"> Therapeutische Hilfe</a></li>
<li><a href="../praktischeHilfen/bildungsberatung.htm" target="Inhalt"> Ausbildungberatung</a></li>
<li><a href="../praktischeHilfen/sprachkurse.htm" target="Inhalt"> Sprachkurse</a></li>
<li><a href="../praktischeHilfen/roma.htm" target="Inhalt"> Roma-Programme</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu3');" onmouseout="cache('smenu3');"><a href="#"> Projekte in Südosteuropa</a></dt>
<dd id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<ul>
<li><a href="../soe_projekte/bosnien_5.htm" target="Inhalt"> 5x in Bosnien</a></li>
<li><a href="../soe_projekte/schulpartner.htm" target="Inhalt"> Schulpartnerschaften</a></li>
<li><a href="../soe_projekte/inselpartner.htm" target="Inhalt"> Inselpartnerschaften</a></li>
<li><a href="../soe_projekte/patenschaften.htm" target="Inhalt"> Patenschaften</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu4');" onmouseout="cache('smenu4');"><a href="#"> Vernetzung</a></dt>
<dd id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<ul>
<li><a href="../vernetzung/vernetzallg.htm" target="Inhalt"> allgemein</a></li>
<li><a href="../vernetzung/theraustausch.htm" target="Inhalt"> Therapeutenaustausch</a></li>
<li><a href="../vernetzung/reisen.htm" target="Inhalt"> Reisen</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>
Code du menu vertical ( là, c'est le sous-menu déroulant en rollover sur Aktuelles qui déconne franchement quand on est passé en rollover une fois dessus ).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Suedost_Navilinks</title>
<!--<style type="text/css" media="screen">@import url(floatutorial.css);</style>-->
<!--<link rel="SHORTCUT ICON" href="/floatutorial/floatutorial.ico">-->
<!--<link rel="stylesheet" href="../stylesheets/print.css" media="print">-->
<style type="text/css" media="screen">
body {background-color:#ffcc66; /*background-color:#FF9933*/}
#logo {
float: left;
position: absolute;
top: 0.8em;
width: 81px;
height: 110px;
}
#navcontainer
{
float: left;
position: absolute;
top: 17.5em;
width: 10em;
height: 100%;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #ffcc66;
font-size: 0.6em;
color:#007cc3;
}
#navcontainer ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navcontainer li
{
border-bottom: 1px solid #ffcc66; /*couleur bordure entre items*/
margin: 0;
}
#navcontainer li a
{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #007cc3; /*9D9A97 -- couleur rectangle gauche*/
border-right: 10px solid #ffcc66; /*couleur rectangle droite*/ background-color:#ffcc66; /*ff9933 -- couleur centrale normale*/
color: #007cc3; /*couleur texte centrale normale*/
text-decoration: none;
width: 100%;
}
html>body #navcontainer li a { width: 10em; /*width: auto;*/}
#navcontainer li a:hover
{
border-left: 10px solid #508fc4; /*couleur rectangle gauche en rollover*/
border-right: 10px solid #FABB61; /*FABB61 -- couleur rectangle droite enrollover*/
background-color:#F79A3C; /*couleur centrale rollover*/
color: #ffffcc;
}
#navcontainer li a:active
{
border-left: 10px solid #508fc4; /*couleur rectangle gauche en rollover*/
color: #f30;
}
/*Premier item avec carré d'autre couleur: Home*/
#navlist a#current {
border-color: #5bd #ffcc66 #068 #508fc4;
}
#navlist a#current:hover
{
background: #28b;
border-color: #069 #6cf #5bd #f30;
border-right: 10px solid #3399cc;
}
/*Deuxième item avec carré d'autre couleur: Aktuelles*/
#navlist a#current2 {
border-color: #5bd #ffcc66 #068 #007cc3;
}
#navlist a#current2:hover
{
background: #28b;
border-color: #069 #6cf #5bd #ffffcc;
border-right: 10px solid #3399cc;
}
#navlist a#current2:active
{
color: #ffffcc;
}
/*Troisième item avec carré d'autre couleur: Aktuelles*/
#navlist a#current3 {
border-color: #5bd #ffcc66 #068 #F79A3C;
background-color:#FABB61;
}
#navlist li a#current3:hover
{
border-left: 10px solid #508fc4; /*couleur rectangle gauche en rollover*/
border-right: 10px solid #FABB61; /*FABB61 -- couleur rectangle droite enrollover*/
background: #F79A3C;
}
/*MENU DÉROULANT menu alsacreation deroulant_vertical_1.htm*/
.menu {
clear: both; /* pour obliger le retour à la ligne des menus */
margin-top: 5px;
width: 100%;
height: 20px;
background-color: #ffcc66;
}
#smenu1, #smenu2, #smenu3, #smenu4 {
float: left;
display: none; /* par défaut, les sous-menus ne seront pas affichés */
font-size: 10px;
padding: 5px 0 5px 0;
width: 100%;
background-color: #ffcc66;
}
#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a {
font-weight: normal;
border-top: 0 none;
}
</style>
<script language="JavaScript" type="text/JavaScript">
<!--MENU DEROULANT>
function montre(id) {
if (document.getElementById) {
document.getElementById(id).style.display="block";
} else if (document.all) {
document.all[id].style.display="block";
} else if (document.layers) {
document.layers[id].display="block";
} }
function cache(id) {
if (document.getElementById) {
document.getElementById(id).style.display="none";
} else if (document.all) {
document.all[id].style.display="none";
} else if (document.layers) {
document.layers[id].display="none";
} }
</script>
</head>
<body>
<div id="logo"><a href="../index.htm" target="_parent"><img src="../Webbilder/logosoleil.gif" width="81" height="110" style="border: 0px;"></a></div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="inhalt.htm" id="current" target="Inhalt">Home</a></li>
<li><a href="../wirueberuns/wirueberuns.htm" target="Inhalt">Wir über uns </a></li>
<li class="menu" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');"><a href="#" id="current2" style="cursor: crosshair;">Aktuelles</a>
<div id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<ul>
<li><a href="../aktuelles/veranstaltungen.htm" id="current3" target="Inhalt">Veranstaltungen</a></li>
<li><a href="../aktuelles/gruppen.htm" id="current3" target="Inhalt">Regelm.Gruppen</a></li>
</ul>
</div>
</li>
<li><a href="../photos/index.php" target="Inhalt">Fotogalerien</a></li>
<li><a href="../spenden/spenden.htm" target="Inhalt">Spenden und Mitgliedschaft </a></li>
<li><a href="../kontakt/kontakt.htm" target="Inhalt">Kontakt</a></li>
<li><a href="../downloads/downloads.htm" target="Inhalt">Downloads</a></li>
<li><a href="../links/links.htm" target="Inhalt">Links</a></li>
<li><a href="../sitemap/sitemap.htm" target="Inhalt">Übersicht</a></li>
</ul>
</div>
</body>
</html>
...En fait, comme on peut le remarquer, le problème vient peut-être du fait que j'ai mélangé deux codes (beaucoup de css et un zest de javascript) ...et qu'il y a quelque-chose que Firefox ne peut pas digérer, puisqu'il déconne quand on passe et repasse sur les sous-menus avec la souris.
Mon rêve c'est que ces deux menus très simples finalement fonctionnent parfaitement sur tous les navigateurs : En plus de MIE, au moins Firefox, Mozilla, Opera, Safari et MIE-Mac ...Ce rêve peut-il devenir réalité ?
Voilà, j'espère que quelqu'un pourra m'aider à trouver la faille Et puis, j'aimerai bien savoir quelle tronche ont mes deux menus sur Mac ... MERCI!!
]]>
.
. Sous Safari, j'ai dû dire au div parent d'avoir une position: relative; pour forcer l'image à ne pas en sortir (sinon l'image n'avait que faire du max-width et sortait). L'image s'est donc bien dimensionnée mais uniquement en largeur !! La hauteur n'est pas ajustée automatiquement ! Je me retrouve donc avec des images dont les dimensions ne sont plus du tout proportionnelles...