28173 sujets

CSS et mise en forme, CSS3

Bonjour

J'ai un lien qui se trouve dans un div dont sa largeur est défini. Du coup le lien se déplie sur deux lignes

Mon lien :

<div>
<p><a class="lientitre" href="#">Ne que porro quisquam est qui dolorem ipsum quia</a></p>
</div>


Ma CSS :
.lientitre {
	font : normal bold 0.7em georgia, serif;
	color : #004a80;
}



Avec ce code l'interlignage entre les deux lignes du lien est différent entre FF et IE :

Sur FF l'interlignage est trop important :
upload/481-interFF.gif

Alors que sur IE il est comme souhaité :
upload/481-interIE.gif


J'ai trouvé ici une solution :
http://forum.alsacreations.com/topic.php?fid=4&tid=8958&s=interligne[/url]

Ainsi en ajoutant display: block au lien et des marges l'interlignage est correct sur les deux navigateurs.

Maintenant mon problème c'est que sur FF le curseur de la souris peut activer le lien même en dehors du lien. Le lien est en fait activable sur toute la largeur du div.

J'ai matérialisé par une croix noire l'endroit où la souris active le lien (en rouge)
upload/481-interFFactif.gif

Quelle solution pour à la fois régler les pb de différence d'interlignage et éviter l'effet d'activation du lien dans le vide ?

Merci d'avance
Phil
Modifié par ensemblevide (21 Oct 2006 - 11:21)
Salut !

Le comportement que tu rencontres avec la propriété display:block; est tout à fait normale. En effet, tu transforme le lien en élément bloc qui du coup prends toute la largeur possible. Ce qui fait que sa zone réactive est agrandie d'autant !

Pour pallier ce problème, à ta place, je laisserai mon lien en tant qu'élément inline et je jouerai avec les propriétés height et line-height.

Tu auras plus de détails dans la FAQ
Smiley cligne
Merci pour ta réponse


Je suppose que le line height doit être appliqué dans mon cas à <p>

J'ai essayé d'appliquer le line-height sur <a> mais ça ne semble pas fonctionner.

Donc si je l'applique à <p> :

div p {
 line-height: 0.7em;
}


C'est nickel

Comme j'ai déjà une classe sur <a>, je dois forcément écrire une autre règle pour <p>, ou il y a une autre solution plus simple ?

Phil
Modifié par ensemblevide (23 Oct 2006 - 10:27)