[resolu] adapter "product-list" donner un Height a description courte

[Full Carbone 94]

Salut,

 

je cherche a adapter ma liste de produis (dans catégorie)

 

exemple de catégorie :

http://www.fullcarbo...fr/50-exterieur

 

je souhaite que les fiches produit soie aligner, car sur une même page selon la longueur de la description courte les fiches son décaler en hauteur (prix et bouton "voir produit").

 

J'ai modifier le truncate a 40 = aucun changement sur le site en ligne.

 

j'ai voulue ajouter un height a la description courte (ligne 41 dans themes/prestashop/css/product_list.css) et le prix passe par dessus la description (ils sont superposer)

 

dans le BO j'ai bien forcer la compilation et supprimer les caches, tout les autres changement fonctionne (ajout de height au titre, ...), mais pas pour la description courte ! c quand même bizarre ...

 

Pour faire court : comment avoir des fiches parfaitement aligner

Merci à vous

Edited May 21, 2013 by Full Carbone 94 (see edit history)

[Full Carbone 94]

Je suis toujours bloquer bientôt 4 jours que je tourne le problème dans tous les sens ...

 

une âme charitable pour m'aider !?!?

 

MERCI

[binassmax]

'lut

 

rajoute dans http://www.fullcarbo...roduct_list.css à la ligne 41(c'est le height:177px qui compte)

chez moi je n'ai pas de superposition.

 

 

 

ul#product_list li p.product_desc {

• margin-bottom: 0;
  
• font-size: 0.92em;
  
• height: 177px;
  

}

 

tu peux également joué sur le height et le padding que tu attribue ici en ligne 4:

ul#product_list li

Edited May 10, 2013 by binassmax (see edit history)

[binassmax]

j'ai recommencer pour voir et fait quelques modif' donc voici tout le css que tu peux tester:

 

 

 

/* product-list.tpl */

ul#product_list { margin-top: 2em; list-style-type: none }

ul#product_list :hover { background-color: gold }

ul#product_list li {

background-color: white;

border: solid 1px whitesmoke;

float: left;

height: 280px;

padding: 18px;

margin-bottom: 0.2em;

margin-right: 2px;

text-align: left;

width: 145px;

}

* html ul#product_list li {

height: auto !important;

height: 130px

}

ul#product_list li a {

text-decoration: none;

color: blue

}

ul#product_list a.product_img_link {

margin: 0 auto;

margin-top: 0px;

text-align: center;

}

ul#product_list a.product_img_link img { margin: 0 auto; text-align: center; margin-left: 8px;}

ul#product_list li h3 { height:43px; margin: 0.4em 0 ; text-align: center;}

ul#product_list li .new {

background: transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%;

border: 1px solid #488C40;

color: white;

font-size: 0.6em;

font-weight: bold;

margin: 0 1em 0 0;

padding: 0 0.4em;

text-transform: uppercase;

vertical-align: 0.3em

}

ul#product_list li p.product_desc { font-size: 0.92em ; height: 40px; padding: 0px !important; margin: 0 auto; margin-top: 5px; width: 100% ; }

 

ul#product_list li div.center_block { width: 100%; }

ul#product_list li div.right_block { float: left; width: 11em; text-align: right; margin-left: 1em; margin-top: 0 }

ul#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only { color: #da0f00; text-transform: uppercase; font-weight: bold; display: none }

ul#product_list li .reduction { display: block; margin-bottom: 0.3em }

ul#product_list li .price { display: block; font-size: 1.5em; margin-bottom: 0.2em }

ul#product_list li span.availability { color: #488c40; font-size: 11px }

ul#product_list li a.button { margin-top: 0.5em }

ul#product_list li p.compare input { vertical-align: text-bottom }

Edited May 10, 2013 by binassmax (see edit history)

[Full Carbone 94]

Salut,

 

vraiment merci !!! j'ai trouver mon erreur avec ton 1er post, je donner un height de 40px ou 50px, et bêtement je n'ai penser a entré 170px.

 

au moins tout est droit, enfin !

 

mais il y a un petit problème, si ma description courte commence par un seul caractère (2 ampoules) le chiffre 2 ce trouve a droite de la photo et ampoule en dessous de la photo, comment aligner le tout en dessous de la photo.

 

j'ai pas mal jouer avec les padding, margin et autres taille mais je n'arrive pas a régler sa !

 

et autre problème qui doit venir du même endroit, entre le haut du cadre et le titre du produit il y a presque 1cm, il devrais avoir moins d'espace normalement.

 

merci encore si tu peut m’éclairer la dessus

[binassmax]

de rien ! par contre j'ai pas compris ton histoire d'ampoules tu peux être plus précis ?

 

----> je crois avoir capté:

 

pour l'histoire de l'espace essaie ça dans http://www.fullcarbone94.fr/themes/prestashop/css/product_list.css ligne 4:

ul#product_list li {

background-color: white;

border: solid 1px whitesmoke;

float: left;

height: 270px;

padding: 8px 18px 25px;

margin-bottom: 0.2em;

margin-right: 2px;

text-align: left;

width: 145px;

}

 

pour l'histoire des ampoule

ligne 23:

ul#product_list a.product_img_link {

border: solid 1px #ffffff;

float: left;

width: 145px;

}

 

 

ligne 28:

ul#product_list a.product_img_link img {

vertical-align: bottom;

display: block;

margin: 0 auto;

}

 

 

Edited May 13, 2013 by binassmax (see edit history)

[Full Carbone 94]

vraiment PARFAIT !!!

 

sa corrige parfaitement mon problème quand je suis sous firebug.

 

mais le petit problème sous notepad++ quand j'édite le fichier CSS si je rajoute a la ligne 23 le "widh: 138px" sur la feuille le mot "widht" reste en noir et ne passe pas en violet comme tout les autres "marging "height" "widht" ect ...

 

j'ai bien mi le ; (point virgule après le left du dessus) du coup une fois le fichier en ligne il n'ai pas pris en compte.

 

je suis sur c pas grand chose mais en tout cas la solution est la !!!

 

MERCI encore !!

 

--------------------

j'ai contourner le problème, j'ai retirer le widht de la ligne 23 et a la ligne 28 au lieux de margin 0 j'ai remplacer par 3px et tout passe en dessous de la photo !

Edited May 14, 2013 by Full Carbone 94 (see edit history)