[résolu] Positionnement d'un span sur un a:hover

Bonjour,
J'ai un souci sur le positionnement d'un span sur un a:hover.
Sur Firefox et Opera le lien est considéré comme un block et je peux donc deplacer le span par rapport à ce block avec un margin-left négatif.
Ainsi j'affiche le span à gauche du lien.
Sur IE il ne considère pas le lien comme un block et affiche le span à sa façon. Ce qui devient vite illisible.

Une visualisation de ce que je dis se trouve ici
-http://www.agenda-musique.com/agenda.php

Voici le code se trouvant dans la page html

<a class="l4" href="...">Lien<span>description</span></a>

l4 correspond à un type de lien, mais cela n'a rien à voir avec la problématique.

et la feuille de style

a span {
	display: none;
}

a:hover span{ 
	display: block;
	z-index:20;
	position:absolute;
	font-size:10px;
	padding:3px;
	width:250px;
	height:100px;
	border:2px dotted black;
	background-color:#E3D180;
	margin:-65px 0 0 -265px;
	color:#000;
}

Pourriez-vous me dire comment faire pour que IE puisse afficher le span de la même manière que sur Firefox ou Opéra ?

Cordialement
Modifié par narayana (27 Sep 2006 - 14:51)

Tu oublies de signaler que ton span englobe un contenu important, ce qui posera un gros problème d'accessibilité : les liens auront un intitulé de plusieurs dizaines de mots de long, ce qui dépasse très largement les 80 caractères maximum conseillés.

De plus, il est probable que cela pose un certain nombre de problèmes d'ergonomie, surtout si tu places des liens à l'intérieur de ton span, lui-même inséré dans un lien...

Je dirais que de tels effets devraient être réalisés en Javascript, plutôt qu'avec un bidouillage à partir d'une technologie (les CSS) pas prévue pour ça.


Plus généralement, la manière dont tu as organisé/stylé cet agenda est très rigide. Tu utilises abondamment les hauteurs fixes, ce qui fait qu'avec un ou deux agrandissements du texte c'est Armageddon. L'agenda n'est alors plus du tout lisible.

Je commencerais par résoudre ça : supprimer les hauteurs fixes inutiles.

Bonjour,

Il faut que tu supprime ton span à l'intérieur du lien.
Tu peux ne jouer que sur le z-index, à modifier en DHTML exclusivement et les mettre au même endroit l'un en dessous de l'autre (style.zIndex)
Inutile de mettre un display si tu peux le cacher en le mettant en dessous.

Merci pour vos remarques
Je viens de supprimer les principales hauteurs fixes.
Je vais déplacer le span en dehors du lien. Le soucis va être au niveau javascript... Je vais avoir un grand nombre de ligne pour cacher et afficher ces blocks.
Je me lance on verra bien si c'est gérable.
Cordialement

le problème est maintenant que j'ai plusieurs div avec du texte caché.
Je vais pas écrire à la volée une feuille de style comportant

#div1, #div2, #div3, #div4......... {	
	z-index:20;
	position:relative;
	font-size:10px;
	padding:3px;
	width:250px;
	height:100px;
	border:2px dotted black;
	background-color:#E3D180;
	margin:-65px 0 0 -265px;
	color:#000;
}

bonjour,

par rapport a la page en lien , je te propose de revoir la technique que tu utilise.

1) placer de façon equivoque le span pour tous les navigateur.

2) ne cacher que visuellement et le sortir du flux en permanence.

je te laisse tester les modifs css proposées:
le support du span (la balise de lien ):

a.l1, a.l3, a.l4, a.l1:hover, a.l3:hover, a.l4:hover{
	font-weight:normal;
	display:block;
	padding-left:3px;
	font-size:10px;
	height:15px;
	text-decoration:none;
	width:96px;
	position:relative; /* en plus , sert de reference de positionnement */
}

le span sans lien survolé :

a.l1 span, a.l4 span, a.l3 span {
	position:absolute;
	right:100px;/* pour placer a l'extreme gauche du lien survolé */

/* la suite sert a ne caché QUE visuellement le span */
	height:0;
	width:0;
	overflow:hidden;
	z-index:-1;
}

Comportement au survol et affichage du span :

a.l1:hover span, a.l3:hover span, a.l4:hover span { /* d&#65533;finition de la balise <span> au survol */
	display: block;
	z-index:2;
	position:absolute;
	font-size:10px;
	padding:3px;
	width:250px;
	height:100px;
	border:2px dotted black;
	background-color:#E3D180;
	margin:-65px 0 0 0;
	color:#000;
}

Voila , je n'ai repris que ton code css en le modifiant/surchargeant quelques peu , pour y integrer les comportement d'IE.

Attention , il reste des portions de code css /* Edited with EditCSS */ dans ta page , elle prevalent sur le fichiers css qui est chargées juste avant.

++



<edit>
1)pour les tailles fixe , en fixant la taille par defaut en pourcentage de ta police dans body, puis en calibrant tes zones en em , tu devrais reussir a obtenir un resultat de page "fluide" au redimensionnement des tailles de polices .... reste toujours les raccords d'images qui peuvent posé probleme.

2) pour les hovers , le span et le a peuvent-etre deplacé dans un conteneur commun, le comportement hover attendue , peut-etre alors "activer" en javascript pour IE =<6 uniquement.
(ex: behavior.htc , ou un js maison plus leger )
</edit>
Modifié par gcyrillus (27 Sep 2006 - 14:44)

Merci pour cette réponse et d'avoir pris le temps de tester
Je vais voir ce que cela donne.
Car je viens de tester une autre façon de faire qui fonctionne mais j'aime pas trop.
Cela ressemble plus à du bricole qu'a du code propre

En effet gcyrillus ta méthode fonctionne correctement
bravo !
je ne sais pas laquelle des 2 utiliser maintenant
je vais voir cela
Encore merci à tous
Modifié par narayana (27 Sep 2006 - 15:25)

... te servir d'une liste eventuellement:

<li>
<a href="#">lien</a>
<span> vu ! , pas vu ... </span>
</li>

le css basé sur li / li:hover, + le js pour IE lte 6 .

Cela te rapproche du comportement attendu et de ne pas surchargé "les liens" .

Bone continuation.