28172 sujets

CSS et mise en forme, CSS3

Problème de line-height

Bonjour,

J'ai un petit souci avec un line-height que je souhaite réduire mais qui du coup rend mes liens de menu du dessus non cliquables !

Voici le code simplifié qui reproduit le problème :

<!doctype html>
<html>
<head>
<title>A blank HTML5 page</title>
<meta charset="utf-8" />
<style type="text/css">
#icon{
border: 1px dotted gray;
font-size: 350px;
line-height: normal;
}
</style>
</head>
<body>
<div id="link"><a href="#">Click Me!</a></div>
<div id="icon">G</div>
</body>
</html>


En modifiant la valeur du line-height de normal à 90% (par exemple) le lien n'est plus cliquable (sous Chrome).

Comment résoudre ce problème ?

Merci.
Modérateur
Bonjour,

La hauteur de la boîte va s'adapter au line-height.

Un line-height de 90% de 350px donne donc une hauteur de 315px de la boite. Seulement à l'intérieur le texte prend bien 350px et déborde donc de la boîte. étant placé après dans le flux, il recouvre donc ton lien, et ton click se fait sur l'icône et non le lien.

Une solution est de faire repasser ton lien par dessus:


#link {
	position: relative;
	z-index: 10;
}
Sujet clos
Aller à