Problème avec le ":active" ! Assez Urgent !
Résolu
antoinegdln4
Messages postés
34
Statut
Membre
-
animostab Messages postés 3003 Statut Membre -
animostab Messages postés 3003 Statut Membre -
Bonjour,
Je souhaite créer un calendrier de l'Avent en HTML5/CSS3 sans rien utiliser de compliquer. Le site est hebergé par Google Drive, (sans problème) et est pour les membres d'un clan sur le jeu World of Tanks.
Voici le Links : https://googledrive.com/host/0BzInHTDBvueidHFGTVgxaS05WXM/calendrier_avent_02DTC.html
Le problème ???
J'aimerais créer un effet pour que lorsque l'on clique sur un des boutons, il se lève de 2px. Activer un Top:2px en gros.
Là intervient le problème : Regardez dans le site, j'ai essayer de le faire pour le "01 décembre" .Le bouton se lève jusqu'à tout en haut sans activer le lien !!!
Je vous donne donc le code CSS3 : (le partie concernant le bouton 1, "monBouton")
(le .Dive c'est le header) .
[[Pour le code html, voyez le code source de la page]]
body {
background-image: url("noel.jpg");
}
@-webkit-keyframes greenPulse {
from { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
50% { background-color: #acf53d; -webkit-box-shadow:: 0 0 18px #acf53d; }
to { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
}
@-webkit-keyframes redPulse {
from { background-color: #a2285e; -webkit-box-shadow:: 0 0 9px #333; }
50% { background-color: #eb6aa3; -webkit-box-shadow:: 0 0 18px #eb6aa3; }
to { background-color: #a2285e; -webkit-box-shadow:: 0 0 9px #333; }
}
@-webkit-keyframes violet {
from { background-color: #62016d; -webkit-box-shadow:: 0 0 9px #333; }
50% { background-color: #c437d3; -webkit-box-shadow:: 0 0 18px #c437d3; }
to { background-color: #62016d; -webkit-box-shadow:: 0 0 9px #333; }
}
.dive {
position:absolute;
background-color:#4f4fd9;
opacity:0.85;
font-family: Century Gothic, Light ;
height: 60px;
width: 950px;
top: 20px;
left: 210px;
border-radius:10px;
text-align:center;
box-shadow: 10px 10px 50px black;
}
a.monBouton {
-webkit-animation-name: greenPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
.monBouton {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:#222222 url(overlay-button.png) repeat-x scroll 0 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.246094);
border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;
color:#FFFFFF !important;
cursor:pointer;
display:inline-block;
font-size:20px;
font-weight:bold;
line-height:1;
overflow:visible;
padding:10px 30px 12px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
font-size:14px;
padding:16px 30px 18px;
background-color:#91BD09;
top:110px;
left:15px;
box-shadow: 10px 10px 50px black;
}
.monBouton::-moz-focus-inner {
border:0 none;
padding:0;
}
.monBouton:hover {
background-color:#111111;
color:#FFFFFF;
}
.monBouton:active{
top:2px
}
Je vous remercie donc d'avance de me dire quel est le problème...
Cordialemment,
Antoine.
Je souhaite créer un calendrier de l'Avent en HTML5/CSS3 sans rien utiliser de compliquer. Le site est hebergé par Google Drive, (sans problème) et est pour les membres d'un clan sur le jeu World of Tanks.
Voici le Links : https://googledrive.com/host/0BzInHTDBvueidHFGTVgxaS05WXM/calendrier_avent_02DTC.html
Le problème ???
J'aimerais créer un effet pour que lorsque l'on clique sur un des boutons, il se lève de 2px. Activer un Top:2px en gros.
Là intervient le problème : Regardez dans le site, j'ai essayer de le faire pour le "01 décembre" .Le bouton se lève jusqu'à tout en haut sans activer le lien !!!
Je vous donne donc le code CSS3 : (le partie concernant le bouton 1, "monBouton")
(le .Dive c'est le header) .
[[Pour le code html, voyez le code source de la page]]
body {
background-image: url("noel.jpg");
}
@-webkit-keyframes greenPulse {
from { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
50% { background-color: #acf53d; -webkit-box-shadow:: 0 0 18px #acf53d; }
to { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
}
@-webkit-keyframes redPulse {
from { background-color: #a2285e; -webkit-box-shadow:: 0 0 9px #333; }
50% { background-color: #eb6aa3; -webkit-box-shadow:: 0 0 18px #eb6aa3; }
to { background-color: #a2285e; -webkit-box-shadow:: 0 0 9px #333; }
}
@-webkit-keyframes violet {
from { background-color: #62016d; -webkit-box-shadow:: 0 0 9px #333; }
50% { background-color: #c437d3; -webkit-box-shadow:: 0 0 18px #c437d3; }
to { background-color: #62016d; -webkit-box-shadow:: 0 0 9px #333; }
}
.dive {
position:absolute;
background-color:#4f4fd9;
opacity:0.85;
font-family: Century Gothic, Light ;
height: 60px;
width: 950px;
top: 20px;
left: 210px;
border-radius:10px;
text-align:center;
box-shadow: 10px 10px 50px black;
}
a.monBouton {
-webkit-animation-name: greenPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
.monBouton {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:#222222 url(overlay-button.png) repeat-x scroll 0 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.246094);
border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;
color:#FFFFFF !important;
cursor:pointer;
display:inline-block;
font-size:20px;
font-weight:bold;
line-height:1;
overflow:visible;
padding:10px 30px 12px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
font-size:14px;
padding:16px 30px 18px;
background-color:#91BD09;
top:110px;
left:15px;
box-shadow: 10px 10px 50px black;
}
.monBouton::-moz-focus-inner {
border:0 none;
padding:0;
}
.monBouton:hover {
background-color:#111111;
color:#FFFFFF;
}
.monBouton:active{
top:2px
}
Je vous remercie donc d'avance de me dire quel est le problème...
Cordialemment,
Antoine.
5 réponses
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 ?
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question