La solution css reste légère et efficaces pour authant que les images que tu veux utiliser soient pas trop
lourdes, sinon tu peut jouer avec les couleures sans images se qui te feras gagner du poids.
le resultat:
http://www.rank-design.ch/client/menu.html
fichier css:
div.bord {
border: solid 1px #000000;
width: 142px;
}
a.bouton:link{
width: 140px;
display: block;
color: #006BB5;
text-decoration: none;
padding-top: 7px;
padding-bottom: 7px;
background-color: #FFFF00;
}
a.bouton:visited{
width: 140px;
display: block;
color: #006BB5;
text-decoration: none;
padding-top: 7px;
padding-bottom: 7px;
background-color: #FFFF00;
}
a.bouton:hover{
width: 140px;
display: block;
color: #EEDC00;
text-decoration: none;
padding-top: 7px;
padding-bottom: 7px;
background-color: #3366FF;
}
.bouton{text-align:center; font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight: bold; color:#006BB5;}
fichier html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="<!-- chemin de ton fichier css -->" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- ton bouton -->
<div class="bord"><a href="
http://www.google.ch" class="bouton">Accueil</a></div>
</body>
</html>
a { /* Ici le bouton normal * /
display:block;
background:url("adressedetonimage") 0 0 no-repeat;
text-decoration: none;
}
a:hover { */ Ici le bouton a afficher lors du survol */
background:url("adressedetonimage") 0 0 no-repeat;
}
Où dois-je le placer? Je suis un peu débutante ^^ Je n'y connais pas grands chose au CSS, html. Mais je connais bien le BBcode (C'est un code très simple pour les forum ^^) Mais bon ça pas du tout rapport ^^
Es ce que je met ce code dans le code de ma barre de navigation ?
Merci de m'aider^^
Tu trouveras facilement pleins de cours, de tutoriaux ou de scripts et notamment sur http://www.siteduzero.com/.
Pour insérer ces codes, va voir par-là: http://www.siteduzero.com/tutoriel-3-13517-mettre-en-place-le-css.html
Je suis nouvelle ici et je viens me réintégrer à cette vieille conversation...
J'ai une autre question par rapport à ta méthode...
J'aimerai que lorsque je survol mon bouton :
d'une part, il change d'apparence (ça c'est bon j'ai compris maintenant, grace à ton post un peu plus haut ^^)
d'autre par, qu'il fasse également apparaître un texte à un autre endroit de la page
Est-ce possible et comment faire ?
Merci d'avance
Loona