28172 sujets

CSS et mise en forme, CSS3

Hello a tous,

Voici mon problème : J'ai un menu horizontal centrer avec 7 cases "Home/World/General Statistics/News/Partner/Contacts/About us". Je veux qu'au survole de "World" il y ai un sous menu qui apparaisse en dessous de ce World. Jusqu'ici rien de surprenant. Mais contre toute attente (j'aime instaurer du suspense dans mes sujets Smiley biggol ) j'arrive pas ! Le html est je pense bon, le css quand je survole pas World cache le #sousmenu, ce qui est normal, mais quand je survole World, rien ne change... Voici mes codes :

http://azledev.net84.net/slider.html


 <div>
            <ul id="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">World</a></li>
					<ul id="sousmenu">
					<li><a href="/mondes/ALPHA/">FR1 Alpha</a></li>
					<li><a href="/mondes/BETA/">FR2 Béta</a></li>	
					<li><a href="/mondes/GAMMA/">FR3 Gamma</a></li> 	
					<li><a href="/mondes/DELTA/">FR4 Delta</a></li> 	
					<li><a href="/mondes/EPSILON/">FR5 Epsilon</a></li> 
					<li><a href="/mondes/ZETA/">FR6 Zeta</a></li> 	
					<li><a href="/mondes/ETA/">FR7 Eta</a></li>	
					<li><a href="/mondes/THETA/">FR8 Théta</a></li>	
					<li><a href="/mondes/IOTA/">FR9 Iota</a></li>
					<li><a href="/mondes/KAPPA/">FR10 Kappa</a></li> 
					<li><a href="/mondes/LAMBDA/">FR11 Lambda</a></li>
					<li><a href="/mondes/MU/">FR12 Mu</a></li>
					<li><a href="/mondes/NU/">FR13 Nu</a></li>
					<li><a href="/mondes/XO/">FR14 Xi</a></li>
					<li><a href="/mondes/OMICRON/">FR15 Omicron</a></li>
					<li><a href="/mondes/PI/">FR16 Pi</a></li>
					<li><a href="/mondes/RHO/">FR17 Rho</a></li>
					<li><a href="/mondes/SIGMA/">FR18 Sigma</a></li>
					<li><a href="/mondes/TAU/">FR19 Tau</a></li> 
					<li><a href="/mondes/UPSILON/">FR20 Upsilon</a></li>
					<li><a href="/mondes/PHI/">FR21 Phi</a></li>
					<li><a href="/mondes/CHI/">FR22 Chi</a></li>
					<li><a href="/mondes/PSI/">FR23 Psi</a></li>
					<li><a href="/mondes/OMEGA/">FR24 Omega</a></li>
					<li><a href="/mondes/ATHENES/">FR25 Athènes</a></li>
					<li><a href="/mondes/BYZANCE/">FR26 Byzance</a></li>
					<li><a href="/mondes/CORINTHE/">FR27 Corinthe</a></li>
					<li><a href="/mondes/DELPHES/">FR28 Delphes</a></li>
					</ul>
                <li><a href="#">General Statistics</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Partner</a></li>
                <li><a href="#">Contacts</a></li>
                <li><a href="#">About us</a></li>
            </ul>

#menu {
    background: #E70739;
	margin: 5px 0px;
	padding: 0px;
	height: 50px;
	text-align: center; /*centre les menus */

}
#menu li a {
	position: relative;
	top: 10px;
	vertical-align: middle;
	font-family: 'ClementePDacExtraLight', sans-serif;
	text-decoration: none;
	color: #220030;
}

#menu li {
	display: inline-block; /* Aligne les <li> cote a cote */
	padding: 0px;
	list-style-type: none;
	width: 150px;
	height: 50px;
	font-size: 1.2em;
}

#menu li:hover{
    background: #B09F91;
	border-radius: 12px;

}
#sousmenu {
display:none; /* cache le sous menu */
}
#menu li:hover #sousmenu {
display:block; /* Menu apparais quand on survole le <li> "World" */
}


Need help, c'est la première fois que j'essaye un menu un peu complexe dans ce genre Smiley confused !

http://azledev.net84.net/slider.html
Modifié par azledev (05 Dec 2011 - 18:41)
Franchement, vu le contenu, à savoir:
1. une seule des catégories du menu a un sous-menu;
2. le nombre d'items dans le sous-menu est assez énorme.

Et vu les problèmes spécifiques aux menus déroulants:
1. inutilisable sur un périphérique tactile (tablette, smartphone);
2. utilisation au clavier problématique (demande l'utilisation d'un script JS bien fait, a minima);
3. impossible à adapter sur petits écrans via Media Queries;
4. problèmes potentiels d'accessibilité.

