Problème CSS.
Bonjour,
J'ai un problème avec mon script css.
Je m'explique :
Je souhaite faire des sortes d'étiquettes en guise de lien, et avec css hover augmenter la hauteur de ces étiquettes au passage du curseur.
Ca marche, mais le problème est que quand le curseur passe sur une étiquette, l'autre déscend.
Mais seulement celle de droite, quand je passe mon curseur sur celle de droite, celle de gauche ne descend pas.
Voici les codes en questions :
Pour les étiquette (dans la même div que le logo du header) :
Et le css :
Je ne vois pas où est le problème.
Voilà, merci d'avance. :)
J'ai un problème avec mon script css.
Je m'explique :
Je souhaite faire des sortes d'étiquettes en guise de lien, et avec css hover augmenter la hauteur de ces étiquettes au passage du curseur.
Ca marche, mais le problème est que quand le curseur passe sur une étiquette, l'autre déscend.
Mais seulement celle de droite, quand je passe mon curseur sur celle de droite, celle de gauche ne descend pas.
Voici les codes en questions :
Pour les étiquette (dans la même div que le logo du header) :
<div id="header"> <a href="/home.php" id="headerlogo"></a> <div id="etiquette"><a href="/home.php" id="etiquette1"><p align="center">Acceuil</p></a> <a href="/articles.php" id="etiquette2"><p align="center">Articles</p></a> </div> </div>
Et le css :
#header {
background: url(/img/header.png);
height: 180px;
margin: -8px;
}
a#headerlogo {
display:block;
margin-left: 8px;
padding-top: 80px;
background: url(/img/logo.png) no-repeat;
height: 86px;
width: 408px;
padding-top: 0px;
}
a#headerlogo:hover {
display:block;
margin-left: 8px;
background: url(/img/logog.png) no-repeat;
height: 86px;
width: 408px;
}
p.headerp {
font-family: "Sketch";
}
a#etiquette1{
display:block;
width: 100px;
height: 75px;
margin-left: 700px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
background-color: red;
font-family: 'Sketch';
color: black;
}
a#etiquette1:visited{
color: black;
}
a#etiquette1:active{
color: blue;
}
a#etiquette1:focus{
color: blue;
}
a#etiquette1:hover{
height: 90px;
color: white;
}
a#etiquette2{
display: block;
width: 100px;
height: 75px;
margin-top: -91px;
margin-left: 810px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
background-color: blue;
font-family: 'Sketch';
color: black;
}
a#etiquette2:visited{
color: black;
}
a#etiquette2:active{
color: blue;
}
a#etiquette2:focus{
color: blue;
}
a#etiquette2:hover{
height: 90px;
color: white;
}
Je ne vois pas où est le problème.
Voilà, merci d'avance. :)
4 réponses
-
Je te propose d'utiliser à l'avenir cette excelent outils qu'set JsFiddle https://jsfiddle.net/
Voila le code que tu nous a donner http://jsfiddle.net/LDMMG/ Remet le en forme et test avec run puis quand c'est bon, fais un save et reviens nous voir avec l'url de la page. On pourras alors mieux t'aider.-
Merci, je l'utiliserai.
Mais qu'entends tu avec " Remet le en forme " ?
Le problème est presque le même sur la page que tu as donnée (http://jsfiddle.net/LDMMG/ ), sauf que moi j'ai les deux étiquettes à la même hauteur et quand je passe sur la rouge la bleu descend.
Ce que j'aimerais savoir c'est pourquoi ça fait cela, et comment l'éviter ?
Cordialement,
xChicken -
J'ai adapter la hauteru des deux étiquettes comme elles le sont sur ma page.
Voici le lien : http://jsfiddle.net/VJu5t/
Mais tu vois, quand on passe sur la rouge la bleu descend, j'aimerais savoir pourquoi.
Cordialement,
xChicken. -
-
-
-
-
Bon. Deja evite d'utiliser des balise qui ne font pas partis des standers du style ton align que tu a placer.
ensuite, tu vas faire une div qui contient les deux liens:
<div id="etiquettes">
<a href="" class="eti1">...</a>
<a href="" class="eti2">...</a>
</div>
pour ta regles css:
#etiquettes{
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#etiquettes a.eti1{
display: inline-block;
width: 100px;
height: 75px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
background-color: red;
font-family: 'Sketch';
color: black;
}
#etiquettes a.eti2{
display: inline-block;
width: 100px;
height: 75px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
background-color: blue;
font-family: 'Sketch';
color: black;
}
voila, ca devrait aller mieux comme ca. -
Je t'est donner des règles a suivre dont tu n'as absolument pas tenu compte,... temps que tu ne suivera pas les regles de bases, ça ne fonctionnera pas.
-
Bonsoir il faut les fixer avec position absolute
tu fixe ta page en position relative et tes boutons en absolute et le problème est réglé
pourquoi car absolute fait des problème d'affichage lorsque l'on zoom ou change d'écran mais absolute dans un bloc en relative est sans problèmes
