[Résolu] Pb alignement de contenu sur plusieurs blocs alignés

Bonjour tout le monde,

Je suis en train de mettre en place un site sous OpenCart 1.5 mais j'ai un soucis que je n'arrive pas à débloquer:

Mes articles sont affichés dans des blocs distincts mais alignés mais si le titre de l'article est plus long (2 lignes) que celui du bloc d'à coté j'ai un résultat visuel qui laisse à désirer.

Je vous donne le lien du site pour que vous voyez le résultat en live.

Je pensais qu'il faudrait bloquer la hauteur pour .box-product .name mais je ne trouve pas quelle valeur mettre ou alors lui préciser le nombre de caractères qu'il doit prendre en compte au total (qu'il y en est au final 3 ou 30 il devrait garder l'espace requis de 30 par exemple si réglé à 30 caractères).

Le code actuel :

.box-product {
	width: 100%;
	overflow: auto;
	text-align: center;
}
.box-product > div {
	width: 130px;
	display: inline-block;
	vertical-align: top;
	margin-right: 20px;
	margin-bottom: 20px;	
}
.box-product .image {
	display: block;
	margin-bottom: 0px;
}
.box-product .image img {
	padding: 3px;
	border: 1px solid #E7E7E7;
}
.box-product .name a {
	color: #efda62;
	font-weight: bold;
	text-decoration: none;
	display: block;
	margin-bottom: 4px;
}
.box-product .price {
	display: block;
	font-weight: bold;
	color: #eeeeee;
	margin-bottom: 4px;
}

Merci d'avance.
Modifié par lordbdp (25 Oct 2011 - 15:52)

Bonjour.

Perso, je mettrais juste une hauteur de 30px à la div que tu as dit (.box-product .name).
Après il faudrait pas que le titre passe sur 3 lignes, sinon il faudrait encore augmenter cette hauteur.

J'espère t'avoir aider.
Tchou

Si tu veux restreindre le texte à une ligne, quitte à le couper, tu peux faire:

.box-product .name a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Documentation: http://developer.mozilla.org/En/CSS/Text-overflow
Support dans les navigateurs: http://caniuse.com/text-overflow
Modifié par fvsch (25 Oct 2011 - 15:34)

Nan,nan, je ne veux pas couper le texte justement. Mais merci quand même pour l'astuce.

La solution de SolidSnake est celle qui me convient


Merci à vous et longue vie au CSS !