L'affichage des vignettes sous la photo dans une fiche produit est étrange

  • Posts: 201
  • Thank you received: 32
  • Hikashop Business
1 week 6 days ago #360418

Bonjour,

je vais sans doute vous poser deux questions stupides, mais je n'arrive pas à trouver la solution à mes problèmes.

- Lorsque j'affiche un produit qui comporte deux photos, l'affichage est très étrange. Les vignettes sous la photo du produit sont étirées.

Voici un exemple : www.guillenphoto.com/fr/les-photos-dart-...ptyque-1706-320.html

Je dois faire une bêtise mais je ne sais pas laquelle. Comment faire pour que les vignettes s'affichent correctement?

- D'autre part, mes photos n'ont pas de bord blanc. Or dans l'affichage un bord blanc est affiché. Comment faire pour ne pas avoir de bords blancs?

Dans les autres produits, je n'ai pas ce problème car il n'y a qu'une seule photo dans le produit.

J'espère que vous pourrez m'aider.
Merci par avance.
A. Guillen

Last edit: 1 week 1 hour ago by guillenphoto.

Please Log in or Create an account to join the conversation.

  • Posts: 81567
  • Thank you received: 13075
  • MODERATOR
1 week 6 days ago #360422

Bonjour,

1. C'est un problème de CSS avec les restrictions de votre configuration et le CSS de votre template qui résultent en ce problème.
Rajoutez ce code CSS pour éviter le problème:

img.hikashop_child_image {
    height: 100px;
    width: max-content;
}

2. Ce ne sont pas vraiment des bords blancs. Ce sont des margins CSS, et ils apparaissent à cause du CSS qui met un bord noir fondu autour de la zone, qui fait qu'on a l'impression que l'image a un bord blanc.
Pour rectifier le souci, il faut bouger le margin de l'image vers le div. Par exemple, en rajoutant ce CSS:
.hikashop_main_image_div img {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}
.hikashop_main_image_div{
    margin-top: 10px;
    margin-bottom: 10px;
}

Please Log in or Create an account to join the conversation.

  • Posts: 201
  • Thank you received: 32
  • Hikashop Business
1 week 5 days ago #360439

Bonjour Nicolas,

je vous remercie beaucoup pour votre aide. Les corrections que vous m'avez données sont parfaites.
C'est exactement ce que je voulais.

J'ai deux dernières questions concernant la présentation de ces nouveaux produits.

1. La première concernant l'affichage du listing des produits. J'ai un espace blanc qui apparait sous les photos des produits.
Pourriez-vous me dire comment le supprimer? Je viens d'essayer de trouver le css à modifier mais je ne trouve pas.
Voici le lien vers le listing : www.guillenphoto.com/fr/les-photos-dart-...de-amar-guillen.html

2. La seconde concerne les produits en relation dans la même collection. J'ai aussi un espace blanc en dessous de la photo comme sur cette page :
www.guillenphoto.com/fr/les-photos-dart-...ptyque-1706-320.html

Merci par avance pour votre aide
Sincèrement,
A. Guillen

Last edit: 1 week 5 days ago by guillenphoto.

Please Log in or Create an account to join the conversation.

  • Posts: 4533
  • Thank you received: 612
  • MODERATOR
1 week 5 days ago #360444

Bonjour,

Ces deux commandes devrait vous permettre d'obtenir le résultat que vous recherchez :
1. D'abord contraindre en hauteur le containeur de l'image :

.hikashop_product_image {
    height: 238px;
}
2. Puis forcer l'image avec la même hauteur, votre image :
.hikashop_product_image img {
    height: 238px;
}
Cordialement

Last edit: 1 week 5 days ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 201
  • Thank you received: 32
  • Hikashop Business
1 week 4 days ago #360462

Bonjour Philipp,

je vous remercie pour votre réponse rapide.

Vos corrections fonctionnent parfaitement.

Avant sur la présentation des autres produits je ne m'étais pas rendu de ce problème car j'avais ajouté une bordure blanche autour des produits.

Je vais pouvoir maintenant travailler sur la présentation des produits et sur le contenu des pages articles.

Merci encore à vous et à Nicolas pour votre aide inestimable. Sans vous, je n'en serai pas là.

Sincèrement,
A. Guillen

The following user(s) said Thank You: nicolas, Philip

