demande d'aide
aligner un menu html, css
Créations de Thèmes
poete Membre non connecté
Booster Bazooka
-
Booster Bazooka
- Voir le profil du membre poete
- Inscrit le : 16/04/2012
- Site internet
Je voulais vous demander une petite aide pour aligner mon menu en htm css.
Mon menu est actuellement sur deux lignes et je voulais que ça soit sur une seule ligne bien centré.
Mon menu actuel :

Je souhaite arriver à faire ça :

Mon code :
Caché:
Code HTML :
[html] <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>menu</title> <style> html,body { padding:0; margin:0; height:100%; } #menu-demo2, #menu-demo2 ul{ padding:0; margin:0; list-style:none; text-align:center; } #menu-demo2 li{ display:inline-block; position:relative; border-radius:8px 8px 0 0; } #menu-demo2 ul li{ display:inherit; border-radius:0; } #menu-demo2 ul li:hover{ border-radius:0; } #menu-demo2 ul li:last-child{ border-radius:0 0 8px 8px; } #menu-demo2 ul{ position:absolute; z-index: 1000; max-height:0; left: 0; right: 0; overflow:hidden; -moz-transition: .8s all .3s; -webkit-transition: .8s all .3s; transition: .8s all .3s; } #menu-demo2 li:hover ul{ max-height:50em; } /* background des liens menus */ #menu-demo2 li:first-child{ background-color: #00FFFF; background-image:-webkit-linear-gradient(top, #00FFFF 0%, #2A2333 100%); background-image:linear-gradient(to bottom, #00FFFF 0%, #2A2333 100%); } #menu-demo2 li:nth-child(2){ background-color: #729EBF; background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%); background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%); } #menu-demo2 li:nth-child(3){ background-color: #F6AD1A; background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%); background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%); } #menu-demo2 li:last-child{ background-color: #CFFF6A; background-image:-webkit-linear-gradient(top, #CFFF6A 0%, #677F35 100%); background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%); } /* background des liens sous menus */ #menu-demo2 li:first-child li{ background:#2A2333; } #menu-demo2 li:nth-child(2) li{ background:#333A40; } #menu-demo2 li:nth-child(3) li{ background:#9F391A; } #menu-demo2 li:last-child li{ background:#677F35; } /* background des liens menus et sous menus au survol */ #menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{ background:#65537A; } #menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{ background:#729EBF; } #menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{ background:#F6AD1A; } #menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{ background:#CFFF6A; } /* les a href */ #menu-demo2 a{ text-decoration:none; display:block; padding:8px 60px; color:#fff; font-family:arial; } #menu-demo2 ul a{ padding:8px 0; } #menu-demo2 li:hover li a{ color:#fff; text-transform:inherit; } #menu-demo2 li:hover a, #menu-demo2 li li:hover a{ color:#000; } </style> </head> <body> <ul id="menu-demo2"> <li><a href="#">Menu</a> <ul> <li><a href="/articles/?url=/0-root/54-qui-suis-je">Qui suis-je</a></li> <li><a href="/articles/?url=/4-divers-cours/55-aider-le-site">Aider le site</a></li> <li><a href="/articles/?url=/0-root/56-la-presse-parle-de-nous">On parle de nous</a></li> <li><a href="/newsletter/index.php">Newsletter</a></li> <li><a href="/contact/index.php">Contact</a></li> <li><a href="/search/search.php">Recherche</a></li> <li><a href="/sitemap/index.php">Plan du site</a></li> </ul> </li> <li><a href="#">Grammaire</a> <ul> <li><a href="/articles/?url=/1-grammaire-kabyle-berbere/3-avant-propos">Avant propos</a></li> <li><a href="/articles/?url=/1-grammaire-kabyle-berbere/4-l-alphabet-kabyle-berbere">L'alphabet Kabyle</a></li> <li><a href="/articles/?url=/1-grammaire-kabyle-berbere/5-le-nom-kabyle-berbere">Le nom</a></li> <li><a href="/articles/?url=/1-grammaire-kabyle-berbere/6-l-adjectif-kabyle-berbere">L'adjectif</a></li> <li><a href="/articles/?url=/1-grammaire-kabyle-berbere/7-les-pronoms-personnels-kabyle-berbere">Pronoms personnels</a></li> <li><a href="/articles/?url=/1-grammaire-kabyle-berbere/8-les-pronoms-possessifs-kabyle-berbere">Pronoms possessifs</a></li> <li><a href="/articles/?url=/1-grammaire-kabyle-berbere/9-les-pronoms-demonstratif-kabyle-berbere">Pronoms démonstratifs</a></li> <li><a href="/articles/?url=/1-grammaire-kabyle-berbere/10-les-adverbes-kabyle-berbere">Les adverbes</a></li> <li><a href="/articles/?url=/1-grammaire-kabyle-berbere/11-demonstratifs-kabyle-berbere">Les démonstratifs</a></li> <li><a href="/articles/?url=/1-grammaire-kabyle-berbere/12-presentatifs-kabyle-berbere">Les présentatifs</a></li> <li><a href="/articles/?url=/1-grammaire-kabyle-berbere/13-les-indefinis">Les indéfinis</a></li> <li><a href="/articles/?url=/1-grammaire-kabyle-berbere/14-les-verbes-et-la-conjugaison-kabyle-berbere">Verbes et conjugaison </a></li> <li><a href="/articles/?url=/1-grammaire-kabyle-berbere/15-la-preposition-d">La préposition "d"</a></li> <li><a href="/articles/?url=/1-grammaire-kabyle-berbere/16-l-auxiliaire-de-predication-d">L'auxiliaire de prédication "d"</a></li> </ul> </li> <li><a href="#">Vocabulaire</a> <ul> <li><a href="/articles/?url=/2-vocabulaire-kabyle-berbere/2-animaux-insectes-et-oiseaux">Animaux, insectes et oiseaux</a></li> <li><a href="/articles/?url=/2-vocabulaire-kabyle-berbere/17-vocabulaire-kabyle-berbere">Le corps humain</a></li> <li><a href="/articles/?url=/2-vocabulaire-kabyle-berbere/59-les-couleurs/">Les couleurs</a></li> <li><a href="/articles/?url=/2-vocabulaire-kabyle-berbere/19-caractere-humain">Caractère humain</a></li> <li><a href="/articles/?url=/2-vocabulaire-kabyle-berbere/20-expressions-usuelles-en-kabyle">Expressions usuelles</a></li> <li><a href="/articles/?url=/2-vocabulaire-kabyle-berbere/21-la-famille-en-kabyle">La Famille</a></li> <li><a href="/articles/?url=/2-vocabulaire-kabyle-berbere/22-les-fruits-en-kabyle">Les fruits</a></li> <li><a href="/articles/?url=/2-vocabulaire-kabyle-berbere/24-legumes-en-kabyle">Les Légumes</a></li> <li><a href="/articles/?url=/2-vocabulaire-kabyle-berbere/23-les-jours-de-la-semaine">Jours de la semaine</a></li> <li><a href="/articles/?url=/2-vocabulaire-kabyle-berbere/25-les-mois-de-l-annee">Les mois de l'année</a></li> <li><a href="/articles/?url=/2-vocabulaire-kabyle-berbere/26-les-nombres-en-kabyle">Les nombres</a></li> <li><a href="/articles/?url=/2-vocabulaire-kabyle-berbere/27-les-saisons-en-kabyle">Les saisons</a></li> <li><a href="/articles/?url=/2-vocabulaire-kabyle-berbere/28-les-vetements-en-kabyle">Les vêtements</a></li> <li><a href="/articles/?url=/2-vocabulaire-kabyle-berbere/29-les-verbes-courants-kabyles">Les verbes courants</a></li> <li><a href="/articles/?url=/3-conversation/30-se-pr-senter-en-kabyle">Se présenter</a></li> <li><a href="/articles/?url=/3-conversation/31-dire-l-heure-en-kabyle">Dire l'heure</a></li> </ul> </li> <li><a href="#">Cours divers</a> <ul> <li><a href="/articles/?url=/4-divers-cours/33-cours-pour-les-enfants">Cours pour les enfants</a></li> <li><a href="/articles/?url=/4-divers-cours/34-cours-des-membres">Cours des membres</a></li> <li><a href="/articles/?url=/4-divers-cours/35-exercices-kabyle-de-nos-membres">Exercices</a></li> <li><a href="/articles/?url=/4-divers-cours/36-m-7717-end-uccen">Textes de lecture</a></li> <li><a href="/articles/?url=/4-divers-cours/32-bac-berb-re">Bac Berbère</a></li> <li><a href="/articles/?url=/4-divers-cours/38-clavier-berb-re-latin">Clavier Berbère</a></li> <li><a href="/articles/?url=/4-divers-cours/37-cours-de-tamazight-100-berb-re/">Cours en Tamazight</a></li> </ul> </li> </ul> </body> </html> ------------> <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>menu</title> <style> html,body { padding:0; margin:0; height:100%; } #menu-demo2, #menu-demo2 ul{ padding:0; margin:0; list-style:none; text-align:center; } #menu-demo2 li{ display:inline-block; position:relative; border-radius:8px 8px 0 0; } #menu-demo2 ul li{ display:inherit; border-radius:0; } #menu-demo2 ul li:hover{ border-radius:0; } #menu-demo2 ul li:last-child{ border-radius:0 0 8px 8px; } #menu-demo2 ul{ position:absolute; z-index: 1000; max-height:0; left: 0; right: 0; overflow:hidden; -moz-transition: .8s all .3s; -webkit-transition: .8s all .3s; transition: .8s all .3s; } #menu-demo2 li:hover ul{ max-height:50em; } /* background des liens menus */ #menu-demo2 li:first-child{ background-color: #00FFFF; background-image:-webkit-linear-gradient(top, #00FFFF 0%, #2A2333 100%); background-image:linear-gradient(to bottom, #00FFFF 0%, #2A2333 100%); } #menu-demo2 li:nth-child(2){ background-color: #729EBF; background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%); background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%); } #menu-demo2 li:nth-child(3){ background-color: #F6AD1A; background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%); background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%); } #menu-demo2 li:last-child{ background-color: #CFFF6A; background-image:-webkit-linear-gradient(top, #CFFF6A 0%, #677F35 100%); background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%); } /* background des liens sous menus */ #menu-demo2 li:first-child li{ background:#2A2333; } #menu-demo2 li:nth-child(2) li{ background:#333A40; } #menu-demo2 li:nth-child(3) li{ background:#9F391A; } #menu-demo2 li:last-child li{ background:#677F35; } /* background des liens menus et sous menus au survol */ #menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{ background:#65537A; } #menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{ background:#729EBF; } #menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{ background:#F6AD1A; } #menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{ background:#CFFF6A; } /* les a href */ #menu-demo2 a{ text-decoration:none; display:block; padding:8px 60px; color:#fff; font-family:arial; } #menu-demo2 ul a{ padding:8px 0; } #menu-demo2 li:hover li a{ color:#fff; text-transform:inherit; } #menu-demo2 li:hover a, #menu-demo2 li li:hover a{ color:#000; } </style> </head> <body> <ul id="menu-demo2"> <li><a href="/articles/?url=/5-dictionnaire-kabyle/39-dictionnaire-francais-berbere">Traducteur</a> <ul> <li><a href="/articles/?url=/5-dictionnaire-kabyle/39-dictionnaire-francais-berbere">Traducteur</a></li> </ul> </li> <li><a href="#">Kabylie</a> <ul> <li><a href="/articles/?url=/9-la-kabylie/40-la-kabylie-et-les-kabyle">La Kabylie et les Kabyles</a></li> <li><a href="/articles/?url=/9-la-kabylie/41-la-langue-et-religion-des-kabyles">La langue et religion</a></li> <li><a href="/gallery/gallery.php">Photos</a></li> </ul> </li> <li><a href="/forum">Forum</a> <ul> <li><a href="/forum">Forum</a></li> <li><a href="#">Ancien forum</a></li> </ul> </li> <li><a href="/guestbook/">Livre d'or</a> <ul> <li><a href="/guestbook/">Livre d'or</a></li> </ul> </li> </ul> </body> </html> [/html] [html] <style type="text/css"><!-- .postlink { color: #368AD2; border-bottom-color: #368AD2; } .postlink { text-decoration: none; color: #d2d2d2; border-bottom: 1px solid #d2d2d2; padding-bottom: 0; } * { /* Reset browsers default margin, padding and font sizes */ margin: 0; padding: 0; } .auto-style1 { background-color: #FFFF00; } --></style> [/html]
Merci d'avance pour votre aide.
Swan Membre non connecté
Booster Mortier
-
Booster Mortier
- Voir le profil du membre Swan
- Inscrit le : 31/05/2013
- Site internet
Tu l'as placé en Header ou subheader ? regardedu coté du design.css , et vérifie la largeur de ces deux là ...
Swan.

