problème avec création d'un menu déroulant.
5 messages
• Page 1 sur 1
Consultez la formation à Google Analytics de WebRankInfo / Ranking Metrics
-
Meeuuuhhh - WRInaute passionné
- Messages: 2046
- Inscription: 8 Jan 2007
problème avec création d'un menu déroulant.
le Jeu Mai 10, 2007 17:58
Bonjour,
J'essaie de faire un menu déroulant horizontal sur mon site.
Je suis ce tutorial d'alsacréation : http://css.alsacreations.com/Constructi ... horizontal
Le problème, sans doute classique, c'est que ça pousse les éléments en dessous. dans le tuto, ils disent d'utiliser la fonction z-index, mais j'ai dû rater un épisode.
Le code HTML :
Le code CSS de la div lettre :
Voilà , donc le menu se déroule, mais la div lettre est poussée vers le bas.
Vous connaissez le problème
J'essaie de faire un menu déroulant horizontal sur mon site.
Je suis ce tutorial d'alsacréation : http://css.alsacreations.com/Constructi ... horizontal
Le problème, sans doute classique, c'est que ça pousse les éléments en dessous. dans le tuto, ils disent d'utiliser la fonction z-index, mais j'ai dû rater un épisode.
Le code HTML :
- Code: Tout sélectionner
<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" media="screen">
<!--
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
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 li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
-->
</style>
</head>
<body>
<div class="thematique">
<div id="menu">
<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1">
<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();"><a href="">Menu 2</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<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">
<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><!-- ferme menu -->
</div><!-- ferme themactic -->
<div class="lettre></div>
Le code CSS de la div lettre :
- Code: Tout sélectionner
.lettre
{
background-color:#EEEEEE;
font-weight:bold;
text-align:center;
padding-top:4px;
padding-bottom:2px;
margin-bottom:15px;
}
Voilà , donc le menu se déroule, mais la div lettre est poussée vers le bas.
Vous connaissez le problème
-
Meeuuuhhh - WRInaute passionné
- Messages: 2046
- Inscription: 8 Jan 2007
le Ven Mai 11, 2007 1:07
Non plus.
Bon voilà , j'ai fait une page de test, vous pouvez voir le problème ici, le css et le javascript sont dans les balises head :
http://www.soins-nature.com/menu.php
Bon voilà , j'ai fait une page de test, vous pouvez voir le problème ici, le css et le javascript sont dans les balises head :
http://www.soins-nature.com/menu.php
5 messages
• Page 1 sur 1
Formation recommandée sur ce thème :
Formation Google Analytics : en 2 jours, apprenez comment exploiter l'essentiel des possibilités de l'outil de mesure d'audience de Google. Formation animée par les experts Google Analytics de Ranking Metrics.
Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.
Lectures recommandées sur ce thème :
- création de ménu déroulant pour mon site web
- Menu déroulant vertical création selon book Dreamw. mais ??
- Probleme de menu déroulant
- Probleme avec menu deroulant
- Menu déroulant probleme referencement
- Positionnement du menu déroulant (PROBLEME)
- problème menu déroulant IE 6 et précédents
- Problème avec un menu déroulant...
- [Résolu] Problème : Menu déroulant Js, session_destroy().
- Probleme Fire fox et menu deroulant
Consultez la description détaillée des produits ou services de Google suivants : Omnisio, Google Présentations
Qui est en ligne
Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 2 invités
Contact
Confidentialité