Full Carbone 94 Posted May 6, 2013 Share Posted May 6, 2013 (edited) 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) Link to comment Share on other sites More sharing options...
Full Carbone 94 Posted May 10, 2013 Author Share Posted May 10, 2013 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 Link to comment Share on other sites More sharing options...
binassmax Posted May 10, 2013 Share Posted May 10, 2013 (edited) '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) Link to comment Share on other sites More sharing options...
binassmax Posted May 10, 2013 Share Posted May 10, 2013 (edited) 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) Link to comment Share on other sites More sharing options...
Full Carbone 94 Posted May 13, 2013 Author Share Posted May 13, 2013 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 Link to comment Share on other sites More sharing options...
binassmax Posted May 13, 2013 Share Posted May 13, 2013 (edited) 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) Link to comment Share on other sites More sharing options...
Full Carbone 94 Posted May 14, 2013 Author Share Posted May 14, 2013 (edited) 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) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now