bricodx Membre non connecté
Booster Bazooka
-
Booster Bazooka
- Voir le profil du membre bricodx
- Inscrit le : 15/09/2008
- Site internet
- Groupes :
Ton menu s'affiche automatiquement sur deux lignes parce qu'il n'a pas assez de place sur une seule ligne.
Alors effectivement tu vas me dire que ta page est bien assez large, et oui mais ça c'est à l'écran. Tu as placé ton menu dans le sub-header-content qui a une largeur définie et certainement insuffisante.
Dans le fichier design.css de ton thème, tu recherches div#sub-header-content et tu modifies la ligne width ou max-width. Ça va te permettre d'élargir le sub-header-content et donc laisser de la place pour ton menu
A+ Fred
Swan Membre non connecté
Booster Mortier
-
Booster Mortier
- Voir le profil du membre Swan
- Inscrit le : 31/05/2013
- Site internet
Étrangement c'est ce qui me semble lui avoir dit , dans les grandes lignes .. Mais bon !
Mais a 1 mn d'intervalle de postage .. c'est compréhensible

Swan.
Édité par Swan Le 16/07/2016 à 20h50

bricodx Membre non connecté
Booster Bazooka
-
Booster Bazooka
- Voir le profil du membre bricodx
- Inscrit le : 15/09/2008
- Site internet
- Groupes :

Fred
poete Membre non connecté
Booster Bazooka
-
Booster Bazooka
- Voir le profil du membre poete
- Inscrit le : 16/04/2012
- Site internet
Merci pour votre réponse.
Avez-vous regarder mon code html et css, ça viendrait pas par hasard du code ?
Merci
Swan Membre non connecté
Booster Mortier
-
Booster Mortier
- Voir le profil du membre Swan
- Inscrit le : 31/05/2013
- Site internet
Oui .. et la réponse est Non cela vient de la dimension du contenant, et pas du contenue en lui même.
Réponds aussi à cette question et tu auras ta réponse :
Tu l'as placé en Header ou subheader?
Swan.
Édité par Swan Le 17/07/2016 à 13h18

poete Membre non connecté
Booster Bazooka
-
Booster Bazooka
- Voir le profil du membre poete
- Inscrit le : 16/04/2012
- Site internet
Je l'ai placé dans le "Sous entête".
Merci
Swan Membre non connecté
Booster Mortier
-
Booster Mortier
- Voir le profil du membre Swan
- Inscrit le : 31/05/2013
- Site internet
Donc si tu n'as pas de "width" défini sur le subheader, dans le design.css, regarde sur le #global

Swan.

Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie
