Vous n'êtes pas identifié(e).
13 février 2024 Sortie de Dotclear 2.29
Bonjour à tous ;
J'ai un petit bug au niveau de mon menu déroulant sur un blog en cours de construction (dont je ne peux vous donner l'url pour le moment, désolé).
En fait, mon menu s'affiche très bien, mais pour les sous-catégories (lorsque ma souris pointe sur une catégorie principale) elles se rétractent et disparaissent.
Voici mes codes :
Dans _top.html
<div id="header">
<div id="top">
<p id="logo" class="nosmall"><a href="{{tpl:BlogURL}}"><img src="{{tpl:BlogPublicURL}}/2011/miseenplace/logo.png" alt="{{tpl:lang Home}}" /></a></p>
<h1><span><a href="{{tpl:BlogURL}}">{{tpl:BlogName encode_html="1"}}</a></span></h1>
<p id="blogdesc" class="nosmall">{{tpl:BlogDescription}}</p>
</div>
<ul id="prelude">
<li class="nosmall"><a href="#main">{{tpl:lang To content}}</a></li>
<li><a href="#blognav">{{tpl:lang To menu}}</a></li>
<li><a href="#search">{{tpl:lang To search}}</a></li>
</ul>
<!-- # --BEHAVIOR-- publicTopAfterContent -->
{{tpl:SysBehavior behavior="publicTopAfterContent"}}
{{tpl:SimpleMenu id="sn-top" class="supranav nosmall"}}
<ul id="menu">
<tpl:Categories level="1">
<tpl:LoopPosition start="1" length="10">
<li class="{{tpl:CategoryIfCurrent}}"><a href="{{tpl:CategoryURL}}">{{tpl:CategoryTitle encode_html="1"}}</a>
<tpl:CategoryFirstChildren>
<tpl:CategoriesHeader><ul class="sousMenu"></tpl:CategoriesHeader>
<li><a href="{{tpl:CategoryURL}}">{{tpl:CategoryTitle encode_html="1"}}</a></li>
<tpl:CategoriesFooter></ul></tpl:CategoriesFooter>
</tpl:CategoryFirstChildren>
</li>
<tpl:CategoriesFooter>
</ul>
</tpl:CategoriesFooter>
</tpl:LoopPosition>
</tpl:Categories>
</div>
...Le "tpl:CategoriesFooter" doit poser problème, mais lequel ?
Et mon style CSS référent :
#menu {list-style-type: none; margin-top: 255px; margin-left: 80px; padding: 0; position: absolute; top: 0; left: 0; }
#menu li{background: #ad3f4c; float: left; margin: 0; padding: 4px 8px; border: 0; }
#menu li a {color: #fff; }
#menu li a:link, #menu li a:visited {display: block; margin: 0; padding: 4px 8px; text-decoration: none; font-color: #fff; }
#menu li a:hover {color: #eedd6e; }
#menu li a:active {color: #75d16e; }
#menu .sousMenu {color: #000; }
#menu .sousMenu {display: none; list-style-type: none; margin: 0; padding: 0; border: 0; }
#menu .sousMenu li {float: none;}
#menu .sousMenu li a:link, #menu .sousMenu li a:visited {display: block; text-decoration: none; }
#menu .sousMenu li a:hover {color: #eedd6e; }
#menu li:hover .sousMenu {display: block; }
Bref, je m'y perds... :-/
Merci pour votre aide.
(au besoin, je donne accès à la partie publique du site en construction ; en privé)
Bertrand ; administrateur de : http://acturoc.fr/2029ouplus ; http://omarlatuee.free.fr ; http://crispysnails.free.fr ; http://lasduvolantroquefortois.fr ; http://sophiatt.com...et d'autres à venir... :) !
Hors ligne
Bonjour,
Question con, pourquoi ne pas utiliser le plugin menu ?
pas sûr que ca aide, le plugin menu ne fabrique pas de css, il embarque juste au besoin celui du thème à condition d'être configuré pour ce thème.
Photo, Art et Création Numérique : http://benoit-grelier.photo7.fr/
Hors ligne
@ bebr
A défaut de pouvoir vérifier de visu, peux-tu t’assurer que le code source xhtml de ton menu est valide et conforme à ton attente?
Photo, Art et Création Numérique : http://benoit-grelier.photo7.fr/
Hors ligne
Comment je vérifie cela, je n'y connais rien (ou peu) en codage...
Ce que j'ai fait là je l'ai péché à différents endroits sur ce forum.
Merci ;)
Bertrand ; administrateur de : http://acturoc.fr/2029ouplus ; http://omarlatuee.free.fr ; http://crispysnails.free.fr ; http://lasduvolantroquefortois.fr ; http://sophiatt.com...et d'autres à venir... :) !
Hors ligne
Si tu ne peux pas donner l'URL du blog, tu peux enregistrer le code source de la page et en faire un simple fichier html dont tu nous donnerais l'adresse ?
Hors ligne
Voilà mon fichier HTML de la page d'accueil...avec son menu ;o)
C'et ici : http://dl.free.fr/jV4fAYWXi
Bertrand ; administrateur de : http://acturoc.fr/2029ouplus ; http://omarlatuee.free.fr ; http://crispysnails.free.fr ; http://lasduvolantroquefortois.fr ; http://sophiatt.com...et d'autres à venir... :) !
Hors ligne
Le code xhtml du menu a l'air ok, ce serait donc un problème purement css. Je sais pour m'y être essayé que de mettre au point le css d'un menu déroulant compatible avec la plupart des navigateurs et restant accessible ( ce qui n'est jamais totalement vrai ), ben c'est pas si évident.
D’où provient ton code css?
Si tu ne t'y connait pas trop en code je te conseille vivement de partir d'un code existant qui a fait ses preuves, les ressources ne manquent pas sur internet.
Photo, Art et Création Numérique : http://benoit-grelier.photo7.fr/
Hors ligne
Merci Adjaya. Tu as une piste ? ;o)
Bertrand ; administrateur de : http://acturoc.fr/2029ouplus ; http://omarlatuee.free.fr ; http://crispysnails.free.fr ; http://lasduvolantroquefortois.fr ; http://sophiatt.com...et d'autres à venir... :) !
Hors ligne
...et tant que j'y suis ; j'ai tenté d'installer ton plugin menu, mais avec ductile ça ne fonctionne pas.
Bertrand ; administrateur de : http://acturoc.fr/2029ouplus ; http://omarlatuee.free.fr ; http://crispysnails.free.fr ; http://lasduvolantroquefortois.fr ; http://sophiatt.com...et d'autres à venir... :) !
Hors ligne
A force de persévérence...
Je donne mon CSS pour mon menu, il est tiré du thème Chesnut :
#menu {
margin-top : 80px;
list-style : none;
padding : 2px 2px 0 2px;
background : no-repeat left top;
position : relative;
margin-left: 160px;
}
#menu li {
float : left;
line-height : 25px;
margin : 0 1px;
}
#menu a {
margin-left: auto;
color : #fff;
display : block;
padding : 0 8px;
float : left;
background: #ad3f4c;
text-decoration: none;
}
#menu a:hover {
background : #5873aa;
text-decoration : none;
}
#container_menu:hover #menu li:hover a {
color : #554c46;
background : #5873aa;
}
#menu li.category-current > a {
background : #b1910f;
text-decoration : none;
color : #fff;
}
#menu li.category-current a:hover {
background : #b1910f;
}
#menu li:hover .sousMenu {
left : auto;
}
#menu .sousMenu {
position : absolute;
left : -9999em;
margin-top : 24px;
min-width : 150px;
background: transparent;
list-style-type: none;
padding : 0 8px;
z-index : 100;
}
#menu .sousMenu ul {
overflow : hidden;
}
#menu .sousMenu ul li {
line-height : 22px;
border-bottom : 1px solid #cdc3ab;
padding : 2px 0;
list-style-image: none;
list-style-type: none;
}
#menu .sousMenu ul li, .sousMenu ul li a {
float : none !important ;
color : #554c46;
background : none !important ;
}
#menu .sousMenu ul li a:hover {
background : #d0c6b0 !important ;
}
Merci pour votre aide en tout cas.
Bertrand ; administrateur de : http://acturoc.fr/2029ouplus ; http://omarlatuee.free.fr ; http://crispysnails.free.fr ; http://lasduvolantroquefortois.fr ; http://sophiatt.com...et d'autres à venir... :) !
Hors ligne
Vous n'êtes pas identifié(e).