28172 sujets

CSS et mise en forme, CSS3

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! Smiley smile
Modifié par jojosatriani (13 Jun 2010 - 20:12)
Salut et bienvenue parmi nous Smiley smile

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. Smiley cligne

Bonne continuation Smiley smile

upload/1-code.gif
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! Smiley ohwell
Et d'abord je suis pas dev je suis graphiste ! Smiley langue

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

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

Smiley lol

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... Smiley rolleyes

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... Smiley biggol

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;
}
Salut,

Je voudrais juste attirer ton attention sur le fait qu'un menu déroulant n'est pas particulièrement ergonomique déjà à la base, mais la double navigation horizontale ajoute encore de la complexité pour rendre la navigation encore plus défaillante.
Une explication sur le sujet

Finalement le rendu actuel avec le sous menu vertical est très certainement moins pire. Smiley smile
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? Smiley smile
jojosatriani a écrit :
Qu'en penses tu? Smiley smile

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. Smiley cligne

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. Smiley smile
Bonjour à tous,

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

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 Smiley bawling

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... Smiley lol
Sujet clos
Aller à