28173 sujets

CSS et mise en forme, CSS3

Bonjour,

(je ne connais pas les termes exacts, j'écris donc description pour ce qui apparaît et lien pour le mot qui est décrit)
J'ai un petit problème avec mes infobulles : si un lien est dans la place que prend la description d'un autre lien, il se place au premier plan.
http://static.flickr.com/50/154722243_a6a299c609_o.jpg

J'ai essayé z-index, mais sans succès (je m'en sert peut-être mal)

mon code html :
<p>Lorem ipsum dolor sit amet 
<a href="#" class="info">ligula<span> Un mot ayant une signification qui m'est inconnue.</span></a> 
nulla pretium, rhoncus tempor placerat.</p>
<p>Nisl turpis est, vel elit, congue 
<a href="#" class="info">ligula<span> Un mot ayant une signification qui m'est inconnue.</span></a> 
enim nunc ultricies sit, magna tincidunt. Maecenas aliquam maecenas ligula nostra, accumsan taciti. Sociis mauris in integer, a dolor netus non dui aliquet, sagittis felis sodales, dolor sociis mauris, vel eu libero cras.<br /><br />


mon code css :
/* info */

a.info {
	position: relative;
	color: #00129C;
	text-decoration: none;
	cursor: help;
	border-bottom: 1px dotted #00129C;
	z-index: 1;
}

a.info:hover {
	color: #505050;
	border-bottom: 1px dotted #505050;
	z-index: 1;
}

a.info span {
	display: none;
	font-weight: normal;
	z-index: 2;
}

a.info:hover span {
	font-size: 0.8em;
	padding: 2px;
	display: block;
	position: absolute;
	top: 1.7em;
	left: 0em;
	width: 100px;
	border: 1px solid #00129C;
	background-color: #E0E4FF;
	text-align: center;
	z-index: 2;
}


Merci d'avance Smiley biggrin
Modifié par Whisno (29 May 2006 - 08:03)
Oups, j'ai cliqué sur quote à la place de éditer, désolé.
Modifié par Whisno (28 May 2006 - 14:34)