Créer un menu horizontal

[e101mk2]

Nous allons apprendre ici à créer une liste, et en faire un menu! Ce cour est casiment obligatoire, car, il voit de nouvelle fonction du css

Une liste:

Une liste, en xhtml ressemble à ceci:

Code: Tout sélectionner

<ul>
<li>Patate</li>
<li>Pomme</li>
<li>viande</li>
<li>pain</li>
</ul>

Enfin bref, il n'ya rien à comprendre, c'est comme le tableau!
<ul> Permet de dire qu'il y à un liste, <li> permet d'ajoutez une "truc" à la liste, dans notre exemple, du texte!

Le menu

Donc nous allons créer un menu horizontal.
Le code xhtml pour ce menu est celui ci:

Code: Tout sélectionner

<ul id="menu">
<li><a href="acceuil.html">accueil</a></li>
<li><a href="forum">forum</a></li>
<li><a href="blog">blog</a></li>
<li><a href="partenaire.html">partenaire</a></li>
</ul>

Si vous testez ce code, vous verrez un une liste vertical. Évidemment, à qui on appel quand le xhtml ne suffit pas?

Le css

tout d'abord, on veut virez le "rond noir" à cotés de nos liste!

Code: Tout sélectionner

#menu
{
list-style-type: none;
}

Maintenant tous les lien dans le menu! Mais comment peut on le faire?

Code: Tout sélectionner

#menu a
{
text-decoration: none;
background : #000;
color : #fff;
}

La premmiere ligne dit que tous les balise "a" qui ce trouve dans id "menu" doit être affectez.
text-decoration est la décoration que met le navigateur lors d'un lien (lien bleu soulignez), ici "none" qui veut dire que on veut pas que le navigateur mette sa couleur de lien.

Code: Tout sélectionner

#menu li 
{
float : left;
border : 1px solid #fff;
}

Un float pour rendre le menu horizontal et non vertical, et une bordure.

Donc voila le code css:

Code: Tout sélectionner

#menu
{
list-style-type: none;
}
#menu a
{
background : #000;
color : #fff;
text-decoration: none;
}
#menu li 
{
float : left;
border : 1px solid #fff;
}

Il n'est pas magnifique? Mais peut être qui manque quelque chose! Si on veut que au passage de la sourie, sa inverse les couleurs! Comment fait-on?

Avec du javascript! Oui mais non, lol, ce n'est pas trop la catégorie.
Avec du css! Et oui, le css est assez puissant pour faire sa.

Code: Tout sélectionner

#menu a:hover
{
background : #fff;
color : #000;
}

Grace à hover, au passage de la sourie sur un lien du menu, le lien change de couleur!

Allez le code complet

Code: Tout sélectionner

#menu
{
list-style-type: none;
}
#menu a
{
background : #000;
color : #fff;
text-decoration: none;
}
#menu li 
{
float : left;
border : 1px solid #fff;
}
#menu a:hover
{
background : #fff;
color : #000;
}

Et voilou, finit

[Cclleemm]

Hey super !
Heu, là j'ai rien à dire si ce n'est bravo et continue comme ça ! Je te remercie !

[e101mk2]

J'ai une mauvaise nouvelle!
En effet, le site auquel je m'occupe à besoin d'un coup de fouée. Je suis le seul capable de lui donnez. Mon temps va devenir très précieux tant que nos objectif ne sont pas atteint. A savoir, réunir le plus de fan sonic.
Le seul problème, je peut pas Et m'occupez du site ET de mes tuto. Sa sera chacun leur tour respectif. Ce qui donne des tutoriel plus lent à venir. J'en profite aussi pour dire que, j'ai finit le xhtml. Ce cours était trés important si vous voulez continuez à apprendre le xhtml et css avec des technique évoluez que vous apprendrez sur divers autre site. Si vous avez bien compris, le prochain tuto sera sur les serveur WAMP et LAMP, dans la catégorie php.

[Cclleemm]

Franchement merci pour tes superbes tutos qui serviront très vite à la communauté de MSG !!!
Prends ton temps pour ton site et je te souhaite bonne chance ! Merci de nous avoir appris plein de chose ! Et puis à bientot pour le suite du programme : le PHP

Ciao !