Décalage et disparition menu horizontal

Bonjour,
j'ai installé le menu horizontal que j'ai trouvé dans vos excellents tutos.
je l'ai intégré dans spip à cette adresse :
--http://www.abelia-sablage.com

Le code est exactement le même que trouvé dans le tuto sauf

#menu {
position: relative; /* j'ai mis ici relative */
top: 0;
left: 0;
z-index:100;
width: 100%; /* correction pour Opera */
}

mais comme vous le voyez le résultat est que le menu décale le bas de la page.
merci de bien vouloir m'aider je suis sûr que ce n'est pas grand chose mais je ne suis pas calé du tout.

Et si je mets pour le sous menu

#menu dd {
position:absolute;
display: none;
border: 1px solid gray;
}

alors les sous menus ne font plus 100%?
Modifié par stagos (08 Mar 2008 - 08:04)

Dans le tuto, le passage qui parle de ton problème est celui-ci :

Attention aux décalages ! Les menus déroulants utilisent la propriété "display : block" et "display : none". Au départ et lorsqu'ils sont masqués, les sous-menus ont la valeur "none", cela signifie qu'ils n'occupent aucun espace dans la page.
En s'affichant, ils occupent alors un espace qui n'existait pas avant et peuvent "pousser" le reste de votre site !
C'est pourquoi, dans ces cas là, il faudra toujours positionner le menu et le site à part (chacun en position absolue) et leur donner un z-index (profondeur) différent, comme vous le voyez sur l'exemple de résultat. Dans ce cas, le menu sera placé au-dessus du reste du site et s'affichera sans le gêner.

OK
merci pour ta réponse rapide.
J'ai trouvé comme ça :

#menu dd {
position:absolute;
display: none;
border: 1px solid gray;
width: 12em;
}

merci quand même à cet excellent site.
Modifié par stagos (07 Mar 2008 - 19:58)

... et je vois que ça marche.

Ca m'interesse, j'utilise ce même tuto et j'ai des difficulté pour placer le menu horizontalement dans le conteneur, exactement comme tu l'as fait. Si t'as ton exemple (ton code) à me faire voir, je suis preneur.
Modifié par lodemars (07 Mar 2008 - 20:17)

lodemars a écrit :
... et je vois que ça marche.

Ca m'interesse, j'utilise ce même tuto et j'ai des difficulté pour placer le menu horizontalement dans le conteneur, exactement comme tu l'as fait. Si t'as ton exemple (ton code) à me faire voir, je suis preneur.

Edit : click droit> afficher le code...

j'essai maintenant d'insérer des boucles spip si t'as des idées.
merci

Bon j'ai avancé voici ma boucle mais je ne comprends pas pkoi les menu ne disparaissent pas j'ai pourtant mis les fonction correctement :

<div id="menu">
	<BOUCLE_rubriques (RUBRIQUES) {racine} {par num titre, titre}>	
	<dl>	
				<dt onmouseover="javascript:montre('#TITRE');">[(#TITRE|couper{80})]</dt>
		   <!-- <dt onmouseover="javascript:montre('smenu1');">Menu 1</dt> -->
				<dd id="#TITRE" onmouseover="javascript:montre(#TITRE');" onmouseout="javascript:montre('');">
		   <!-- <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">-->
		<ul>
			  <BOUCLE_article (ARTICLES){id_rubrique}>
 				<li><a href="#URL_ARTICLE">#TITRE</a></li>
			  </BOUCLE_article>
			</ul>
		</dd>
	</dl>
	</BOUCLE_rubriques>
</div>

Modifié par stagos (07 Mar 2008 - 21:54)

je continue a mettre des solutions :
je vois que ma balise #titre doit poser des problèmes car il y a des caractères spéciaux je vas essayer e la remplacer par un ID ce sera plus propre.

Mince je sais pas faire ça avec spip......
Modifié par stagos (07 Mar 2008 - 22:05)

Bonjour,

Serait-il possible d'utiliser un titre plus explicite pour ce sujet que «Un peu d'aide svp merci»? Ce titre pourrait correspondre à la quasi-totalité des sujets ouverts sur Alsacréations! Et forcément, ça n'aide pas à:

- avoir des réponses (les gens passent à côté...);
- avoir des réponses de qualité (les gens ne savent pas de quoi parle le sujet, et peuvent répondre à côté car ils n'auront pas le problème exposé bien en tête).

De plus, l'équipe de modération d'Alsacréations souhaite ardemment ne pas se retrouver avec un forum farci à 90% de sujets disant «Help!», «À l'aide» ou «J'ai un problème», et préfère voir un forum un peu mieux tenu et un poil plus lisible, ce que l'on comprendra sans peine.

Donc: merci de corriger le titre de ce sujet, ce qui peut se faire en éditant le tout premier message.

Bonne continuation.

Oui en effet excusez-moi ...

Bien pour ceux qui ont un site sous spip et qui veulent ce genre de menu voila ce qu'il faut faire.
1) ajouter avant la balise head de inc-head.html
Ce code appel la fonction javascript avec l' ID_RUBRIQUE comme id de menu unique dans la boucle.

<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('#ID_RUBRIQUE'+i)) {document.getElementById('#ID_RUBRIQUE'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

2)Ajouter à la fin de votre css habillage.css :
Peut être le #menu dd est à revoir par un pro mais ça fonctionne.

/********************************************************/
/**************MENU FLY-OUT ALSACREATION****************/

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: relative; /* --absolute-- placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: none;
background: #FBDC8A;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
position:absolute;
display: none;
border: 1px solid gray;
width: 12em;
}
#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: #494947;
color:#FFFFFF;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}

3) et enfin ajouter là où vous souahitez voir votre menu (inc-entete.html par ex.):

<div id="menu">
	<BOUCLE_rubriques (RUBRIQUES) {racine} {par num titre, titre}>	
	<dl>	
	<dt onmouseover="javascript:montre('#ID_RUBRIQUE');">[(#TITRE|couper{80})]</dt>
	<dd id="#ID_RUBRIQUE" onmouseover="javascript:montre('#ID_RUBRIQUE');" onmouseout="javascript:montre('');">
	<ul>
    <BOUCLE_article (ARTICLES){id_rubrique}>
    <li><a href="#URL_ARTICLE">#TITRE</a></li>
    </BOUCLE_article>
	</ul>
	</dd>
	</dl>
	</BOUCLE_rubriques>
</div>

voilà j'espère avoir rendu service.
J'utilise spip 1.9.2.
Modifié par stagos (08 Mar 2008 - 08:28)