Menu et sous menu en horizontal

Bonjour amis informaticiens, et plus précisément dev!

Voila, je suis informaticien mais pas spécialisé dans le dev, et j'ai quelques soucis auxquel je fais fasse pour la construction du site web de mon groupe.

En effet, depusi un moment je cherche comment caller mon sous menu en horizontal.

Voici le site en question : outlate.free.fr

Quand on passe sur le bouton "groupe" le sous menu apparait bien ,mais j'aurais souhaité le mettre en dessous du premier niveau du menu.

J'ai bien essayé le "display:inline" sur le "niveau2 li" mais rien a faire, ça veut pas...

Alors voici mon CSS concernant mon menu :

ul#menuh {
	width: 390px;
	height: 27px;
	margin-left: 60px;
	list-style-type: none; /* On enleve les puces*/
	height: 30px;
	background-image:url("images/menu.png");
	-moz-box-shadow: 1px 1px 8px #000;
	float: left;
	position: relative;
}	

ul#menuh li {
	width: 65px;
	height: 27px;
	line-height: 28px;
	text-align: center;
	float: left;
	position: relative;
}

ul#menuh li a {
	color: #ffffff;
	text-decoration: none;
	font-family: ARIAL, GENEVA, SANS-SERIF;
	font-size: 16px;
	display: block; 
	font-weight: ;
	position: relative;
}

ul#menuh li a:hover {
	color: #ffffff;
	display: block; 
	font-weight: bold;
	Font-size: 16px;
	background-image:url("images/menu2.png");
	position: relative;
}
	
div#menuh ul ul{
   position:  absolute;
   top: 32;
   left: ;
   display:none
} 
 
div#menuh ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menuh ul.niveau2 li.sousmenu:hover ul.niveau3 {
	background-image:url("images/menu.png");
        display:block;
	list-style-type: none;	
        -moz-box-shadow: 1px 1px 8px #000;
	z-index:10;
}

Il est possible que le code soit vraiment dégueu, mais soyez indulgent, c'est vraiment un début!

Merci à tous ceux qui tenterons de m'aider!!!

Bonne journée à tous et bon week end!
Modifié par jojosatriani (13 Jun 2010 - 20:12)

Salut et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

Bonne continuation

Bonjour!

Milles excuses, j'ai fais ça dans la précipitation, ne me blâmez pas, j'ai lu les règles du forum...

Voici voila donc maintenant que mon code est inséré comme il faut dans le post, qu'en pensez vous?

Merci à tous ceux qui voudrons bien m'aider, et encore désolé pour la bourde!

Et d'abord je suis pas dev je suis graphiste !

Tu veux faire quoi en fait, avoir ton sous menu horizontal c'est ça ?

OUi tout à fait, pour exemple ce serait celui du site de metallica :

http://www.metallica.com/

Mais en css, sans animation particulière, et en dessous.

J'avais vu la propriété "inline" mais ça ne fait rien...

Bonjour,

pas dev non plus , intégrateur et expert accessibilité.



Ton avant-dernière règle me semble louche alors qu'elle est un élément essentiel pour aller positionner la seconde ligne sous la première quelle que soit le sous-menu considéré.

div#menuh ul ul { 
   position:  absolute; 
   top: 32; 
   left: ; 
   display:none 
}  

32 quoi ? 32px nan ?
left: 0; nan ?

Est-ce que tu as une première ligne horizontale ? Et une seconde ligne idem ?
Pour tester, laisse un sous-menu ouvert en permanence. Colle une classe "ouvert" sur un item de menu principal et applique la même valeur de display à un enfant de .ouvert que tu le fais avec :hover au survol (je sais pas si je suis clair: tu appliques les mêmes règles à cet item que tu le ferais si la souris passait dessus, c'est plus rapide pour tester).

Question subsidiaire : pourquoi tu as div#menuh et ul#menuh ? Soit tu as modifié ton code HTML sans modifier les CSS, soit tu as deux id identiques dans ta page (c'est interdit, ça fait planter et ici c'est inutile) mais dans les deux cas c'est une erreur. Et il se trouve que tu n'as absolument pas besoin de préciser la nature de l'élément (div ou ul) devant un id dans 99% des cas comme ici ...

Bonsoir Felipe,

Oui effectivement j'ai oublier quelques caractères lors de mes saisies... mais apparemment Firefox interprète comme il faut mes erreurs...

Pour ce qui est de tes conseils, quand je suis sur le bouton qui dispose des sous menu, es lignes sont générées en dessous de ce bouton, ce qui je pense voudrais dire qu'il n'y a pas de problème pour disposer les boutons tous sur la même ligne au lieu des uns en dessous des autres...

ou alors, je pense à l'instant, faudrait-il refaire un menu avec une nouvelle div, et appeler ce menu plutôt qu'un bouton??

Sincèrement j'aime beaucoup le dev, mais je suis vraiment débutant dans les utilisations correcte du CSS/HTML/PHP...

Pour ce qui est des test, pour moi c'est pas clair...

Alors je ne sais pas si c'est la conceptions de mon menu qui pose problème, mais bon, les boutons apparaissant bien en dessous du menu, mais a la vertical (moi les souhaitant à l'horizontal sur la première ligne sous le menu principal (suis-je clair aussi??)) je me disais que ce n'est qu'une petite boulette dans mon code... c'est plus grave?? xD

