dreamsport Posted August 7, 2009 Share Posted August 7, 2009 Bonjour à tous,je travaille actuellement sur une modification du thème de Prestashop pour mon site et je souhaite que les produits d'une catégorie soient listés horizontalement puis verticalement (de manière a former un carré avec les produits).Pour vous donner une image du classement que je veux obtenir visitez ce site.j'ai déjà réussi à mettre en forme les blocs de produits tels que sur le site ci dessus, il ne me reste plus qu'a trouver comment afficher plusieurs produits sur une ligne et je compte sur vos lumières pour m'y aider.Merci Link to comment Share on other sites More sharing options...
dreamsport Posted August 12, 2009 Author Share Posted August 12, 2009 un petit up pour ma question? Link to comment Share on other sites More sharing options...
Patric Posted August 12, 2009 Share Posted August 12, 2009 Tu aura plus de chances dans la bonne section.Topic déplacé. Link to comment Share on other sites More sharing options...
Atch Posted August 12, 2009 Share Posted August 12, 2009 Salut,tout se fait dans la feuille de style global.css en grande partie et aussi dans le fichier product-list.tpl de votre theme pour supprimer des choses qui vous semblera superflues (decriptions, icones etc...).V++Atch Link to comment Share on other sites More sharing options...
dreamsport Posted August 12, 2009 Author Share Posted August 12, 2009 Merci Atch, supprimer, modifier j'ai trouvé dans le .tpl et dans le global.css sans problème.Ma question (si je la formule différemment) est : comment afficher une liste de manière horizontale avec saut de ligne après x "colonnes".Aurais-je oublié de le préciser dans mon premier post? (ou alors mal exprimé sans doute) Link to comment Share on other sites More sharing options...
Atch Posted August 12, 2009 Share Posted August 12, 2009 exemple :ton div contenu (principal) fait 500 px de large par exemple.à l'intérieur, tu as aujourd'hui (encore par exemple) une seule ligne avec un div produit de 400 px de large.Si tu fais un div produit de 90 px de large, par exemple, et tu lui appliques un float left, tu auras 5 blocks produits qui vont se mettre sur une seule ligne et les autres block iront à la ligne...si tu veux que 4 blocks tu joues sur la largeur et les padding/margin des blocs etc...c'est bien cela que tu souhaites, non?V++atch Link to comment Share on other sites More sharing options...
dreamsport Posted August 12, 2009 Author Share Posted August 12, 2009 Tu as parfaitement cerné ce qu'il me faut (du moins je pense).En revanche j'ai du mal à réaliser cela malgré tes conseils sur les div.je te met l'endroit qui je pense doit etre modifié dans le css de prestashop /* product-list.tpl */ ul#product_list{ margin-top:2em; list-style-type:none; } ul#product_list li { background: #d0d3d8 url('../img/block_category_item_bg.jpg') repeat-x; border: solid 1px #d0d3d8; padding: 6px; height:130px; clear:both; margin-bottom:0.3em; } ul#product_list li a { text-decoration:none; color:#374853; } et ici celui que j'ai modifié /* product-list.tpl */ ul#product_list{ margin-top:2em; list-style-type:none; text-align:center; } ul#product_list li { background: #FFFE95 url('../img/block_category_item_bg.jpg') bottom repeat-x; border: solid 1px #d0d3d8; clear:both; margin-bottom:0.3em; width:134px; } ul#product_list li a { text-decoration:none; color:#374853; } Peut etre suis-je "aveuglé" à force de chercher^^ si ce n'est pas le bon endroit du code à modifier, j'imeris savoir dans quelle "catégorie" chercher Link to comment Share on other sites More sharing options...
Peha Posted August 12, 2009 Share Posted August 12, 2009 Bonjour,essaye de mettre float:left à ul#product_list liensuite en jouant sur sa largeur et sur la largeur globale de la colone tu peux en mettre plus ou moins sur une ligne Link to comment Share on other sites More sharing options...
dreamsport Posted August 12, 2009 Author Share Posted August 12, 2009 Merci Peha, j'avais déjà testé cette solution, mais voyant qu'un pro me conseillait ca j'ai essayé de virer des trucs en laissant un float:left la ou il faut et j'ai trouvé ce qui m'empechait d'arriver à mes fins.Ici, si on eleve le clear:both, tout se passe bien et j'ai pour le moment 3 produits sur la meme ligne. ul#product_list li { background: #d0d3d8 url('../img/block_category_item_bg.jpg') repeat-x; border: solid 1px #d0d3d8; padding: 6px; height:130px; clear:both; margin-bottom:0.3em; } Il ne me reste plus qu'a fignoller un peu pour aérer les produits entre eux.Merci à vous 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