Je ne peux que te recommander de ne pas faire de menu déroulant.
D'autant plus que tu sembles être parti pour faire ton sous-menu en full-CSS (sans JavaScript), et donc tu t'exposes à la totalité des problèmes soulevés ci-dessus.

Ceci dit, pour répondre moins intelligemment au problème que tu exposes: le code HTML de ton menu est faux. Tu ne peux pas avoir un UL enfant d'un autre UL.
Modifié par fvsch (28 Nov 2011 - 08:54)
Merci pour ta réponse fvsch, non seulement elle est clair, mais aussi super enrichissante. Je n'avais pas du tout résonné comme sa. Et sa me parait évident qu'effectivement, un menu déroulant risque d’être problématique, effectivement c'étais partis pour être du full CSS.

Que me conseille tu ? Créer une page "World" carrément ? Le truc c'est qu'effectivement y'en a pas mal de monde, mais j'aurais voulu avoir une navigation rapide entre chaque et ne pas avoir a toujours retourné sur la même page... D'où cette solution que je voulais. Smiley decu

Merci pour ta réponse en tout cas !
azledev a écrit :
Que me conseille tu ? Créer une page "World" carrément ?

Oui. Dans tous les cas, même si tu crées un menu déroulant il te faut absolument un lien "World" cliquable qui mène à un index de rubrique qui reprend le contenu de ton sous-menu (à l'identique ou plus détaillé ou sous une autre forme...). En gros ton site doit d'abord être utilisable facilement sans menu déroulant, et ensuite tu peux éventuellement en rajouter un (même si souvent ça complique plus que ça n'aide).

Ta page "World" peut afficher un contenu d'introduction et proposer une navigation spécifique à la rubrique (en en-tête, dans une barre latérale à gauche ou à droite...), ou autre navigation spécifique. L'affichage de contenus précis de cette rubrique peut se faire avec un nouveau chargement de page (si on a un contenu conséquent pour chaque entrée), ou bien directement en JavaScript.

En gros il faut faire une conception de site web (sur le papier, avec des schémas et des wireframes) bien fichue, et ensuite ça s'implémente en HTML+CSS (et éventuellement JavaScript). Smiley smile
Merci pour les précieux conseils fvsch. Je vais faire mes "wireframes" (merci pour le vocabulaire Smiley murf ) pour ma page d’accueil (celle que je vous montrais) pour ensuite le faire en html/css. Je vais essayer de trouver quelque chose qui claque bien (ce qui me pose le plus de problème bien souvent trop "banal" Smiley confused ) pour ensuite passer a ma page World où je mettrais comme tu me le conseil tout les "Mondes" plus des ajouts des conseils etc que je n'aurais pas pu mettre via mon menu déroulant. Je l'ajouterais peut-être par la suite, mais je pense pas que sa sois la priorité aujourd'hui !

Pour l'ul enfant d'un autre ul j'ai bien corriger, sa fais donc sa :

<li>World
<ul><li>blabla</li><li>blabla2</li>.......</ul>
</li> <!-- Fin du <li> World -->


C'est exact ?

J'ai d'ailleurs eu un soucis pendant la création de mon menu, comme tu peux le voir j'ai essayer avec display:inline-block. Mais j'ai vu que c'étais possible avec float:left, j'ai tester par curiosité, mais pas moyen de le centrer !! Tout mon menu étais collé a gauche, les <li> floatais bien, mais pas centrer !

Y'a t-il un moyen de résoudre a sa ?

Merci encore pour tes réponses.
Modifié par azledev (29 Nov 2011 - 17:56)
azledev a écrit :
C'est exact ?

En dehors du commentaire qui n'utilise pas la syntaxe HTML, oui, c'est ça.

azledev a écrit :
Mais j'ai vu que c'étais possible avec float:left, j'ai tester par curiosité, mais pas moyen de le centrer !

Tu veux centrer du float:LEFT? Smiley lol
Je crois que ça va pas être possible.

azledev a écrit :
Y'a t-il un moyen de résoudre a sa ?

Si, tu vires float et tu remets display:inline-block. Smiley smile
Pourquoi utilises-tu float au juste?
Modifié par fvsch (28 Nov 2011 - 23:14)
a écrit :
En dehors du commentaire qui n'utilise pas la syntaxe HTML, oui, c'est ça.


Autant pour moi c'est modifié ^^

a écrit :
Tu veux centrer du float:LEFT?
Je crois que ça va pas être possible.


Bah oui sa me parait bizarre. Mais genre que tout les <li> float a droite de celui d'a coté, mais que le tout sois centrer ^^

J'utilise pas float, j'ai juste essayer avec cette technique car j'ai vu dans des tuto que le float left etais conseiller avec display:inline-block.

Mais quand j'ai vu que centrer étais impossible je suis rester sur mon idée de base : le display. Smiley cligne