Problème CSS.
xChicken
Messages postés
16
Date d'inscription
Statut
Membre
Dernière intervention
-
Utilisateur anonyme -
Utilisateur anonyme -
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. :)
A voir également:
- Problème CSS.
- Css download - Télécharger - HTML
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
- Enlever soulignement lien css ✓ - Forum CSS
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.
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.
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.
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.
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
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.
Cordialement,
xChicken