28172 sujets

CSS et mise en forme, CSS3

Bonsoir
Je n'arrive pas a comprendre pourquoi mon block li n'arrive pas à prendre la même hauteur que les autres quand celui-ci à moins de texte.



ul.produit {
	padding: 0;
	margin: 0;
	}
li.produit {
	display: inline-block;
	list-style: none;
	border: #C3C3C3 1px solid;
	margin: 4px;
	padding: 3px;
	width: 170px;
	font-size: 12px;
	position: relative;
	}
li.produit a {	
	color: #000000;
	text-decoration: none;
	font: bolder 13px "Trebuchet MS",Arial,sans-serif  ;
	} 
li.produit a:hover {	
	color: #000000;
	text-decoration: underline;
	}



<ul class="produit">
<!--depart du produit-->
<li class="produit">
<img src="images/2191-3613-home.jpg" alt="chaussure" />
<a href="#">Chaussures Defroster Route SPECIALIZED</a> <br />
115,00€<br />
<a href=""><img src="images/detail_2.png" alt="detail du produit"  class="detail"/></a>
</li>
<!-- fin du produit-->

<!--depart du produit-->
<li class="produit">
<img src="images/2398-4312-home.jpg" alt="casque" />
<a href="#">Casque Scott Fuga 2010</a> <br />
120,00 €<br />
<a href=""><img src="images/detail_2.png" alt="detail du produit"  class="detail"/></a>
</li>
<!-- fin du produit-->



le block li qui contient l'image 2398-4312-home.jpg ( un casque) ne prend pas la même hauteur que l'autre block.

Merci d'avance.



PS: Je cherche a obtenir une suite de block 'li' qui me serviront d'affichage pour des produits, mais il devront prendre la même hauteur que le block ayant un height: supérieur aux leurs.
Administrateur
Bonsoir,

arokna a écrit :
Bonsoir
Je n'arrive pas a comprendre pourquoi mon block li n'arrive pas à prendre la même hauteur que les autres quand celui-ci à moins de texte.

Pourquoi le ferait-il ?

arokna a écrit :

PS: Je cherche a obtenir une suite de block 'li' qui me serviront d'affichage pour des produits, mais il devront prendre la même hauteur que le block ayant un height: supérieur aux leurs.

OK, dans ce cas, ce n'est pas du ressort de inline-block mais plutôt de cellules de tableau ou de display table-cell (ou encore de min-height ou de colonnes factices)

http://www.alsacreations.com/astuce/lire/15-div-colonnes-meme-hauteur.html

Bonne chance
j'ai tout simplement mis un float:left sur mon li puis j'ai donné une hauteur définie.
Donc pas de problème pour l'instant.
Mais il reste toujours la si mon texte s'agrandit dans se même li.
Faudrait que je remanie tout mon code pour transformer cette mise en page en table

Merci