Sujet Précédent Sujet Suivant

Comportement différent div/lien

Résolu/Fermé
e4 - 6 janv. 2013 à 22:37
 e4 - 7 janv. 2013 à 09:32
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. 



<!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


2 réponses

Réponse 1 / 2
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
7 janv. 2013 à 03:13
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
1
Réponse 2 / 2
e4
7 janv. 2013 à 09:32
En effet, le problème venait bien de là.

Cela me sera très utile, merci beaucoup Atropa!
0

Discussions similaires

"Aucune application permettant d'ouvrir cette URL"
sidojaice -
JIP -

24 réponses
lien copié
alaurore -
LEFEUVRE -

7 réponses
Rajout de lien sur plusieurs pages
leparradiss -
David -

11 réponses
Comment retrouver des lien copier sur sont téléphone
SAMA -
Lylou -

2 réponses
Quelle touche clavier ou combinaison pour désigner "différent de
Isismo -
abdo -

10 réponses