En tout cas merci de tes conseils, mais la franchement.

Voici mon code actuellement, et aucun changement (j'ai viré le ul#menuh) :

div#menuh {
	width:390px;
	height:29px;
	float: left;
	margin-left:305px;
	margin-top:110px;	
	background-image:url("images/menu.png");
	-moz-box-shadow: 1px 1px 8px #000;
	display: inline;
	list-style-type: none;
} 
	
#menuh li {
	width: 65px;
	height: 27px;
	line-height: 28px;
	text-align: center;
	float: left;
	position: relative;
	list-style-type: none;
}

#menuh li a {
	color: #ffffff;
	text-decoration: none;
	font-family: ARIAL, GENEVA, SANS-SERIF;
	font-size: 16px;
	display: block; 
	font-weight: ;
	position: relative;
}

#menuh li a:hover {
	color: #ffffff;
	display: block; 
	font-weight: bold;
	Font-size: 16px;
	background-image:url("images/menu2.png");
	position: relative;
	}
	
div#menuh ul ul{
   position: relative;
   display:inlive;
   background-image:url("images/menu.png");

}  
  
div#menuh ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menuh ul.niveau2 li.sousmenu:hover ul.niveau3 {
	background-image:url("images/menu.png");
    display:inline;
	list-style-type: none;	-moz-box-shadow: 1px 1px 8px #000;
	z-index:10;
}

Bonjour!

Merci de ta remarque et de ton lien, qui confirme ce que je pensais, mais ce que je demande est en faite un peu différent :

http://www.metallica.com/

Voir sur ce site comment le menu réagi. La première rubrique est au dessus du bouton qui développe le sous menu... à partir de la pour moi je ne trouve pas qu'il y ait de problème...

Qu'en penses tu?

jojosatriani a écrit :
Qu'en penses tu?

Que ça correspond exactement au cas que j'évoquais dans mon explication, mais en pire.
J'avais pas regardé le lien du site de Metallica auparavant.

Fais un test : Mets toi sur le lien fanzone et va ensuite sur le sous menu myspace. Et me dis pas que tu n'est pas obligé de faire un effort pour y parvenir.

Si encore le sous menu restait affiché lorsqu'on ne survole plus le lien principal je dis pas, mais la présentement, on est obligé de se faire le mouvement vers le haut puis de suivre horizontalement la barre du sous menu jusqu'au lien.
Pour quelqu'un comme toi qui visiblement maîtrise parfaitement sa souris ça te prendra juste quelques fractions de secondes en plus, pour moi qui ait des mains fragiles ça m'en prendra un peu plus, mais dis toi qu'il y a des gens qui seront dans l'impossibilité de suivre ce cheminement.

En ne proposant pas ce genre d'ergonomie défaillante, on satisfait un plus grand éventail d'internautes, et on garde plus facilement ses visiteurs sur son site.

Bonjour à tous,

Je suis top newbee sur ce forum alors verry sorry si je fais qql bêtises

Mon but est d'avoir moi aussi la chose que sur le site métallica à savoir un menu horizontal déroulant avec affichage des sous-menu vers le haut.
Le plus c'est d'avoir cela en bas de page.

Actuellement j'ai réussi à faire qqch mais en regardant du code sur internet et en l'adaptant à ma sauce (très mauvaise). Mon problème est que je suis limité à 8 menus

J'ai le code mais il est énorme !!! Puis-je le mettre en entier sur le forum ?

Merci à tous

PV

jojosatriani a écrit :
OUi tout à fait, pour exemple ce serait celui du site de metallica :

http://www.metallica.com/

Mais en css, sans animation particulière, et en dessous.

J'avais vu la propriété "inline" mais ça ne fait rien...