18073 sujets

Questions générales et questions de débutants

Menu horizontal et IE sous XP

Bonjour,

Ci-après code de ma page.

Avec IE sous XP il est vertical au lieu d'horizontal !
Pas de problème avec les autres navigateurs (même IE sous mac !)

Que faut il que je fasse ?

Merci d'avance.

[code]
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 250;
left: 1em;
display: block;
z-index:100;
width: 100%; /* précision pour Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px 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;
}

.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
Tu peux commencer par utiliser le balisage en vigueur (balises [ code] et [ /code]) pour entourer ton code. Pour ça, tu peux éditer ton message original (plutôt que d'en créer un nouveau).

Ensuite, tu donnes le CSS mais pas le balisage HTML auquel il est censé s'appliquer. Du coup, on ne peut que faire des suppositions.
Pour une demande de conseils ou face à un problème, l'arme ultime c'est quand même la page de test en ligne Smiley smile 

#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}

Est-ce la partie de ton code censée réaliser l'horizontalité du menu ?
Pourquoi le float est-il appliqué à l'ensemble de la liste de definitions et non pas uniquement aux termes ?
Pourquoi les définitions sont-elles cachées ?

Voilà, sans une page d'exemple ou une idée plus précise de ce que tu voudrais faire, ça va être dur de savoir quel rendu tu attends de ce code. Smiley langue
J'ai jeté un oeil à votre page sur http://a2mr.free.fr/archive.htm
Et j'ai observé quelques petits problèmes :

1/ PROBLÈME DE SYNTAXE
Une partie de votre code HTML ne respecte pas la syntaxe XHTML (balises en minuscules, pas d'utilisation de propriétés propriétaires dans les balises, etc.), tandis que vous déclarez du XHTML 1.0 strict dans votre déclaration de type de document.

2/ PROBLÈME D'ACCESSIBILITÉ
Je ne connais pas assez javascript pour vous dire si le code Javascript utilisé est bon, mais en tout cas il pose un problème important d'accessibilité. En effet, si Javascript n'est pas activé, les pages du site ne sont pas accessibles, car les liens du sous-menu restent désespéremment cachés. Deux solutions :
- cacher les sous-menu au chargement de la page avec Javascript, pas avec la feuille de style CSS. Si javascript n'est pas activé, les sous-menu apparaissent. Moins esthétique, mais parfaitement accessible ;
- garder la disposition actuelle mais faire de chaque titre de sous-menu un lien vers une page d'index reprenant le contenu du sous-menu (peut-être agrémenté d'images, d'icones, de texte de description pour chaque lien, etc.).

3/ ORGANISATION DU MENU
Je ne suis pas sûr que l'utilisation de listes de définition soit la meilleure option. Je l'ai vue mentionnée dans plusieurs tutoriels et articles, mais si pour l'implémenter on doit créer une liste de définition pour CHAQUE item (un dt + les dd associées), ça fait un peu beaucoup. Il me semble que des listes non ordonnées imbriquées (chaque li de la liste de premier niveau contient une liste ul de second niveau) sont plus simple, car chaque li de la liste de premier niveau joue déjà le rôle de conteneur pour le sous-menu.

Sinon, en gardant la structure actuelle, je ne vois pas ce qui gêne Internet Explorer. Peut-être qu'en déclarant chaque liste de définition comme étant un élément de type en-ligne...
Sujet clos
Aller à