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

A voir également:

Comportement différent div/lien
Lien url - Guide
Créer un lien pour partager des photos - Guide
Verifier un lien - Guide
Aucune application permettant d'ouvrir ce lien n'a été trouvée - Forum Mobile
Cliquez sur ce lien. en n'utilisant que le clavier, quel mot obtenez-vous ? ✓ - Forum souris / Touchpad

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

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!

Discussions similaires

"Aucune application permettant d'ouvrir cette URL"

lien copié

Rajout de lien sur plusieurs pages

Comment retrouver des lien copier sur sont téléphone

comment faire "différent de" sous excel/