menu horizontal fluide centré, effet incrusté.

Un menu centré et fluide dans tout les navigateurs

les règles de style pour le centrage se limite à deux lignes de bases ...

Pour centré ce menu en horizontale on commence par indiqué text-align:center dans ul, puis on formate le li en display:inline;

Pour donner une taille au lien: balise a, on formate en display:inline-block;

base CSS utile pour centrer et style un menu


ul      {text-align:center;}
li      {display:inline;}
a       {display:inline-block;}
a:hover {}

Il n'y a rien de compliqué.

pour l'exemple , couleur et effet de survol, voici le code de cette démo:

ul#mci {text-align:center;
   background:#F246E6;
}
#mci li {display:inline;
}
#mci a {display:inline-block;
   color:white;text-decoration:none;
   line-height:25px;font-size:18px;
   padding:0 1em;margin:5px;
   -moz-border-radius:3px;border-radius:3px;
}
#mci a:hover{
   -moz-box-shadow:
inset  1px  1px   1px #3EB233, 
inset -1px -1px   1px #A7EAF9,
inset  0   10px  20px #5FD64A, 
inset  0   -10px 20px #ABFCA4;
   -webkit-box-shadow:
inset  1px  1px   1px #3EB233, 
inset -1px -1px   1px #A7EAF9,
inset  0   10px  20px #5FD64A, 
inset  0   -10px 20px #ABFCA4;
   -ms-box-shadow:
inset  1px  1px   1px #3EB233, 
inset -1px -1px   1px #A7EAF9,
inset  0   10px  20px #5FD64A, 
inset  0   -10px 20px #ABFCA4;
   box-shadow:
inset  1px  1px   1px #3EB233, 
inset -1px -1px   1px #A7EAF9,
inset  0   10px  20px #5FD64A, 
inset  0   -10px 20px #ABFCA4;
}

Ecrire un commentaire




Quelle est la troisième lettre du mot awoljs ?