Réduction D'affichage D'image Et Disparition D'oeil

[Dorora]

Bonjour,

 

 N'ayant pour finir jamais eu le budget dans les temps pour faire faire ça par un pro, j'ai attaquer les modif' de mon template, ce n'est pas fini, mais j'en vois le bout.

 J'ai donc fait une install test de presta à cette adresse:

 

 http://lecomptoirdesboiseux.fr/prestashop

 

 Problème 1- La disparition de l'oeil:

 

Lorsque l'on consulte la boutique avec un petit écran ou que l'on réduit la taille de la fenêtre, arrive un moment ou un coin de l'image du produit se grise, et un oeil apparait dedans, sauf que là, et bien cette œil n'apparait pas, et il me semble que même avant que je comence les modif' il n'était pas là.

 J'ai fouillé tout ce que j'ai pu, mais ça n'a rien donné, je ne comprend rien à l'utilisation d'awesome font... et pourquoi il ne manque que celui là ???

 

Edit: je m'aperçois à l'instant qu'il me manque également les deux petites icônes pour l’affichage liste ou grille.

 

 Bref, quelqu'un à une idée?

 

 Problème 2- La réduction de la taille des images dans la fiche produit:

 

 Je viens de lire vite fait les truc de la futur 1.7 et je suis franchement dépité, je cherche à réduire les tailles des photos à toute fin, et les devs vont encore en augmenter la taille....

 si je peux comprendre l'utilité de vendre des chaussure ou des fringues sur photos.. je me dit que je doit pas être le seul à vouloir de la place pour un vrai descriptif technique...

 Bref, après avoir fouillé, j'ai déjà réussi à caser 4 produits par ligne en mode grille, mais la taille de l'image sur la fiche produit me résiste.

 

 Réduire la taille de l'image dans le BO n'a aucune incidence sur la place qu'elle occupera sur le FO, je suis passer à 50x50, j'ai eu une magnifique image pixeliser en 458x458...

 

 J'ai fini par comprendre que la fiche se divise en 12 colonnes, j'ai donc jouer là dessus, l'image d'origine prend 5 colonne, j'ai fait un test à4, pas mal, un test à 3, impeccable, la taille de l'image me conviens!

 

 Le problème viens du petit menu avec les miniatures en dessous, dans les deux cas que je présente en dessous l'image est sur 4 colonne:

 

 http://www.lesboiseux.fr/scies-japonaises/10240-Takagi-10RG240-Ryoba_Gisuke_240mm_Takagi.html

 

http://lecomptoirdesboiseux.fr/prestashop/t-shirts/1-t-shirt-delave-manches-courtes.html

 

 Dans les deux cas j'ai effectuer exactement la même modif, le premier j'ai 4 miniatures, et les flèches de défilement placées n'importe comment, le second, je n'ai que 3 miniatures et tout se passe bien.

 

 Quand je passe mon image sur "3 colonnes" j'ai ce problèmes dans les deux cas.

Le "petit machin" (view_block) où sont les miniatures est capable de se réduire de lui même lorsque l'on rétréci la fenêtre en largeur, c'est donc possible , mais je ne trouve pas comment

 

 Si quelqu'un à une idée là dessus, je prend aussi

 

 Vous remerciant par avance de votre temps et de vos réponses.

 

Stef

 

PS: Je ne suis ni graphiste, ni un pro du marketing, ni même formé de près ou de loin au métier de l'informatique, je suis donc preneur de tout conseil (surtout sur le visuel finale) que vous pourriez me prodiguer sur le futur template de ma modeste petite boutique. (les produits rentreront en stock quand la boutique ressemblera un peu à quelque chose )

Edited March 2, 2016 by Dorora (see edit history)

[Alexandre Carette]

Salut

 

1) ligne 4374 du global.css

 

remplacer

.icon-eye::before, .icon-eye-open::before {
    content: "";
}

par

 

.icon-eye::before, .icon-eye-open::before {
    content: "";
}

selon le meme principe

 

icone grille

.icon-th-large::before {
    content: "";
}

icone list

.icon-th-list::before {
    content: "";
}

[Alexandre Carette]

2)

 

dans product.css

