Création bouton à état en CSS (fichier séparé
pedro
-
prosthetiks Messages postés 1309 Statut Membre -
prosthetiks Messages postés 1309 Statut Membre -
Bonjour, Je suis entrain d'apprendre la création de site web et j'ai fini la partie mise en forme avec CSS
je me pose une question à sur une des parties, je sais maintenant créer des hyperliens à états ( voir des textes ). Je me demande maintenant si en utilisant la même méthode je pourrais créer des boutons à état en utilisant des images.
Ex: le bouton est un carré rouge quand on ne fait rien, il devient bleu quand on le survol et il devient rose quand on clique dessus.
J'ai essayé de cette manière mais cela n'a pas marché :P
Code HTML:
<a href="http://www.google.com">google</a>
Code CSS:
a
{
<img src="normal.jpg" alt="bouton normal" />
}
a:hover
{
<img src="survol.jpg" alt="bouton survole" />
}
Merci d'avance pour vos réponses (je précise que je code mon CSS dans un fichier séparé)
je me pose une question à sur une des parties, je sais maintenant créer des hyperliens à états ( voir des textes ). Je me demande maintenant si en utilisant la même méthode je pourrais créer des boutons à état en utilisant des images.
Ex: le bouton est un carré rouge quand on ne fait rien, il devient bleu quand on le survol et il devient rose quand on clique dessus.
J'ai essayé de cette manière mais cela n'a pas marché :P
Code HTML:
<a href="http://www.google.com">google</a>
Code CSS:
a
{
<img src="normal.jpg" alt="bouton normal" />
}
a:hover
{
<img src="survol.jpg" alt="bouton survole" />
}
Merci d'avance pour vos réponses (je précise que je code mon CSS dans un fichier séparé)
3 réponses
-
Salut,
Deux choses:
Tu n'as pas le droit de mettre du code HTML dans du code CSS.
a {
<img src="normal.jpg" alt="bouton normal" />
}
a:hover {
<img src="survol.jpg" alt="bouton survole" />
}
Pas contre tu peux très bien le faire de la sorte:
<html> <head> <title></title> <style type="text/css" media="screen"> #bouton{ background:url('http://eu.blizzard.com/store/_images/fr-FR/nav-bar.gif') no-repeat 0 0; height:83px; width:152px; } a:hover #bouton{ background-position: 0 -83px; } a:active #bouton{ background-position: -152px -83px; } </style> </head> <body> <a href="#"> <div id="bouton"> </div> </a> </body> </html>
++-
-
-
Ok je comprend mieux ( c'est parce que j'ai pris l'habitude de travailler sur 2 fichiers ), donc
#bouton{
background:url('http://eu.blizzard.com/store/_images/fr-FR/nav-bar.gif') no-repeat 0 0;
height:83px;
width:152px;
}
a:hover #bouton{
background-position: 0 -83px;
}
a:active #bouton{
background-position: -152px -83px;
}
ca c'est le code CSS et que veut dire #bouton? pourquoi un #? -
#******* veut dire id******** donc si je met #menu je dois donner à ma balise div id menu exemple <div id="menu"></div> ce n'est pas obliger d'être un div non plus.
Si ça aurais été .menu alors cella aurais été une classe. Donc <div class="menu"></div> -
-
-
Ton code html n'est qu'un lien et non un bouton.
Tu ne peux pas utiliser du html dans le css.
Tu peux appliquer les effets que tu veux à un lien mais j'ai un doute concernant le bouton.
Si tu as une image qui sert de lien et que tu veux qu'elle change si on la survole, il faut utiliser du Javascript il me semble.
Un conseil, révise ton cours sur le css ( => siteduzero ) et se sera plus claire pour toi ;) -
Moi je le fais toujours comme ceci et ça fonctionne bien.
<div class="bouton">
<a href="dedi.php"></a>
</div>
.bouton {
height: auto;
width: 225px;
margin-right: auto;
margin-left: auto;
}
.bouton a {
display:block;
width:218px;
line-height:50px;
text-align:center;
vertical-align:middle;
color:white;
text-decoration:none;
background-image: url(images/btnadmin.png);
background-repeat: no-repeat;
height: 95px;
}
.bouton a:hover {
background-image: url(images/btnadmin_hover.png);
background-repeat: no-repeat;
}
tu peux utiliser un span aussi si tu souhaite en mettre plus d'un cote à cote.
