Bonjour!
Tout d'abord, bravo pour ce site, pour quelqu'un qui débute comme moi c'est une vraie mine d'or!
Maintenant mon problème.
J'ai mis en place un menu déroulant basé sur le tutorial qui se trouve ici:
http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal
avec les adaptations suggérées ici:
http://perso.orange.fr/michel.deboom/menualsa/hrz-nojs/menu-hrz.htm
Au final ça donne la chose suivante:
CSS
Dans la page (c'est intégré à du Drupal):
Le site en prod peut être vu ici:
http://www.hyboria.info
Mon problème est le suivant: Sur IE7, lorsque l'on tente d'ouvrir un menu déroulant par dessus le cadre principal, celui-ci se ferme dès que l'on arrive dans la zone de contenu.
Je n'ai pas se problème sous FF, Opera, Safari. J'ai eu le problème sous IE6 mais il a été réglé en modifiant un peu le css, notamment les positions. Mais rien n'y fait pour IE7. Quelqu'un peut m'éclairer?
Merci beaucoup d'avance!
Et soyez indulgents sur le css.
J'accepte avec plaisir tout commentaire et conseil mais je débute vraiment alors je suis sans doute loin de faire quelque chose d'optimisé.
Modifié par Luneh (02 Jul 2007 - 22:37)
Tout d'abord, bravo pour ce site, pour quelqu'un qui débute comme moi c'est une vraie mine d'or!
Maintenant mon problème.
J'ai mis en place un menu déroulant basé sur le tutorial qui se trouve ici:
http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal
avec les adaptations suggérées ici:
http://perso.orange.fr/michel.deboom/menualsa/hrz-nojs/menu-hrz.htm
Au final ça donne la chose suivante:
CSS
/* Menu déroulant */
#menu dl,#menu dt,#menu dd,#menu ul,#menu li {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 10px;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 15px;
left: 2.5em;
right: 3em;
z-index:10;
width: 100%; /* correction pour Opera */
}
*html #menu { /* correction pour IE */
position: relative;
top: 6px;
left: 5px;
z-index: 1;
}
#menu dl {
float: left;
width: 10.8em;
}
#menu dl.smaller {
float: left;
width: 10em;
}
#menu dl.sep {
float: left;
width: 0.1em;
padding-top: 3px;
}
#menu dl.forum {
float: left;
width: 8em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
margin: 1px;
}
#menu dd {
display: none;
margin-top: 4px;
}
#menu li {
text-align: center;
background: #fbf1bc;
border: none;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 1px solid #a9945f;
border-top: none;
padding-top: 3px;
padding-bottom: 3px;
}
#menu li:hover, #menu li:focus {
background: #dfd6a7;
}
* html #menu li a:hover, #menu li a:focus {
background: #dfd6a7;
}
Dans la page (c'est intégré à du Drupal):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Bienvenue sur Hyboria.info! | Hyboria</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="/misc/favicon.ico" type="image/x-icon" />
<style type="text/css" media="all">@import "/modules/aggregator/aggregator.css";</style>
<style type="text/css" media="all">@import "/modules/book/book.css";</style>
<style type="text/css" media="all">@import "/modules/cck/content.css";</style>
<style type="text/css" media="all">@import "/modules/cck/fieldgroup.css";</style>
<style type="text/css" media="all">@import "/modules/event/event.css";</style>
<style type="text/css" media="all">@import "/modules/node/node.css";</style>
<style type="text/css" media="all">@import "/modules/poll/poll.css";</style>
<style type="text/css" media="all">@import "/modules/pollfield/pollfield.css";</style>
<style type="text/css" media="all">@import "/modules/system/defaults.css";</style>
<style type="text/css" media="all">@import "/modules/system/system.css";</style>
<style type="text/css" media="all">@import "/modules/user/user.css";</style>
<style type="text/css" media="all">@import "/modules/image/contrib/image_attach/image_attach.css";</style>
<style type="text/css" media="all">@import "/themes/conan2/style.css";</style>
<link rel="stylesheet" type="text/css" href="../../themes/conan2/sansJS.css" />
</head>
<body >
<script type="text/javascript">
<!--
//window.onload=montre; supprimé
//active la feuille de style dynamique
document.getElementsByTagName("link")[0].href="../../themes/conan2/dynmenu.css"
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>
<div id="container">
<div id="haut">
<div id="site_title"><a href="/" title="Index Page"><img src="../../themes/conan2/images/hyboria_title.jpg" /></a></div>
<div id="about">
<div id="block-menu-207" class="block block-menu">
<div class="content">
<ul class="menu">
<li class="leaf"><a href="/node/197">A propos d'hyboria.info</a></li>
<li class="leaf"><a href="/contact">Nous contacter</a></li>
</ul>
</div>
</div>
</div>
<div id="site_search_global">
<div id="site_search_MT"></div>
<div id="site_search_L"></div>
<div id="site_search_MM">
<form action="/search" method="post">
<div id="search"><input class="form-text" type="text" size="25" value="" name="keys" /> <input class="form-submit" type="submit" value="Recherche" /></div>
</form>
</div>
<div id="site_search_R"></div>
<div id="site_search_MB"></div>
</div>
<div id="hmenu_global">
<div id="hmenu_L"></div>
<div id="hmenu">
<div id="block-block-13" class="block block-block">
<div class="content"><!--paging_filter--><div id="menu">
<dl class="smaller">
<dt onmouseover="javascript:montre('smenu1');"><a href="">Actualités</a></dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="/actualites/home">Nos actualités</a></li>
<li><a href="/interviews/home">Interviews</a></li>
<li><a href="/aggregator">Actualités RSS</a></li>
<li><a href="/poll/home">Sondages</a></li>
</ul>
</dd>
</dl>
<dl class="sep">
<dt onmouseover="javascript:montre();">|</dt>
</dl>
<dl class="smaller">
<dt onmouseover="javascript:montre('smenu2');"><a href="">Généralités</a></dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>
<li><a href="/node/230">Age of Conan</a></li>
<li><a href="/node/247">Conan JDR</a></li>
<li><a href="">Cinéma & TV</a></li>
<li><a href="">Romans</a></li>
<li><a href="">Comics & BDs</a></li>
</ul>
</dd>
</dl>
<dl class="sep">
<dt onmouseover="javascript:montre();">|</dt>
</dl>
<dl class="smaller">
<dt onmouseover="javascript:montre('smenu3');"><a href="/connaissances/home">Connaissances</a></dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<ul>
<li><a href="/connaissances/geo">Géographie</a></li>
<li><a href="/connaissances/histoire">Histoire</a></li>
<li><a href="/connaissances/culture">Culture</a></li>
<li><a href="/connaissances/mytho">Mythologie</a></li>
<li><a href="/connaissances/perso">Personnages</a></li>
<li><a href="/connaissances/best">Bestiaire</a></li>
<li><a href="/connaissances/autres">Autres</a></li>
</ul>
</dd>
</dl>
<dl class="sep">
<dt onmouseover="javascript:montre();">|</dt>
</dl>
<dl class="smaller">
<dt onmouseover="javascript:montre('smenu4');"><a href="/guides/home">Aides de jeu</a></dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
<ul>
<li><a href="/guides/general">Général</a></li>
<li><a href="/guides/classes">Classes</a></li>
<li><a href="/guides/artisanat">Artisanat</a></li>
</ul>
</dd>
</dl>
<dl class="sep">
<dt onmouseover="javascript:montre();">|</dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu5');"><a href="">Ressources</a></dt>
<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
<ul>
<li><a href="/image">Images</a></li>
<li><a href="/videos/home">Vidéos</a></li>
<li><a href="/audio">Sons</a></li>
<li><a href="/telechargements/home">Téléchargements</a></li>
<li><a href="/links/home">Liens</a></li>
<li><a href="/dev">Citations de développeurs</a></li>
</ul>
</dd>
</dl>
<dl class="sep">
<dt onmouseover="javascript:montre();">|</dt>
</dl>
<dl class="smaller">
<dt onmouseover="javascript:montre('smenu6');"><a href="">Communauté</a></dt>
<dd id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');">
<ul>
<li><a href="/recits/home">Récits</a></li>
<li><a href="/quotes/home">Citations</a></li>
</ul>
</dd>
</dl>
<dl class="sep">
<dt onmouseover="javascript:montre();">|</dt>
</dl>
<dl class="forum"">
<dt onmouseover="javascript:montre();"><a href="/forum">Forum</a></dt>
</dl>
</div>
</div>
</div>
(etc.)
Le site en prod peut être vu ici:
http://www.hyboria.info
Mon problème est le suivant: Sur IE7, lorsque l'on tente d'ouvrir un menu déroulant par dessus le cadre principal, celui-ci se ferme dès que l'on arrive dans la zone de contenu.
Je n'ai pas se problème sous FF, Opera, Safari. J'ai eu le problème sous IE6 mais il a été réglé en modifiant un peu le css, notamment les positions. Mais rien n'y fait pour IE7. Quelqu'un peut m'éclairer?
Merci beaucoup d'avance!
Et soyez indulgents sur le css.
J'accepte avec plaisir tout commentaire et conseil mais je débute vraiment alors je suis sans doute loin de faire quelque chose d'optimisé. Modifié par Luneh (02 Jul 2007 - 22:37)