bonjour, là je pense avoir besoin d'un sérieux coup de main, car je craque ! J'ai un menu sur mon site appelé avec un 'include' dans toutes les pages qui en ont besoinhttp://www.unesourisetmoi.info
Après avoir visualiser avec FF j'ai noté des 'erreurs' d'affichage, j'ai retravaillé la CSS et tout fonctionne bien ... en voici le code :
<style type="text/css">
#Menu { width:1050px; /* largeur 1ère ligne */
font-family:vernada; /* police utilisée */
font-size:12px;
left:-40px;
position:relative;
font-weight:normal;
text-align:center; }
#Menu a { text-decoration:none;
border:1px solid #FF0000; /* couleur de la bordure ici mis en rouge pur pour essai*/
background-color:#FFC285; /* couleur normale du fond */
display:block;
color:#000080;
display:block;
color:#000000;}
#Menu a:hover
{ background-color:#CCFFFF; /* couleur du fond quand on survole */
}
#Menu li { width:110px; /* largeur des libellés METTRE 110 OU 115 APRES */
margin-right:1; /* espace à droite */
cursor:pointer;
display:block;
float:left; }
#Menu ul { visibility:hidden;
position:absolute; }
#Menu ul li { float:none;
display:block;
left:-40px; /* ajustements horizontaux des sous-menus 1er niveau */
position:relative; }
#Menu ul li ul
{ float:none;
position:absolute;
left:110px; /* ajustements horizontaux des sous-menus niveaux suivants 11
5 A L AIR OK POUR LES COLLER AVOIR AVEC L AUTRE 115 DANS MENU LI POUR COLLER EN FONCTION DE LA LARGEUR
DES BLOCS */
top:-1px; /* ajustements verticaux des sous-menus niveaux suivants */
visibility:hidden; }
* html #Menu li li,* html #Menu li li li
{ display:inline; }
#Menu img { border:0; }
</style>
<?php include "../bgmenu/BulMenu.htm"; ?>
<script type="text/javascript">
var l=document.getElementById("Menu").getElementsByTagName('LI');
for ( var n=0; n<l.length; n++ )
{
l[n].unselectable="on"; /* pour faire plus propre : "non sélectionnable", ne fonctionne pas avec FF ? */
if ( l[n].getElementsByTagName('UL') && l[n].getElementsByTagName('UL').length>0 )
{
l[n].onmouseover = function()
{
this.getElementsByTagName('UL')[0].style.visibility="visible";
}
l[n].onmouseout = function()
{
this.getElementsByTagName('UL')[0].style.visibility="hidden";
}
l[n].getElementsByTagName('A')[0].innerHTML+=" <img src='../bgmenu/FlecheDroite.gif' />";
}
else {
l[n].getElementsByTagName('A')[0].innerHTML+="<img src='../bgmenu/FlecheDroite.gif' style='width:0;height:0;'/>";
/* pour permettre de détecter le survol "hors du texte" avec IE */
}
}
</script>
et maintenant quand je visualise sous IE, tous les 'sous-menus' sont décallés vers la droite, ce qui fait affreux !!!auparavant, l'ancien menu fonctionnait impeccablement sous IE mais les 'sous-menus' étaient décallés vers la gauche sous FF ....
voici l'ancien code:
<style type="text/css">
#Menu { width:1050px; /* largeur 1ère ligne */
font-family:vernada; /* police utilisée */
font-size:12px;
left:-40px;
position:relative;
font-weight:normal;
text-align:center; }
#Menu a { text-decoration:none;
border:1px solid #000000; /* couleur de la bordure */
background-color:#FFC285; /* couleur normale du fond */
/* height:???px; hauteur des lignes */
display:block;
color:#000000; }
#Menu a:hover
{ background-color:#FFF0E0; /* couleur du fond quand on survole */
}
#Menu li { width:105px; /* largeur des libellés */
margin-right:1; /* espace à droite */
/* padding:???px; et/ou margin:??px; séparation entre les lignes /colonnes */
cursor:pointer;
display:block;
float:left; }
#Menu ul { visibility:hidden;
position:absolute; }
#Menu ul li { float:none;
display:block;
left:-90px; /* ajustements horizontaux des sous-menus 1er niveau */
position:relative; }
#Menu ul li ul
{ float:none;
position:absolute;
left:155px; /* ajustements horizontaux des sous-menus niveaux suivants */
top:-1px; /* ajustements verticaux des sous-menus niveaux suivants */
visibility:hidden; }
* html #Menu li li,* html #Menu li li li
{ display:inline; }
#Menu img { border:0; }
</style>
<?php include "../bgmenu/BulMenu.htm"; ?>
<script type="text/javascript">
var l=document.getElementById("Menu").getElementsByTagName('LI');
for ( var n=0; n<l.length; n++ )
{
l[n].unselectable="on"; /* pour faire plus propre : "non sélectionnable", ne fonctionne pas avec FF ? */
if ( l[n].getElementsByTagName('UL') && l[n].getElementsByTagName('UL').length>0 )
{
l[n].onmouseover = function()
{
this.getElementsByTagName('UL')[0].style.visibility="visible";
}
l[n].onmouseout = function()
{
this.getElementsByTagName('UL')[0].style.visibility="hidden";
}
l[n].getElementsByTagName('A')[0].innerHTML+=" <img src='../bgmenu/FlecheDroite.gif' />";
}
else {
l[n].getElementsByTagName('A')[0].innerHTML+="<img src='../bgmenu/FlecheDroite.gif' style='width:0;height:0;'/>";
/* pour permettre de détecter le survol "hors du texte" avec IE */
}
}
</script>
donc là honnêtement je ne sais pas quoi faire pour avoir un menu qui soit correct sous ces deux navigateurs !!!une aide serait vraiment la bienvenue !
à l'avance merci
b g
Modifié par bg62 (27 Jun 2007 - 11:25)
SUPER !