Jump to content

[Resolu] aligner 4 articles sur la même ligne

brikobike
 Share

Recommended Posts

Divine Experienced

Divine

Posted
Posted

Bonjour,

 

Alors c'est plutôt dans le fichier product_list.css que tu dois faire tes modifications en prenant exemple sur les styles définis pour les produits phares, qui eux sont dans le fichier global.css

Link to comment
Share on other sites
CaZz Newbie

CaZz

Posted
Posted

Bonjour brikobike.

Je viens t'apporter la solution. Je ne sais plus qui l'avais donné sur le forum, mais au risque du plagiat voici le code suivant

 

/* affichage en colonnes*/
ul#product_list li {
background: #d0d3d8 url('../img/block_category_item_bg.jpg') repeat-x;
border: solid 1px #d0d3d8;
float: left;
height: auto;
margin-bottom: 10px;
margin-right: 10px;
min-height: 280px;
padding: 6px;
width:130px;
}

 

Tu le met dans product_list.css (tu templace le ul#product_list li en soit).

 

Avec cela tu aura l'affichage en ligne. Pense à augmenter le nombre de produit par page à 12.

Cependant il reste quelques problème que je tente de résoudre.

_ Problème pour la pagination (pour choisir la page) qui ne se place pas la ou il faut. J'ai chercher mais même avec un position:relative; ça ne donne rien (le pire étant sous IE)

 

_ problème dans les fenêtres des produits, Selon ton texte de résumé de produit. Explications : le block produit est constitué de deux block, le premier avec la photo et le résumé, le deuxième avec le prix et les boutons ajouter au panier et voir le produit.

J'avais essayer avec un position:relative; sur le deuxième block qui marche (sauf sous IE youhou)

 

Voilà, si tu as les réponses à mes problèmes, ça fera d'une pierre deux coup =)

Sur ce, bon courage, je continue de chercher de mon coté.

 

Cordialement.

Link to comment
Share on other sites
brikobike Newbie

brikobike

Posted
  • Author
Posted

Bonjour, et merci pour ton partage , je viens de tester ces lignes et effectivement l'affichage en ligne apparait mais tout est decalé et je n'ai pas les connaissances requisent pour trouver la solution, cependant j'ai un ami qui code trés bien qui m'a promis de se pencher sur ce probléme , s'il arrive a faire quelques chose de bien je ferais suivre l'info.

Link to comment
Share on other sites
CaZz Newbie

CaZz

Posted
Posted (edited)

Je me permet de up le sujet pour savoir si tu as trouver une solutions ou quelqu'un d'autre.

Surtout concernant ul#product_list li div.right_block.

 

J'ai trouvé une alternative. Il suffit de donner une taille précise à chaque partie dans chaque block. Peu être un peu simple mais ça fonctionne plutôt bien.

Edited by CaZz (see edit history)
Link to comment
Share on other sites
CaZz Newbie

CaZz

Posted
Posted

En gros en utilisant ma méthode pour être en colonne tu as le "bloc général" ul#product_list li. J'avais mis height en auto et min-height à 300px. Tu devais avoir un décalage car ton bloc devait faire plus de 300px. Tu pouvais donc résoudre le décalage en augmentant le min-height jusqu'à avoir la taille de ton plus grand bloc. Mais cela ne résolvait pas le placement à l'intérieur.

 

Comme je disais à l'intérieur du "bloc général" il y a deux blocs, le center_block qui contient l'image, le titre et la description du produit, et le right_block qui contient le prix, la quantité en stock et les boutons ajouter au panier et voir le produit, et également la checkBox pour comparer. Ces blocs selon ma méthode étaient en float, ce qui les plaçais selon ce qu'il y a. Bon c'est un peu plus compliqué mais c'est l'idée du float (en css).

 

En gros j'ai enlever les floats pour qu'ils se placent comme je veux et non pas selon ce qu'il y a.

L'idée m'est venu car quand tu crées un site web, une maquette ou un logiciel, tu dois connaitre le positionnement quasiment au pixel près. J'ai donc donné une taille unique à chaque composants du blocs.

Dans productlist.css tu trouve tout les composants.

 

En premier l'image : ul#product_list a.product_img_link img dont la hauteur fait 130px, j'ai donc ajouter height : 130px;

 

Ensuite tu as le titre : ul#product_list li h3 . Bon là j'ai bidouillé un peu car ayant la flème de chercher pourquoi le titre prend en taille le haut de la fenêtre jusqu'au bas du titre. Donc pour un h3 qui est de 15px environ, j'ai mis height:150px. Comme ça tu n'aura pas trop de décalage.

 

Ensuite il y a le bloc description : ul#product_list li p.product_desc. Donc c'est la que j'ai chercher à la base, et donc en mettant une taille fixe le reste du bloc se mettra en fonction (car si il n'y a rien ou si il est en auto le right_block se colle) . J'ai mis height:40px, après c'est à toi de voir si tu veux plus ou pas, et donc en fonction d'augmenter derrière la taille du "bloc général". Bien sur en mettant une taille fixe du devra faire attention au nombre de mots que tu mettra dans la description du produit, mais cela doit resté un cours résumé donc ça va. Egalement tu aura surement ta description collé au titre, rien de grave, ajuste en mettant un padding-top de plus ou moins 5-10 px, à toi de voir.

 

Ensuite on passe dans le right_block. Normalement, je dis bien normalement avec les height que j'ai donné, se trouve parfaitement bien positionné en bas du "block général", si ce n'est pas le cas, peaufine un peu en changeant tel ou tel valeur.

Et d’ailleurs en revenant sur les float, si tu enlève le float : right sur le rigt-block tout ton bloc se retrouvera collé à gauche (c'est normal) donc, ajuste avec un padding-left pour le placer ou tu veux.

 

Bien sur cela n'est peu être pas la meilleur solution car tu as des contraintes en faisant ça, notamment le nombre de mots limités pour la description si tu ne veux pas avoir te trop grand bloc produit (bloc général). Mais au moins ça fonctionne et à moins que tu ais un produit ayant un nom faisant plus de 3 lignes c'est nikel. (la solution étant d'augmenter le height encore une fois).

 

Voilà mon avancement dans ce problème, si tu as d'autre question n'hésite pas !!

 

Cordialement.

Link to comment
Share on other sites
CaZz Newbie

CaZz

Posted
Posted (edited)

J'ai trouvé une "solution"; mais bon je pense quel ne peut suffire qu'à moi même.

J'ai modifié la traduction de "out of order" qui était "stock épuisé" en "épuisé", ainsi ça tient sur une ligne comme le "en stock". Maintenant ce n'est peu être pas ce que tout le monde veut, mais avis personnel et pas envie de chercher plus c'est possible de faire comme ça.

 

@brikobike : Mon système fonctionne sous IE (et j'ai bien de la chance ^^) , modzilla et chrome, je n'ai pas essayé sous safari et opéra. Mais normalement ça devrait marcher sous ces deux derniers car ils sont autant ou plus avancés que IE. Maintenant ne les ayant jamais utilisé et n'ayant jamais développé sur ceux la je ne peux pas te dire en étant sur à 100%.

 

D'ailleurs j'avais essayé avec un "position : relative" et ça ne fonctionnait pas sous IE donc je suis assez content =).

Mais concrètement je ne pense pas qu'il puisse y avoir des erreurs car je donne seulement une taille fixe à chaque composant. C'est du css simple (pas du 2 ou 3) donc si tu ne mes rien en auto (dans productlist.css par exemple) ça marche.

Edited by CaZz (see edit history)
Link to comment
Share on other sites
CaZz Newbie

CaZz

Posted
Posted

hum ça dépend ce que tu veux changer.

Pour un débutant je conseil déjà seulement les .css. Ne va pas te perdre dans les .tpl que si tu n'as jamais fais du html ou lire des algos tu va te perdre ^^ je me suis perdu à essayer de comprendre !

 

Donc le css c'est déjà bien. Comme expliqué un peu partout le gros du site se trouve dans le global.css. Ici tu dois toucher au productlist.css qui reprend toute la page produit.

 

Un conseil qui est souvent donné et que je redonne =)

Utilise firefox, installe l'addon firebug, va sur la page de ton site que tu veux modifier (ou la page d'un site ou tu trouve une idée de design sympa ! mais attention au plagiat), tu lance firebug et tu aura le code html (simple a lire) et quand tu passeras ta souris ça t'affichera à quoi ça correspond. Ça va te permettre de voir comment la page est agencé, après tu regarde le composant qui tu veux modifier tu aura sois un "id" sois une "class" et hop tu le met dans la bar de recherche et tu cherche dans l'onglet css. Dès que la trouvé tu regarde le nom du fichier (pour pouvoir le modifier après) et tu peux faire des modifications directement par firebug pour voir à quoi ça ressemble.

 

Un coup de main à prendre mais c'est super utile surtout quand tu utilise un cms.

Link to comment
Share on other sites
brikobike Newbie

brikobike

Posted
  • Author
Posted

Merci pour toutes ces infos et le temps que tu prend pour expliquer , je navigue sous Opera et j'utilise "Opera Dragonfly" qui est la même chose il me semble , j'ai commencé a m'y mettre mais un ami qui touche trés bien au PHP et HTML se pense egalement dessus , je pense qu'il va me sortir un truc sympa , selon lui toucher seulement au fichier .css ne suffit pas il faut toucher egalement aux fichiers systéme de prestashop !!! affaire a suivre , je te ferais savoir si il en sort quelque chose de concluant et d'exploitable.

 

encore merci et je lache pas le morceau ;)

