Problème avec le ":active" ! Assez Urgent !
Résolu/Fermé
antoinegdln4
Messages postés
33
Date d'inscription
mardi 28 juin 2011
Statut
Membre
Dernière intervention
27 janvier 2016
-
4 déc. 2013 à 00:29
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 4 déc. 2013 à 13:33
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 4 déc. 2013 à 13:33
5 réponses
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
Modifié par animostab le 4/12/2013 à 04:14
Modifié par animostab le 4/12/2013 à 04:14
Bonjour
c'est simple je ne donne pas la solution mais t'explique le problème que tu peux résoudre juste en réfléchissant
si tu as mis un top à 110 px sur .monBouton
.monBouton se trouve donc a 110 px du haut de la page
si après tu mets top:2px à .monBouton:active, il va se retrouver à 2 px du haut de la page et non pas 2 px plus haut
donc si tu veux juste qu'il monte de 2 px lors du active, fais juste une soustraction.
voila
Un petit merci vaut mieux qu'une grande ignorance
c'est simple je ne donne pas la solution mais t'explique le problème que tu peux résoudre juste en réfléchissant
si tu as mis un top à 110 px sur .monBouton
.monBouton se trouve donc a 110 px du haut de la page
si après tu mets top:2px à .monBouton:active, il va se retrouver à 2 px du haut de la page et non pas 2 px plus haut
donc si tu veux juste qu'il monte de 2 px lors du active, fais juste une soustraction.
voila
Un petit merci vaut mieux qu'une grande ignorance
Merci beaucoup ! :)
Encore une question , dans le même code, tu peux me dire pourquoi le :hover ne fonctionne pas ?
Encore une question , dans le même code, tu peux me dire pourquoi le :hover ne fonctionne pas ?
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
Modifié par animostab le 4/12/2013 à 13:24
Modifié par animostab le 4/12/2013 à 13:24
si le hover ne fonctionne pas c'est normal a cause du @keyframe
pour ca tu vas tricher
tu fais
@-webkit-keyframes black {
from { background-color: #111111; -webkit-box-shadow:: 0 0 9px #333; }
to { background-color: #111111; -webkit-box-shadow:: 0 0 9px #333; }
}
puis le hover
a:hover.monBouton {
-webkit-animation-name: black;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
color:#FFFFFF;
background-color:#111111;
}
evidemment tu déclare ca aussi pour les autres navigateurs parce que tes @keyframe ne sont déclarée que pour chrome ou safari pas pour les autres navigateurs
voir cette page https://www.alsacreations.com/tuto/lire/1299-timing-des-animations-et-des-transitions-en-css3.html
tu as quand meme des erreurs
dans .monBouton
- line-height:1; (1 quoi ? px em ... ?)
- 2 fois font-size
- 2 fois padding (un padding à soit 2 soit 4 nombre mais pas 3 comme tu l'as fait)
- background et background-color (avec une couleur déclarée dans background et une déclarée dans background-color)
déclare aussi tes radius comme cela
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
Un petit merci vaut mieux qu'une grande ignorance
pour ca tu vas tricher
tu fais
@-webkit-keyframes black {
from { background-color: #111111; -webkit-box-shadow:: 0 0 9px #333; }
to { background-color: #111111; -webkit-box-shadow:: 0 0 9px #333; }
}
puis le hover
a:hover.monBouton {
-webkit-animation-name: black;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
color:#FFFFFF;
background-color:#111111;
}
evidemment tu déclare ca aussi pour les autres navigateurs parce que tes @keyframe ne sont déclarée que pour chrome ou safari pas pour les autres navigateurs
voir cette page https://www.alsacreations.com/tuto/lire/1299-timing-des-animations-et-des-transitions-en-css3.html
tu as quand meme des erreurs
dans .monBouton
- line-height:1; (1 quoi ? px em ... ?)
- 2 fois font-size
- 2 fois padding (un padding à soit 2 soit 4 nombre mais pas 3 comme tu l'as fait)
- background et background-color (avec une couleur déclarée dans background et une déclarée dans background-color)
déclare aussi tes radius comme cela
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
Un petit merci vaut mieux qu'une grande ignorance
antoinegdln4
Messages postés
33
Date d'inscription
mardi 28 juin 2011
Statut
Membre
Dernière intervention
27 janvier 2016
1
4 déc. 2013 à 13:31
4 déc. 2013 à 13:31
Et ben merci encore animostab ! :)
Je suis très reconnaissant :)
Je suis très reconnaissant :)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
4 déc. 2013 à 13:33
4 déc. 2013 à 13:33
pas de quoi @+