.pb-left-column #image-block {
    position: relative;
    display: block;
    cursor: pointer;
    padding: 5px;
    border: 1px solid #dbdbdb;
    background: #fff;
    max-width: 370px;

}

[Dorora]

Bonjour,

 

 déjà un grand merci pour tes réponses!

 

1-  Je situe le problème, lors de l'enregistrement de mon global.css sur dreamweaver, les  disparaissent

Je ne comprend pas ce que c'est que ce caractère ni son but dans à cette endroit, toujours est il que j'ai situé le problème, et donc je vais pouvoir lui trouver une solution.

Merci donc!

 

2- L'ajout du max-width dans .pb-left-column #image-block à parfaitement l'effet rechercher sur la photo!

Par contre, pas sur le view_block, je n'ai absolument pas penser à utiliser cette manœuvre(max-width), le résultat est pour le moment moyen mais j'y travaille.

 C'est dans le #thumbs_list que se trouve ma clé je crois, j'essaye de décortiquer et de changer les tailles dans tout les @media pour qu'a chaque réduction la taille soit cohérente.

 

 Il me faut trouver également pourquoi parfois la dernière image est moitié caché

 

un grand merci à toi en tous cas, tu m'a donner de très bonne piste de réfléxion ^^

 

 

 

 

 

 

[Dorora]

Re-bonjour,

 

 1- Problème réglé grâce à NetBean, la fonction de synchro automatique m'a complétement fait basculer pour lui 10min seulement après l'avoir essayer, et c'était donc bien dreamweaver qui me virait les "" quand j'enregistrais le css.

 

Je reste preneur de l'explication sur les "" leur rôle, et leur utilisation ?

 

 2- Il semblerait que le problème soit réglé.

http://lecomptoirdesboiseux.fr/prestashop/t-shirts/1-t-shirt-delave-manches-courtes.html

 

Maintenant je ne comprend pas bien pourquoi, si quelqu'un peux m'expliquer:

 

Code d'origine:

/* miniatures */
.pb-left-column #views_block {
  margin-top: 10px; }
  @media (max-width: 767px) {
    .pb-left-column #views_block {
      width: 280px;
      margin: 10px auto 0px auto; } }

#thumbs_list {
  overflow: hidden;
  float: left;
  width: 392px; }
  @media (min-width: 992px) and (max-width: 1199px) {
    #thumbs_list {
      width: 294px; } }
  @media (min-width: 768px) and (max-width: 991px) {
    #thumbs_list {
      width: 164px; } }
  @media (max-width: 767px) {
    #thumbs_list {
      width: 196px; } }
  #thumbs_list ul#thumbs_list_frame {
    list-style-type: none;
    padding-left: 0;
    overflow: hidden;
    height: 90px; }

et le nouveau :

.pb-left-column #views_block {
  margin: 10px auto 0px auto; /* remplacement de margin-top: 10px */
  }
  @media (max-width: 767px) {
    .pb-left-column #views_block {
      width: 200px; /*280*/
      margin: 10px auto 0px auto; } }


#thumbs_list {
  overflow: hidden;
  float: left;
  width: 392px; }
  @media (min-width: 992px) and (max-width: 1199px) {
    #thumbs_list {
      width: 294px; } }
  @media (min-width: 768px) and (max-width: 991px) {
    #thumbs_list {
      width: 164px; } }
  @media (max-width: 767px) {
    #thumbs_list {
      width: 196px; } }
  #thumbs_list ul#thumbs_list_frame {
    list-style-type: none;
    padding-left: 0;
    overflow: hidden;
    height: 90px; }

 J'ai testé sur deux navigateur (firefox et safari et les deux affiche correctement), ça fonctionne mais je ne comprend pas pourquoi et ça m’énerve presque autant que quand ça ne fonctionne pas.

 

 Si quelqu'un à une info concrête là dessus je prends aussi.

[Dorora]

Bonjour,

 

je marque résolu parce que ça l'est,mais comme pour plein de chose avec prestashop, on ne sais pas vraiment pourquoi ça fonctionne...

[Alexandre Carette]

Bonjour,

ce n'est pas prestashop qu'il faut comprendre pour ce cas mais bien le CSS 3, le site du zero et grafikart sont de bons departs...

 

cdt