Création bouton à état en CSS (fichier séparé
pedro
-
prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention -
prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention -
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é)
A voir également:
- Création bouton à état en CSS (fichier séparé
- Fichier bin - Guide
- Fichier epub - Guide
- Fichier rar - Guide
- Comment réduire la taille d'un fichier - Guide
- Fichier .dat - Guide
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:
++
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>
++
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 ;)
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.
<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.
<head>
<title></title>
est-ce que c'est gu html avec css dans le même fichier ?
#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 #?
Si ça aurais été .menu alors cella aurais été une classe. Donc <div class="menu"></div>