| 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.
Lors d’un survol (a :hover), on change la couleur des marges hautes et basses, pour créer un effet d’enfoncement, de relief.
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.
Source : http://batraciens.net/css-astuces/b...
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 */
background-color:#CC0000 ; /* couleur du bouton */
color:white ; /* couleur du texte */
font-size:15px ; /*taille du texte */
margin:0px ; /* la marge extérieur autour des boutons est =0 (les boutons se touchent) */
padding:4px; /* la marge intérieur autour des boutons est de 4 pixels*/
border:1px solid; /* il y a une bordure solide de 1 pixel autour de chaque bouton */
border-color:red black black red ; /* couleurs des 4 cotés des bordures, dans le sens des aiguilles d'une montre */
text-align:center; /* centre le texte de chaque bouton */
width:200px } /* fixe la largeur de chaque bouton à 200 pixel */
a.menu1:hover {
border-top:2px solid brown; /* change la couleur et l'épaisseur de la bordure haute lors du survol par la souris */
border-bottom:2px solid #CC0005 ; /* change la couleur et l'épaisseur de la bordure basse lors du survol */
padding:3px 4px 3px 4px } /* diminue la marge intérieure haute et basse du bouton survolé, pour compenser l'augmentation de la taille de la bordure */
</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>
