Comportement différent div/lien
Résolu
e4
-
e4 -
e4 -
Bonjour,
J'essaye actuellement de créer des blocs menu grace aux effets css "transition".
J'arrive très bien à composer mon menu avec des div.
Jusque là, ça marche très bien. Seulement, quand j'essaye de transformer ces div en vrai venu, les balises <a> ne semblent pas avoir le même comportement, alors que le css n'a pas bougé:
Pourriez-vous m'expliquer pourquoi les deux ne réagissent pas de la même manière ?
Quelles pourraient-être les solutions ?
Merci beaucoup d'avance !
E4
J'essaye actuellement de créer des blocs menu grace aux effets css "transition".
J'arrive très bien à composer mon menu avec des div.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
<style>
#exampleb {
width: 200px;
}
#exampleb div {
width: 200px;
height: 110px;
margin: 5px 0;
padding: 5px;
color: white;
background-color: #1E1E1E;
font-family: 'Great Vibes', cursive;
font-size: 2.4em;
text-align: center;
line-height: 110px;
text-shadow: 1px 1px 3px #000;
border-bottom: 1px solid #333;
}
#exampleb:hover div {
padding-top: 30px; color: #FE670F; background: #000;
}
#exampleb div.ease {
-webkit-transition: 1s ease;
-moz-transition: 1s ease;
-o-transition: 1s ease;
-ms-transition: 1s ease;
transition: 1s ease;
}
</style>
</head>
<body>
<div id="exampleb">
<div class="ease">Accueil</div>
</div>
</body>
</html>
Jusque là, ça marche très bien. Seulement, quand j'essaye de transformer ces div en vrai venu, les balises <a> ne semblent pas avoir le même comportement, alors que le css n'a pas bougé:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
<style>
#exampleb {
width: 200px;
}
#exampleb a:link {
text-decoration: none;
width: 200px;
height: 110px;
margin: 5px 0;
padding: 5px;
color: white;
background-color: #1E1E1E;
font-family: 'Great Vibes', cursive;
font-size: 2.4em;
text-align: center;
line-height: 110px;
text-shadow: 1px 1px 3px #000;
border-bottom: 1px solid #333;
}
#exampleb a:hover {
padding-top: 30px; color: #FE670F; background: #000;
}
#exampleb a.ease {
-webkit-transition: 1s ease;
-moz-transition: 1s ease;
-o-transition: 1s ease;
-ms-transition: 1s ease;
transition: 1s ease;
}
</style>
</head>
<body>
<div id="exampleb">
<a href="#" class="ease">Accueil</a>
</div>
</body>
</html>
Pourriez-vous m'expliquer pourquoi les deux ne réagissent pas de la même manière ?
Quelles pourraient-être les solutions ?
Merci beaucoup d'avance !
E4
A voir également:
- Comportement différent div/lien
- Lien url - Guide
- Créer un lien pour partager des photos - Guide
- Verificateur de lien - Guide
- Excel différent de vide ✓ - Forum Excel
- Faux lien prank - Forum Autoit / batch
2 réponses
Bonjour,
Je n'ai regardé que rapidement ton problème.
A première vu la différence est que les balise <a> sont des balises de type inline alors que les <div> sont des balise de type block
Pour y remédier essaies donc de modifier le type de tes balises <a> en ajoutant
display: block; a la classe #exampleb a.ease
Je n'ai regardé que rapidement ton problème.
A première vu la différence est que les balise <a> sont des balises de type inline alors que les <div> sont des balise de type block
Pour y remédier essaies donc de modifier le type de tes balises <a> en ajoutant
display: block; a la classe #exampleb a.ease
