[Résolu] Comportement de lien différent dans un div

Question

Ricou13

3 Jun 2005 à 09:47

Salut,

J'ai créé des liens avec un simple effet de roll-over mais lorsque je met ces liens dans un DIV, le roll-over ne marche plus que sur le texte et plus sur la surface entière du lien (sur IE) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
	<title>Menu</title>

<style type="text/css">
#menu {
	position: absolute;
	top: 100px; left: 100px;
	width: 170px;
	border: solid 1px magenta;
	}
a {
	float: left;
	text-decoration: none;
	border: solid 1px blue;
	}
/************** Cadre dynamique autour du texte du lien **************/
a .hd {
	background: url("menu-hd.gif") top right no-repeat;
	margin:0;
	padding:0;
	border: solid 1px cyan;
}
a .hg {
	background: url("menu-hg.gif") top left no-repeat;
	margin:0;
	padding:0;
}
a .bd {
	background: url("menu-bd.gif") bottom right no-repeat;
	margin:0;
	padding:0;
}
a .bg {
	background: url("menu-bg.gif") bottom left no-repeat;
	margin:0;
	padding:0;
}
a .contenu {
	font: bold 0.8em Geneva, Verdana, sans-serif;
	color: #fff;
	text-transform: uppercase;
	margin:0;
	padding: 1.3em 1.6em;
	border: solid 1px yellow;
	}
/************** Hover **************/
a:hover .hd {
	background-position: 100% -95px;
	}
a:hover .hg {
	background-position: 0% -95px;
	}
a:hover .bd {
	background-image: url("menu-bd-on.gif");
	}
a:hover .bg {
	background-image: url("menu-bg-on.gif");
	}
a:hover {
	color: white;	/* Sert uniquement pour éviter que le lien ne reste "actif" lorsqu'on le quitte */
	}
</style>

</head>
<body>

<a href="#" title="Nos produits">
	<div class="hd">
		<div class="hg">
			<div class="bd">
				<div class="bg">
					<div class="contenu">
						Produits
					</div>
				</div>
			</div>
		</div>
	</div>
</a>

<div id="menu">
<a href="#" title="Notre entreprise">
	<div class="hd">
		<div class="hg">
			<div class="bd">
				<div class="bg">
					<div class="contenu">
						Entreprise
					</div>
				</div>
			</div>
		</div>
	</div>
</a>
</div>

</body>
</html>

Le premier lien est posé directement sur la page et fonctionne bien. Le second est dans un DIV positionné et ne fonctionne plus alors que ce sont les mêmes règles.
Page en ligne

Merci de votre aide. Smiley smile

Modifié par Ricou13 (06 Jun 2005 - 11:58)

tyx

3 Jun 2005 à 10:29

Perso, sur Firefox les 2 liens ont un comportement similaire, et sous IE6, idem.

La différence réside dans entre la version FF et IE, ce dernier n'interprétant pas certains de tes coins.

Par contre 4 div pour un "simple rollover" Smiley langue

Vince1415

3 Jun 2005 à 10:56

salut,
moi j'ai bien l'erreur que tu signale mais si je vise bien la bordure bleu (entre la jaune et la rose ca me met le fond de la bonne couleur. amon avis le probléme est que tu as beaucoup trop de div par bouton (5) tu devrai laissait le minimum.

Ricou13

3 Jun 2005 à 11:40

tyx a écrit :
Par contre 4 div pour un "simple rollover"

En fait l'idée est de faire un menu avec des coins arrondis qui se redimensionne si on agrandit la taille de la police (j'essaie de penser aux gens qui doivent augmenter la taille de la police pour arriver à lire). C'est pourquoi j'ai utilisé la méthode des sliding doors adaptée aux cadres autour d'un texte.
J'ai remis les liens à leur dimension réélle et j'ai enlevé les bordures qui n'étaient là que pour visualiser l'emplacement des différentes balises.
Si on met IE en taille de police maximale, le cadre des liens s'étend. Si j'avais utilisé des images fixes, elles seraient restées à la même taille et cela aurait été très moche.
D'autant que j'aurais alors dû créer quasiment une image par lien puisque leur longueur est variable selon le texte.

