28172 sujets

CSS et mise en forme, CSS3

Lien qui prend 100% de la hauteur de son conteneur

Bonjour,

Je voudrais transformer mon lien en bloc pour que le lien prenne toute la place de son conteneur. Ça fonctionne bien à l'horizontal, mais pas à la verticale si la taille n'est pas définie. Si elle est définie (si par exemple je mets li{height:200px}) ça fonctionne bien.

Donc ici, je voudrais que <a> prenne 100% de la hauteur du <li>, ce qui n'est pas le cas. Et ça se voit parce que l'image qui fait 100x100 pixels augmente la taille du <li>, mais <a> reste dimensionné à la taille du texte du lien.

Merci d'avance !


li
{
	width: 100%;
	height: 100%; /* Si je mettais height:200px ça fonctionnerait */
	float: left;
	clear: left;
}
li a
{
	display: block;
	background-color: yellow;
	height: 100%;
}
li a:hover
{
	background-color: skyblue;
}
li img
{
	float: left;
}


<ul>
	<li>
		<a href="lien.html"><img src="image.jpeg" alt="image" height="100" width="100" /> Lien</a>
	</li>
	<li>
		<a href="Lien">Lien</a>
	</li>
</ul>


___________

Page complète pour tester : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
	<head>
		<title>Sans titre</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<style type="text/css">
		<!--
		li 
		{ 
			width: 100%; 
			height: 100%; /* Si je mettais height:200px ça fonctionnerait */ 
			float: left; 
			clear: left; 
		} 
		li a 
		{ 
			display: block; 
			background-color: yellow; 
			height: 100%; 
		} 
		li a:hover 
		{ 
			background-color: skyblue; 
		} 
		li img 
		{ 
			float: left; 
		} 
		-->
		</style>
	</head>
	<body>
		<ul> 
			<li> 
				<a href="lien.html"><img src="image.jpeg" alt="image" height="100" width="100" /> Lien</a> 
			</li> 
			<li> 
				<a href="Lien">Lien</a> 
			</li> 
		</ul> 
	</body>
</html>

Modifié par Oracle (26 Oct 2009 - 00:38)
Salut,

Tu à passé tes <li> en float, donc il faut que tu ajoute au conteneur soit overflow:hidden; soit float:left;


ul{float:left}


ou

overflow:hidden;


Sinon pour ton problème, tu souhaite une taille précise en pixel ? car si tu ne l'a définie nulle part, c'est sûr qu'elle ne va pas s'y mettre toute seule.

Tu peux faire ça:

ul{height:ta-taillepx;}

Modifié par pfoofen (26 Oct 2009 - 07:48)
Salut Oracle,

Ceci te convient t-il (marche sur tous les nav ie6 compris) Smiley lol 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr"> 
    <head> 
        <title>Sans titre</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" /> 
        <style type="text/css"> 
        <!-- 
			img {float: left;}
			li {background: #0099CC; float: left; width: 100%; margin-bottom: 5px;}
			li:hover {background-color: skyblue;}
        --> 
        </style> 
    </head> 
    <body>
        
        <ul>
        	<li>
            	<a href="#"><img src="img.png" alt="image" height="100" width="100" /> Lien</a>
            </li>
        	<li>
            	<a href="#"><img src="img2.png" alt="image" height="100" width="100" /> Lien2</a>
            </li>
        </ul>
         
    </body> 
</html>
Sujet clos
Aller à