Cours et tutoriels sur la création de site
Nos scripts
MySpeach
MySpeach est un chat php sans base de donnée, rapide, léger et facile à prendre en main. DEMO
MyPHPUpload
MyPHPUpload est un script d'upload sécurisé écrit en PHP. DEMO
GrapAgenda
Agenda PHP et MySQL avec comptes utilisateurs et administration. DEMO
Livre PHP
Menu de navigation horizontal en CSS
Cours / tutoriel écrit le 30-07-2010 par sky
Exemple de menu horizontal en HTML + CSS très simple
Un menu est généralement une liste d'élément.
Une façon correct d'affichage une liste d'éléments est d'utiliser les balises <ul> et <li>.
Un code HTML type de menu :
<ul id="menu">
<li><a href="/">Accueil</a></li>
<li><a href="/">A propos</a></li>
<li><a href="/">Réalisations</a></li>
<li><a href="/">Contact</a></li>
<li><a href="/">Devis</a></li>
</ul>
<li><a href="/">Accueil</a></li>
<li><a href="/">A propos</a></li>
<li><a href="/">Réalisations</a></li>
<li><a href="/">Contact</a></li>
<li><a href="/">Devis</a></li>
</ul>
Maintenant le code CSS :
ul#menu {
list-style:none;
}
ul#menu li {
display: inline;
white-space:nowrap;
}
list-style:none;
}
ul#menu li {
display: inline;
white-space:nowrap;
}
Explications :
Le display:inline affiche les <li> sur une seul ligne.
Le white-space:nowrap empèche la liste de se mettre sur deux lignes (ou plus).
le list-style:none cache le petit rond à gauche des listes (le bullet en anglais)
Résultats ici : http://www.viaphp.net/demo/codes/css/menu-horizontal.htm
Bon, ceci est vraiment le menu le plus basic possible à l'horizontal avec les balide ul et li.
Voici un exemple un peux plus complet :
ul#menu {
list-style:none;
padding:0;
margin:0
}
ul#menu li {
display:inline;
white-space:nowrap;
}
ul#menu li a{
padding:6px 10px;
text-decoration:none;
color:darkblue;
background:#f0f0f0
}
ul#menu li a:hover{
color:red;
background:#dedede
}
list-style:none;
padding:0;
margin:0
}
ul#menu li {
display:inline;
white-space:nowrap;
}
ul#menu li a{
padding:6px 10px;
text-decoration:none;
color:darkblue;
background:#f0f0f0
}
ul#menu li a:hover{
color:red;
background:#dedede
}
Résultats ici : http://www.viaphp.net/demo/codes/css/menu-horizontal-2.htm
Commentaires
grisbi le 30-04-2011
simple et tres bien un bon exercice pour debuter et comprendre le couple html/css
Liens - Qui sommes-nous ? - Informations légales - Contact - © viaPHP.net