Vince1415 a écrit :
a mon avis le probléme est que tu as beaucoup trop de div par bouton

Le pb ne vient pas de là. J'ai ajouté quatre div supplémentaires sur le premier lien :

<a href="#" title="Nos produits">
	<div class="hd">
		<div class="hg">
			<div class="bd">
				<div class="bg">
					[#red][b]<div><div><div><div>
					<div class="contenu">
						Produits
					</div></div></div></div>[/b][/#]
				</div>
			</div>
		</div>
	</div>
</a>

Et ce lien fonctionne toujours sous IE. De plus, lorsque tu crée une page, tu as les div de mise en page + le div conteneur de la page + le div interne pour centrer le contenu + les div de positionnement des différents éléments + les div et span de mise en forme de ton image ou ton bout de texte au milieu de ta page.
Bref, sur un page normale, tu peux avoir, au final, un nombre impressionnant de div imbriqués (bien plus que 5). Et pourtant ça marche !

Mon pb à lieu dès lors que mon lien est inclus dans un div ou un span. il doit me manquer quelque chose au niveau de ce conteneur.
j'ai refait la page pour que vous puissiez voir la taille réelle du menu et la vraie bordure (graphique ) qui m'intéressait. C'est sûr que si mes liens avaient été dans un cadre rectangulaire, je ne me serait pas autant pris la tête Smiley lol

C'est vrai qu'en taille normal de police, le pb est presque invisible et que, au pire, je peux le laisser comme ça.
Mais ce genre de pb pourrait se retrouver ailleurs, sur des sufaces plus importantes, où se serait beaucoup plus génant. Il est plus facile de trouver une solution sur une page simple comme celle-ci plutôt qu'au beau millieu d'une page déjà très compliquée. Smiley cligne

Modifié par Ricou13 (03 Jun 2005 - 11:41)

Ricou13

3 Jun 2005 à 19:28

J'ai réussi à obtenir, en partant du tutoriel d'Alsa (que j'avais déjà lu et dont le code, au passage, ne correspond pas à la structure présentée), un équivalent qui fonctionne au poil, même sous IE Smiley lol

Voir ici

Mais, car il y a toujours un mais, il me reste encore un petit pb avec l'affichage sous IE (non ! sans déc ! tu blagues là ? comment est-ce possible ? Pas avec IE quand même ?).

Et ben si ! Selon le nombre caractères du contenu, la police utilisé ou la taille d'affichage de la police définie par l'utilisateur, des morceaux de bordure apparaissent à droite ou en bas.
Faites un essai en modifiant la "taille du texte" sous IE.

Comme si les calques des coins n'arrivaient pas à se positionner complètement à doite ou complètement en bas.
Smiley confus

Ricou13

6 Jun 2005 à 11:58

J'ai résolu mes pb (lien qui restait actif et réactivité uniquement sur le texte et non sur la zone totale du lien).

C'était simple finallement mais d'une logique douteuse :

J'avais donc un lien contenant 4 div de "décor" imbriqués, contenants un div de "contenu". Oublions les div de décor. Jusque là, j'avais définit la couleur de fond sur le div "contenu" (qui était donc "opaque") et j'étais obligé d'ajouter une ligne inutile pour empécher le lien de rester actif :

a:hover {
	color: white;	/* Sert uniquement pour éviter que le lien ne reste "actif" lorsqu'on le quitte */
	}

Comme le lien était le conteneur et qu'il se trouvait derrière tous les autres div (en terme de profondeur), je me suis dit qu'au lieu de créer une règle inutile, j'allais affecter la couleur de fond au lien plutôt qu'au div "contenu".

Grand bien m'en a pris car, en supprimant la couleur de fond du div "contenu", il est redevenu "transparent". Et tous mes pb ont disparus. C'est comme si la couleur de fond du "contenu" empechait le browser de detecter qu'il survolait un lien.
Donc, quand on fait un lien avec un div de contenu, il ne faut pas lui appliquer de gestion du la couleur du fond mais la gérer sur la balise <a> elle-même.

Sujet clos