Dotclear

Vous n'êtes pas identifié(e).

Annonce

#1 2012-01-24 09:41:08

bebr
Membre
Lieu : Roquefort-Les-Pins
Inscription : 2007-06-18
Site Web

Petit pb de css dans mon menu déroulant

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é)

Hors ligne

#2 2012-01-24 11:38:25

pierrevg
Membre
Inscription : 2005-04-13
Site Web

Re : Petit pb de css dans mon menu déroulant

Bonjour,

Question con, pourquoi ne pas utiliser le plugin menu ?

Hors ligne

#3 2012-01-24 14:04:48

adjaya
Membre
Lieu : Provence - Luberon
Inscription : 2006-09-05
Site Web

Re : Petit pb de css dans mon menu déroulant

pierrevg a écrit :

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

#4 2012-01-24 14:07:59

adjaya
Membre
Lieu : Provence - Luberon
Inscription : 2006-09-05
Site Web

Re : Petit pb de css dans mon menu déroulant

@ 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

#5 2012-01-24 18:03:29

bebr
Membre
Lieu : Roquefort-Les-Pins
Inscription : 2007-06-18
Site Web

Re : Petit pb de css dans mon menu déroulant

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 ;)

Hors ligne

#6 2012-01-24 18:09:43

Philippe
Stagiaire
Lieu : Toulon
Inscription : 2004-06-13
Site Web

Re : Petit pb de css dans mon menu déroulant

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

#7 2012-01-24 20:18:50

bebr
Membre
Lieu : Roquefort-Les-Pins
Inscription : 2007-06-18
Site Web

Re : Petit pb de css dans mon menu déroulant

Voilà mon fichier HTML de la page d'accueil...avec son menu ;o)
C'et ici : http://dl.free.fr/jV4fAYWXi

Hors ligne

#8 2012-01-25 00:28:56

adjaya
Membre
Lieu : Provence - Luberon
Inscription : 2006-09-05
Site Web

Re : Petit pb de css dans mon menu déroulant

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

#9 2012-01-25 08:29:11

bebr
Membre
Lieu : Roquefort-Les-Pins
Inscription : 2007-06-18
Site Web

Re : Petit pb de css dans mon menu déroulant

Merci Adjaya. Tu as une piste ? ;o)

Hors ligne

#10 2012-01-25 08:35:19

bebr
Membre
Lieu : Roquefort-Les-Pins
Inscription : 2007-06-18
Site Web

Re : Petit pb de css dans mon menu déroulant

...et tant que j'y suis ; j'ai tenté d'installer ton plugin menu, mais avec ductile ça ne fonctionne pas.

Hors ligne

#11 2012-01-25 11:06:08

bebr
Membre
Lieu : Roquefort-Les-Pins
Inscription : 2007-06-18
Site Web

Re : Petit pb de css dans mon menu déroulant

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.

Hors ligne

Vous n'êtes pas identifié(e).

Pied de page des forums

Sites map