28221 sujets

CSS et mise en forme, CSS3

Positionnement absolu dans un container relatif

[repris du sujet: http://forum.alsacreations.com/topic.php?fid=4&tid=872]

J'ai appris quelque chose avec le positionnement par rapport aux ancêtres!
J'ai voulu faire tout ça en pratique mais je me casse un peu les dents lol
Je voulais faire un système d'infobules - ce n'est qu'un test, inutile de m'incendier parce que le code n'est orienté que sur le visuel cligne . J'ai donc inclu des span dans des liens qui ne prennent un comportement de bloc qu'au survol du lien en question, positionné lui en relative pour positionner le span à 100% du dessus et de la gauche de celui çi, soit à son coin inférieur droit. mais voila, sous msie ça foire, et c'est loin d'être parfait sous mozilla.
Sous msie le :hover fonctionne bel et bien vu qu'il s'agit d'un <a>, mais rien ne se produit, sauf si je retire le positionnement relatif du lien ET l'absolu du span. Sous mozilla le bloc du span ne prends pas en compte le contenu, comme si sa dimension était nulle, alors qu'il contient du texte. Il prends en compte les bordures et le background, mais seulement sur un bloc d'épaisseur nulle et de 1em de haut. Tout fonctionne à merveille avec une image ou quand je donne des dimensions fixe en largeur au bloc, ce qui est pas franchement pratique/esthétique pour les commentaires courts. une valeure "auto" ne change rien.
http://www.mentalwarp.com/~moob/tmp/bulles_lien/
testé avec mozilla 1.8alpha5, msieWin 6.0

edit: je viens de voir que sous firefox il envoyait le bloc bcp plus à droite (d'une distance que j'estime à la largeur du paragraphe contenant...)
Shit happens
Salut,

Un "display: table" au lieu du "display: block" dans le "#content a.bulle:hover span" règle ton problème de dimension sous Firefox, mais pas le positionnement. Sous IE je sèche pour l'instant.
Smiley cligne
En effet, j'ai mis le display table avec un petit hack (au cas où, vu que ce n'est pas franchement son usage) et tout fonctionne Smiley smile
Pour le décalage il semblerai que FF ai un problème avec les %, si je spécifie en px le positionnement est correct; malheureusement je crois que le pourcentage est la seule méthode pour aligner le bloc sur le coin inférieur droit du lien, quelque soit ses dimensions.

#content a.bulle span {display:none}
#content a.bulle:hover span {
	position: absolute;
	display: block;
	top: 1px;
	left: 1px;
	background: white;
	padding: 2px;
	border: 1px solid gray;
	z-index:100}
#content a[class="bulle"]:hover span {display: table}


http://www.mentalwarp.com/~moob/tmp/bulles_lien/index2.htm

Tj pas d'espoir pour ie, mais à force on est presque blasé Smiley langue
Sujet clos
Aller à