[résolu] Menu horizontal et spip

Bonjour,

après avoir découvert le css, je me lance maintenant dans le spip.
J'ai créé un squelette avec un menu horizontal fortement inspiré de celui de Raphaël http://css.alsacreations.com/modelesmenus/hd1.htm.
J'ai inclus les boucles spip après avoir lu l'article de Thierry http://www.spip-contrib.net/Menus-deroulant-vertical-ou.
Tout fonctionnait bien sauf le fait que les sous-menus ne se fermaient plus.
J'ai trouvé un article de Michel Deboom sur http://perso.orange.fr/michel.deboom/menualsa/hrz-nojs/menu-hrz.htm qui expliquait qu'il suffisait de placer la commande

onmouseover="javascript:montre();

dans les blocs supérieurs et inférieurs pour que ça fonctionne.
C'est vrai sur Opéra et sur Firefox mais si ça fonctionne sur IE, je ne peux plus descendre dans ces menus...

Voici l'adresse du site : http://netia59a.ac-lille.fr/~douaiwaziers/

et le code du menu :

dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#menu dl {
	float: left;
	width: 150px;
}

#menu dt {
	text-align: center;
	font-size: 0.82em;
	font-weight: bold;
	background: #ccc;
	line-height: 25px;
	border: 1px solid gray;
	margin: 1px;
}

#menu dd {
	margin-top:5px;
 	display:none;
	width: 150px; /* Opéra */
	border: 1px solid gray;
	/* partie dynamique */
 	position: absolute;
 	z-index:100;
	font-size: 0.82em;
	color:#666;
}

#menu li {
	font-size: 0.82em;
	text-align: center;
	background: #fff;
}

#menu li a, #menu dt a {
	color: #666;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
}

#menu li a:hover, #menu dt a:hover {
	background: #FEF3EF;
}

Merci d'avance pour les pistes !
Modifié par codascii (30 Aug 2006 - 13:31)

bonjour,

proposition js inadaptée , je retire.

essai plutot d'appliqué un : display:inline-block; aux balise <a> des sous menu .
en repoussant le paragraphe ou l'image au dessous de la zone du menu en position ouverte , le bug n'apparait plus.
..... Encore des telescopages dans le layout

++
Modifié par gcyrillus (29 Aug 2006 - 23:45)

gcyrillus a écrit :

en repoussant le paragraphe ou l'image au dessous de la zone du menu en position ouverte , le bug n'apparait plus.

Bonjour,

Le problème est que les sous-menus vont être beaucoup plus grands dans peu de temps, je ne peux donc pas laisser un espace entre le menu et le reste... Et si je laisse descendre le contenu de la page à l'ouverture des sous-menus, on va attraper le mal de mer
@+

gcyrillus a écrit :
essai plutot d'appliqué un : display:inline-block; aux balise <a> des sous menu .

Merci gcyrillus ! ça fonctionne !
C'est vrai que ça fait moins joli sous IE mais comme il perd du terrain par rapport aux autres navigateurs...

Ce qui était bizarre aussi c'est que la problème apparaissait avec ma colonne de gauche mais pas celle de droite...
En fait je n'ai pas compris pourquoi maintenant ça fonctionne

bonjour,

en fait ce probleme de "layout" est en partie eliminé en en le conferent au paragraphe se situant sous le menu , mais voila , l'image est la aussi, et là , " pas reussi" à enlever ce defaut d'affichage sans la repousser , reste à se reporté sur la balise <a> , en conferant le layout a l'un des 2 groupe paragraphe/image ou lien , ça passe...
si le display:inline-block ne te convient pas , un zoom:1; ferait peut-etre l'affaire.

++
Modifié par gcyrillus (30 Aug 2006 - 13:52)

Bonjour gcyrillus,

le

zoom:1;

appliqué à la balise <a> ne fonctionne pas je suis donc revenu au

display:inline-block;

.
Le menu ma plait quand même , je vais laisser comme ça...

Merci encore pour la solution et tes explications !
Modifié par codascii (30 Aug 2006 - 14:07)