Aide
Bonjour,
J'ai un problème avec mon menu. Ca fait plusieurs jours que je galère la dessus. Le menu apparait parfaitement bien sous Mozilla et Chrome mais sous IE le sous menu ne s'affiche pas. La page HTML s'affiche nickel sur tous les navigateurs et dès que l'on mappe IE déconne.
Exemple : http://www.avent-tel...index.php?id=20
J'ai vraiment besoin d'un coup de main. Merci d'avance.
HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AVENT TELECOM, la téléphonie d'entreprises</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="Keywords" content="EVENT TELECOM, cablage, informatique, telephonie, reseau"/>
<meta name="Description" content="Bienvenue sur le site de AVENT TELECOM l'entreprise de cable pour les entreprises"/>
<link href="avent-telecom.css" rel="stylesheet" type="text/css"/>
<link href="menutest.css" rel="stylesheet" type="text/css"/>
<link href="avent-telecom_habillage.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--;><!]]></script>
</head>
<body style="background-color:#FFFFFF;">
<div id="Tableau_01">
<div id="bandeau_"><a href="avent-telecom.com/accueil"><img id="bandeau" src="images_avent-telecom/bandeau.png" width="1028" height="214" border="0" alt="Accueil" /></a> </div>
<div id="menu">
<ul id="menu">
<li><img src="" alt="menu 1">
<ul class="sousmenu">
<li> menu 1.1
<ul class="sousmenu">
<li> menu 1.1.1</li>
<li> menu 1.1.2</li>
<li> menu 1.1.3</li>
</ul>
</li>
<li> menu 1.2</li>
<li> menu 1.3</li>
<li> menu 1.4</li>
</ul>
</li>
<li> <img src="" alt="menu 2"></li>
<li> <img src="" alt="menu 3"></li>
<li> <img src="" alt="menu 4"></li>
</ul>
</div>
<div id="contenu_">
<h1>Avent telecom</h1>
Nos experts accompagnent plus de 2500 PME et Grands Comptes dans la maîtrise de leur téléphonie professionnelle (téléphonie fixe, téléphonie mobile, accès internet, convergence fixe mobile internet, et réseau privé).
En 2010, nous avons pu faire bénéficier à nos clients de près de -32% d'économies sur leurs factures télécoms.
Notre expertise métier, nous a valu l?attribution du label Expert Data en matière de solutions data professionnelles nous permettant de distribuer de nouveaux produits tels que les Smartphones (Blackberry, Windows Mobile) et les solutions Internet mobiles.
contenu editorial </div>
<div id="promo1_">
<img id="promo1" src="images_avent-telecom/promo1.jpg" width="328" height="269" alt="" />
</div>
<div id="promo2_">
<img id="promo2" src="images_avent-telecom/promo2.jpg" width="328" height="269" alt="" />
</div>
<div id="testmenu">ici</div>
</div>
</body>
</html>
CSS :
#menu {
background-color: #FFFFFF;
z-index:1000;
height:35px;
width:1022px;
top:246px;
border-bottom: 14px solid #F9C507;
}
#menu li {
color: #ffffff;
text-decoration: none;
text-transform:uppercase;
text-align:center;
background-color:#B2F2FC;
font-size: 12px;
line-height: 20px;
}
#menu li a{
color: #019DC0;
text-decoration: none;
text-transform:uppercase;
text-align:center;
background-color:#B2F2FC;
font-size: 12px;
line-height: 20px;
}
#menu li a:visited {
color: #ffffff;
text-decoration: none;
text-align:center;
text-transform:uppercase;
background-color: #B2F2FC;
}
#menu li a:active {
color: #F4A00C;
text-decoration: none;
text-align:center;
text-transform:uppercase;
background-color: #B2F2FC;}
#menu li a:hover {
color: #08647e;
text-decoration: none;
text-align:center;
text-transform:uppercase;
background-color: #B2F2FC;}
#menu, #menu ul { /* toutes les listes */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
text-transform:capitalize;
}
#menu a {
display: block;
width: 146px;
text-transform:capitalize;
}
#menu li { /* tous les items de liste */
float: left;
width: 146px;/* largeur obligatoire, sinon opera devient fou */
}
#menu li ul { /* listes de deuxième niveau */
position: absolute;/* important */
left:-999em; /* on met left plutôt que display pour cacher les menus parce que display: none n'est pas lu par les lecteurs d'écran */
z-index:1000;
height:20px;
display: inline ;
margin-right: 1px ;
color: #019DC0 ;
background-color: #B2F2FC;
border-top: 7px solid #F9C507;
}
}
#menu li ul ul { /* listes de troisième niveau et plus */
margin:-1em 0 0 10em;
}
#menu li:hover ul ul, #menu li.sfhover ul ul {
left:-999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* listes imbriquées sous lesitems de listes survolés */
left: auto;
}
/* IE PC selector */
* html .menu li {
display:inline; /* solve a IE PC list bug */
float:none; /* solve a IE5 clav nav bug */
}
a.linkOver{
background-color: #eee;
} TYPOSCRIPT lib.field_menu = HMENUlib.field_menu {wrap = <ul id="nav">|</ul>special = listspecial{ value = 3,4,5,6,7,8,19}1 = GMENU1 {NO = 1NO {wrapItemAndSub = <li>|</li>XY =146,434 = IMAGE4.file = fileadmin/templates/images_avent-telecom/menu_off.jpg10 = TEXT10.text.field = title10.fontFile = fileadmin/fonts/arial.ttf10.fontColor = #FFFFFF10.fontSize = 1310.text.case = upper10.align = center10.offset = 0,25}ACT = 1ACT {wrapItemAndSub = <li>|</li>XY =146,434 = IMAGE4.file = fileadmin/templates/images_avent-telecom/menu_on.jpg10 = TEXT10.text.field = title10.fontFile = fileadmin/fonts/arial.ttf10.fontColor = #00000010.fontSize = 1310.text.case = upper10.align = center10.offset = 0,25}RO = 1RO {wrapItemAndSub = <li>|</li>XY =146,434 = IMAGE4.file = fileadmin/templates/images_avent-telecom/menu_on.jpg10 = TEXT10.text.field = title10.fontFile = fileadmin/fonts/arial.ttf10.fontColor = #00000010.fontSize = 1310.text.case = upper10.align = center10.offset = 0,25}expAll=1}2 = TMENU2 {wrap = <ul class="sousmenu">|</ul>NO = 1NO {wrapItemAndSub = <li>|</li>}ACT = 1ACT {wrapItemAndSub = <li class="active">|</li>}CUR = 1CUR {wrapItemAndSub = <li class="active">|</li>doNotLinkIt = 1}expAll=1}3 = TMENU3 {wrap = <ul class="soussousmenu">|</ul>NO = 1NO {wrapItemAndSub = <li>|</li>}ACT = 1ACT {wrapItemAndSub = <li class="active">|</li>}CUR = 1CUR {wrapItemAndSub = <li class="active">|</li>doNotLinkIt = 1}expAll=1}}
Page 1 sur 1
Menu Css Et Ie Sous menu ne s'affiche pas dans IE
#3
OlivierSC 
- Super Membre
-
- Groupe : Membres
- Messages : 659
- Inscrit(e) : 26-juin 09
Posté 01 février 2012 à 08:16
Bonjour,
J'aurais une petite remarque sur la forme, si un lien est fourni pour voir le site sur lequel se produit le problème,je ne pense pas qu'il soit nécessaire de copier/coller 8 écrans de code HTML/CSS/JS (et encore j'ai un écran pas trop petit)... perso, quand je vois ça j'ai du mal à tout lire, et au final je ne peux pas répondre.
Il y a aussi un bouton dans l'éditeur de texte du forum qui permet d'indiquer qu'une portion de texte est du code (le bouton <> ) ca permet de rendre un peu plus lisible en créant une différence d'affichage.
Sinon pour ce qui est du problème :
il y a, lorsque je vais sur ton site avec IE, une erreur de syntaxe JS au chargement de la page au niveau du code suivant (ligne 55):
sur la ligne "//--;><!]]></script>", du coup tout le JS qui suit ne doit pas être traité correctement, rollover du menu inclus.
Dernier conseil :
Il me semble que le menu est fait avec des éléments simples (pas de police exotique, par d'effet graphique spécial, pas de différence de taille des éléments du menu, etc.. rien que ne soit pas remplaçable par du texte+CSS.
Du coup, pourquoi ne pas remplacer le GMENU par un TMENU cela permettrait de faire un menu qui fonctionne sans JS et aussi d'avoir aussi un peu plus de poids au niveau référencement.
Enfin cela n'est que mon avis perso
N'hésite pas à nous faire un retour sur les différents points..
OlivierSC
J'aurais une petite remarque sur la forme, si un lien est fourni pour voir le site sur lequel se produit le problème,je ne pense pas qu'il soit nécessaire de copier/coller 8 écrans de code HTML/CSS/JS (et encore j'ai un écran pas trop petit)... perso, quand je vois ça j'ai du mal à tout lire, et au final je ne peux pas répondre.
Il y a aussi un bouton dans l'éditeur de texte du forum qui permet d'indiquer qu'une portion de texte est du code (le bouton <> ) ca permet de rendre un peu plus lisible en créant une différence d'affichage.
Sinon pour ce qui est du problème :
il y a, lorsque je vais sur ton site avec IE, une erreur de syntaxe JS au chargement de la page au niveau du code suivant (ligne 55):
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--;><!]]></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>sur la ligne "//--;><!]]></script>", du coup tout le JS qui suit ne doit pas être traité correctement, rollover du menu inclus.
Dernier conseil :
Il me semble que le menu est fait avec des éléments simples (pas de police exotique, par d'effet graphique spécial, pas de différence de taille des éléments du menu, etc.. rien que ne soit pas remplaçable par du texte+CSS.
Du coup, pourquoi ne pas remplacer le GMENU par un TMENU cela permettrait de faire un menu qui fonctionne sans JS et aussi d'avoir aussi un peu plus de poids au niveau référencement.
Enfin cela n'est que mon avis perso
N'hésite pas à nous faire un retour sur les différents points..
OlivierSC
Partager ce sujet :
Page 1 sur 1