Please Log in or Create an account to join the conversation.

  • Posts: 201
  • Thank you received: 32
  • Hikashop Business
1 week 1 day ago #360520

Bonjour,

désolé de vous déranger encore mon problème mais suite à l'application de vos corrections, il y a un effet de bord que je n'avais pas vu.

Cet effet de bord apparait dans les images des produits affichées avec un module.
Voici un exemple : www.guillenphoto.com/fr/photos-d-art-de-...ote-de-l-ecosse.html

Les images sont étirées de manière panoramique. Je n'avais vu avant car j'étais en voyage et j'ai contrôlé avec mon smartphone où l'affichage est correct.

S'il vous plait pourriez me dire comment faire pour afficher correctement les images des produits avec un module?

Merci par avance pour votre aide
Sincèrement,
A. Guillen

Please Log in or Create an account to join the conversation.

  • Posts: 201
  • Thank you received: 32
  • Hikashop Business
1 week 1 hour ago #360567

Je vous fais un petit up de mon problème.

Je vois que vous êtes très occupés avec les questions sur le forum mais l'affichage est vraiment très dérangeant pour les clients.

Même s'il faut payer pour la prestation de conseil, je suis prêt à le faire.

Merci par avance pour votre aide

SIncèrement,
A. Guillen

Please Log in or Create an account to join the conversation.

  • Posts: 4533
  • Thank you received: 612
  • MODERATOR
6 days 20 hours ago #360573

Bonjour,

Vous allez devoir "spécialisé" un peu plus vos custom Css, suivez moi étape par étape pour mieux comprendre le principe :
1. En utilisant votre outil navigateur inspecteur (inspector tool), pointez votre élément & faites clique droit => inspect (or inspector tool)
2. Vous ouvrirez alors un fenêtre vous permettant de voir votre Html

alt


3. Vous pourrez alors récuperé l'id ou la class de votre listing, où vous voulez limiter vos commandes Css
=> Example à partir de ma screenshot :
le listing a l'Id="hikashop_category_information_menu_5823" donc :
Avant :
.hikashop_product_image ,
.hikashop_product_image img {
    height: 238px;
}
Après :
.hikashop_category_information_menu_5823 .hikashop_product_image, 
.hikashop_category_information_menu_5823 .hikashop_product_image img {
    height: 238px;
}
Et donc repeté cette démarche pour chaque contexte, où vous devez corrigé votre problème de marge blanche en bas.
En espérant que cela vous aide!
Cordialement

Last edit: 6 days 23 hours ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 201
  • Thank you received: 32
  • Hikashop Business
6 days 19 hours ago #360579

Bonjour Philipp,

je vous remercie pour votre message et pour la correction.

Maintenant l'affichage des images des produits fonctionnent correctement dans les modules.

Mais la barre blanche apparait de nouveau en bas de l'image d'un produit dans les listings.

J'ai un problème mais je ne sais pas lequel. Ce n'est vraiment pas facile.

J'espère que vous pourrez m'aider.

Sincèrement,
A. Guillen

Please Log in or Create an account to join the conversation.

  • Posts: 4533
  • Thank you received: 612
  • MODERATOR
6 days 15 hours ago #360581

Bonjour,

Oui, car comme je vous l'expliqué vous devez extraire dans caque contexte (product page, listing, module etc) mon exemple (avec l'outil inspecteur de votre navigateur) pour construire plusieurs selecteurs ( documentation ).

Vous avez besoin de selecteur pour CHAQUE contexte où cela et nécessaire, schéma :
.context_1 .hikashop_product_image,
.context_1 .hikashop_product_image img,
.context_2 .hikashop_product_image,
.context_2 .hikashop_product_image img,
.context_3 .hikashop_product_image,
.context_3 .hikashop_product_image img {
height: 238px;
}

En espérant que cela soit plus clair pour vous.
Cordialement

Last edit: 6 days 19 hours ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 201
  • Thank you received: 32
  • Hikashop Business
6 days 5 hours ago #360599

Bonjour Philipp,

je vous remercie pour votre réponse et vos explications.

J'ai bien compris le principe des sélecteurs.

C'est bien ce que j'ai fait mais cela ne fonctionne pas.

Le listing que j'affiche est celui du menu dont l'identifiant joomla est 5823. Il s'agit de la page : www.guillenphoto.com/fr/les-photos-dart-...de-amar-guillen.html
J'ai ajouté dans le fichier css les lignes suivantes :

