demande d'aide

aligner un menu html, css Créations de Thèmes
poete Membre non connecté

Booster Bazooka
Le 16/07/2016 à 18h11
Bonjour,

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]