| Votre campagne ici |
 | |
Nous sommes le vendredi 29 août 2008 |
Les scripts 
CSS
Il s’agit d’un système de boutons très simple :
A chaque bouton correspond un lien.
Au naturel, il n’y a aucune couleur de fond définie pour les boutons. C’est l’objet de la redéfinition de la balise a ...
Lors d’un survol (a :hover), on change la couleur du fond et de la police.
On peut écrire les styles ci-contre a style et a :hover style, et non a.menu1 style et a.menu1 :hover style. Simplement, dans ce cas, ce sont TOUS les liens de la page qui seront traités comme ces boutons.
Si on veut restreindre cet effet de survol (roll-hover) à certains liens, on crée alors une classe (ici la classe .menu1) et on l’affecte aux seuls liens que l’on souhaite styler.
On peut aussi multiplier les syles (.menu2, .menu3, .menu4, ....), et donc les menus et leurs apparences.
exemple :
Accueil Articles Liens Écrire
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
a.menu1 {
text-decoration:none ; /* supprime le soulignement des liens */
display:block ; /* Crée un retour à la ligne à la fin de chaque bouton */
margin-top:5px ; /* Crée un marge de 5 pixels en haut des boutons */
text-align:center; /* centre le texte de chaque bouton */
width:200px ; /* fixe la largeur de chaque bouton à 200 pixel */
border-style:ridge ; /* défini le style de l'encadrement des boutons */
border-width:3px ; /* fixe la largeur de l'encadrement des boutons à 3 px */
padding:2px;} /* défini la marge intérieur des boutons à 2px */
a.menu1:hover {color:#FFFF00 ; /* change la couleur de la police lors du survol par la souris */
background-color:#0000FF ; } /* change la couleur du fonds lors du survol par la souris */
</style>
</head>
<body>
<a class="menu1" href="">Accueil</a>
<a class="menu1" href="">Articles</a>
<a class="menu1" href="">Liens</a>
<a class="menu1" href="">Écrire</a>
</body>
</html>