.hikashop_category_information_menu_5823 .hikashop_product_image,
.hikashop_category_information_menu_5823 .hikashop_product_image img {
height: 238px;
}

Autre cas. Pour les produits en relation sur cette page : www.guillenphoto.com/fr/les-photos-dart-...ritime-1706-319.html

J'ai ajouté les css suivants :

.hikashop_category_information_module_3585 .hikashop_product_image,
.hikashop_category_information_module_3585 .hikashop_product_image img {
height: 238px;
}

J'ai toujours les bordures blanches qui apparaissent en bas de chaque photo.

Pourriez-vous me dire quelle est mon erreur?

Sincèrement,
A. Guillen

Please Log in or Create an account to join the conversation.

  • Posts: 4533
  • Thank you received: 612
  • MODERATOR
5 days 23 hours ago #360601

Bonjour,

Peut être est-ce un peu de ma faute, car avec les selecteur qui cible des Id, il y a une subtilité, en détails :
SI vous avez à faire à un Id, exemple :
<div id="hikashop_category_information_menu_5823" ...
Alors la notation ne sera plus .hikashop_category_information_menu_5823 mais #hikashop_category_information_menu_5823.

Le point "." ne fonctionnera que pour les class html, donc pour les Id cela sera toujours "#".
En espérant que cela vous aide.

Cordialement

Last edit: 6 days 3 hours ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 201
  • Thank you received: 32
  • Hikashop Business
5 days 23 hours ago #360606

Bonjour Philipp,

je vous remercie beaucoup pour votre aide.

Vous avez raison. C'était la correction à faire. Maintenant tout fonctionne parfaitement.

C'est très subtil.

Je suis très heureux que tout fonctionne bien car j'ai une présentation la semaine avec un client très important. Je voulais terminer le maquettage de mes produits. Maintenant je vais pouvoir alimenter la collection avec des documents Excel.
Vous me sauvez la mise.

Merci mille fois pour votre aide et votre patience.

Je ne suis pas programmeur. Sans votre aide, rien ne serait possible pour des cas aussi subtils.

Sincèrement,
A. Guillen

The following user(s) said Thank You: Philip

Please Log in or Create an account to join the conversation.

  • Posts: 4533
  • Thank you received: 612
  • MODERATOR
5 days 20 hours ago #360607

Bonjour,

Ravi d'avoir pu vous être utile et vous avoir permis de progresser en compréhension de ces petits trucs qui aide pour améliorer son site avec HikaShop.

Si ce n'est pas déjà fait, vous pouvez laisser un avis sur HikaShop & nos services, ici .

Cordialement

Last edit: 5 days 23 hours ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 201
  • Thank you received: 32
  • Hikashop Business
5 days 19 hours ago #360619

Bonjour Philip,

j'avais déjà écrit une review sur le site des extensions Joomla. Si c'était à refaire, je récrirai mon commentaire.

En effet, depuis les commentaires que j'avais écrits, je n'ai pas cessé de découvrir la puissance de Hikashop. C'est une extension d'une puissance extraordinaire.
Je ne suis pas du tout programmeur de site web. Je suis un utilisateur de Joomla. J'assemble des extensions pour répondre aux besoins et aux attentes de mes clients.

Hikashop m'a permis de développer mon activité commerciale d'une manière que je ne soupçonnais pas. Le plus intéressant pour moi est la manière dont vous avez organisé votre extension. Cela me permet de mieux répondre à mes clients et à ouvrir des solutions pour leur faciliter la vie.

Il est certain qu'il est nécessaire d'avoir quelques notions techniques pour mettre en place Hikashop. Mais vous et Nicolas êtes toujours présent pour épauler et répondre à ces questions techniques.

Je n'hésite jamais à vanter et à parler d'Hikashop à mes amis qui exercent la même profession que moi. Vous le méritez.

Merci pour tout,
Sincèrement,
A. Guillen

The following user(s) said Thank You: Philip

Please Log in or Create an account to join the conversation.

  • Posts: 4533
  • Thank you received: 612
  • MODERATOR
5 days 14 hours ago #360621

Bonjour,

Merci pour tos vos compliments.
Cordialement

Please Log in or Create an account to join the conversation.

Time to create page: 0.090 seconds
Powered by Kunena Forum