Bonjour,
J'ai suivi cet excellent tutoriel sur les menus déroulant en CSS et XHTML ici.
Mais je n'arrive pas à adapter ce menu aux types de sites que je fais. Ça fait 4 jours que je planche sur ce détail sans trouver de solution (en espérant qu'il y en ait une ???), je n'en peux plus !
Voici mon problème :
Site contenu dans un div centré, et le menu horizontal n'est pas placé tout en haut de la page, mais après un "bandeau" de texte et une image… ce qui fait que je ne peux pas utiliser position: absolute; mais seulement relative ou inherit, pour qu'il reste placé dans le div conteneur principal >> ce qui fait que j'ai un décalage en dessous quand je fait apparaître le sous-menu
!
J'ai ajusté l'exemple du tutoriel à ma problèmatique et ça donne :
- décalage avec FF, c'est le texte qui se décale dans le div situé en dessous du menu
- décalage avec IE c'est tout le div situé en dessous qui se décale.
Quelqu'un a-t-il une solution pour utiliser le menu déroulant dans mon type de site sans tous ces problèmes ???
Voici ce que donne le code actuel :
J'ai suivi cet excellent tutoriel sur les menus déroulant en CSS et XHTML ici.
Mais je n'arrive pas à adapter ce menu aux types de sites que je fais. Ça fait 4 jours que je planche sur ce détail sans trouver de solution (en espérant qu'il y en ait une ???), je n'en peux plus !
Voici mon problème :
Site contenu dans un div centré, et le menu horizontal n'est pas placé tout en haut de la page, mais après un "bandeau" de texte et une image… ce qui fait que je ne peux pas utiliser position: absolute; mais seulement relative ou inherit, pour qu'il reste placé dans le div conteneur principal >> ce qui fait que j'ai un décalage en dessous quand je fait apparaître le sous-menu
!J'ai ajusté l'exemple du tutoriel à ma problèmatique et ça donne :
- décalage avec FF, c'est le texte qui se décale dans le div situé en dessous du menu
- décalage avec IE c'est tout le div situé en dessous qui se décale.
Quelqu'un a-t-il une solution pour utiliser le menu déroulant dans mon type de site sans tous ces problèmes ???
Voici ce que donne le code actuel :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//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>
<title>Menu déroulant horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
/* Ajustement CSS pour mon site */
html, body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CC0000;
margin: 15px 0 40px 0;
padding: 0;
text-align: center;
background-color: #000000;
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
#global { /*div conteneur principal qui est centré */
width: 800px;
height: 100%;
margin-left: auto;
margin-right: auto;
padding : 0;
text-align: center;
background-color:#1c1c1c;
border: 1px solid #4c4c4c;
}
/* CSS issu des tutoriels http://css.alsacreations.com */
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: relative; /* ici en "relative" au lieu de "absolute" pour le placer en dessous des données le précédant */
top: 0;
left: 30px;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
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: relative; /* ici en "relative" au lieu de "absolute" pour le placer en dessous du menu, dans le div #global */
z-index: 1;
top : 10px;
left : 0px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
a {text-decoration: none;
color: black;
color: #222;
}
-->
</style>
</head>
<body>
<div id="global">
<div id="site">
<h1>Menu horizontal déroulant en CSS</h1>
<p>Testé sous (tested under) Internet Explorer, Netscape, Mozilla, Opera et Firebird</p>
<p>Il vous suffit d'adapter le code source de cette page à vos besoins. </p>
<p>Raphaël GOETTER<br />
<a href="http://www.alsacreations.com">Alsacréations</a><br />
<a href="http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal">Explications / Explanations</a></p>
</div>
<br /><br />
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
<li><a href="#">Sous-Menu 1.5</a></li>
<li><a href="#">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
<li><a href="#">Sous-Menu 2.4</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.2</a></li>
<li><a href="#">Sous-Menu 3.3</a></li>
<li><a href="#">Sous-Menu 3.4</a></li>
<li><a href="#">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.2</a></li>
<li><a href="#">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>
<br /><br />
<div id="site">
<h1>Menu horizontal déroulant en CSS</h1>
<p>Testé sous (tested under) Internet Explorer, Netscape, Mozilla, Opera et Firebird</p>
<p>Il vous suffit d'adapter le code source de cette page à vos besoins. </p>
<p>Raphaël GOETTER<br />
<a href="http://www.alsacreations.com">Alsacréations</a><br />
<a href="http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal">Explications / Explanations</a></p>
</div>
</div>
</body>
</html>