Link to comment
Share on other sites
CaZz Newbie

CaZz

Posted
Posted

Je t'en prie :)

Je rejoins l'avis de ton amis. Si tu veux faire beaucoup de changements, il y a un moment ou il faut toucher au .tpl et au .php

J'ai moi même fais des changements car ça ne me correspondait pas.

 

Bon courage pour la suite !

Link to comment
Share on other sites
brikobike Newbie

brikobike

Posted
  • Author
Posted (edited)

Bonsoir CaZz , avec ce mauvais temps mon collegue a trouvé le temps de ce pencher sur le probléme , il en ressort un truc proche de la perfection , il va encore bosser dessus pour finioller les petits defauts qui peuvent apparaitres mais c'est deja trés bien comme ça , je suis ravi , lorsque qu'il aura paufiner le theme je ferais suivre les infos a ceux qui sont interressés

 

Je souhaiterais encore supprimer toutes les vignettes se rapportant aux categories lorsque je suis sur "Boutique" + 2 ou 3 details et aprés je pense que se sera bon pour moi , il faut que je me depéche ils ont prevu que le soleil allait revenir ;)

 

Bonne nuit :D

Edited by brikobike (see edit history)
Link to comment
Share on other sites
CaZz Newbie

CaZz

Posted
Posted

Salut.

Quand tu parle des vignettes c'est les images des catégories ?

SI oui tu modifie dans product.tpl il me semble, tu as une ligne ou il y a les images, mais je suis plus sûre.

 

Enfin tant mieux pour toi si tu as obtenu ce que tu voulais !

 

Bonne continuation !

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...