Problème d’affichage d’une image dans un tableau (Créer un compte)

  • Statut : non résolu
15 sujets de 1 à 15 (sur un total de 22)
  • Auteur
    Messages
  • #559604
    baptistebarbaud
    Participant
    Padawan WordPress
    94 contributions

    Bonjour,

    Ma configuration WP actuelle
    – Version de WordPress : 4.4.2
    – Version de PHP/MySQL :
    – Thème utilisé : Extra 1.2.1
    – Extensions en place :
    – Nom de l’hebergeur : Planethoster
    – Adresse du site : http://acheterpascher.net/

    Problème(s) rencontré(s) :

    Bonjour,

    Je rencontre actuellement un problème avec une image que j’ai inséré dans un de mes tableaux et semble correct lors de la modification de la page, mais qui à l’affichage, apparaît en dehors du tableaux.
    Voilà la page où se situe le problème :
    http://acheterpascher.net/meilleurs-rapports-qualite-prix/gastronomie-nourriture-boisson/specialites-produits-culinaires/

    La photo du poulet rôti devrait être alignée avec les « cochons de notation », et non affiché au dessus à droite.
    Comment faire en sorte que l’image reste alignée dans le tableau ?

    Je vous remercie et vous souhaite une agréable journée 👏

    #1043695
    Flobogo
    Modérateur
    Maître WordPress
    20124 contributions

    Bonjour,

    Vous devriez essayer avec un tableau de 3 colonnes (texte / petits cochons / image du poulet) au lieu de faire 4 lignes.
    Dans les 2 premières colonnes, un simple
    permettra de mettre les unes sous les autres les lignes de texte ou les « lignes de cochons ».

    #1043696
    baptistebarbaud
    Participant
    Padawan WordPress
    94 contributions

    Bonjour,

    Merci pour votre retour. J’ai essayé avec un tableau de 3 colonnes mais le problème persiste et l’image du poulet rôti est encore affichée au mauvais endroit.
    Concernant les textes et les cochons, ils sont déjà bien alignés les unes sous les autres grâce aux différentes lignes, le problème est que les cochons se situent très légèrement plus haut que les textes. J’aimerais qu’ils soient parfaitement alignés.

    Merci bien 🙂🙂

    #1043697
    Flobogo
    Modérateur
    Maître WordPress
    20124 contributions

    Pardon, je n’ai peut-être pas expliqué suffisamment l’idée –> il faut faire un tableau avec 3 colonnes, mais une seule ligne … 3 cases côte à côte, en fait, mais en HTML cela donne 1 tableau d’une seule ligne, avec 3 colonnes.

    #1043698
    baptistebarbaud
    Participant
    Padawan WordPress
    94 contributions

    Merci pour l’astuce mais ça n’arrange pas les choses. La photo de poulet est toujours décalée et les cochons ne sont toujours pas alignés avec le texte, c’est encore plus décalé qu’avec le tableau. Avec ou sans le
    .

    http://acheterpascher.net/meilleurs-rapports-qualite-prix/gastronomie-nourriture-boisson/specialites-produits-culinaires/

    #1043699
    PhiLyon
    Modérateur
    Maître WordPress
    28260 contributions

    Bonjour.

    Pourquoi ne pas utiliser ce plugin https://wordpress.org/plugins/universal-star-rating/

    Il y a même tes petits cochons.

    🙂

    #1043700
    baptistebarbaud
    Participant
    Padawan WordPress
    94 contributions

    Bonjour,

    Merci pour le tuyau, je suis entrain d’essayer le plugin et il correspond bien à ce que je recherche, thanks 👏
    Par contre j’ai toujours le même problème avec l’insertion de ma photo qui est censé s’afficher à droite de la notation et non en haut à droite.
    Voir premier tableau de cette page : http://acheterpascher.net/meilleurs-rapports-qualite-prix/gastronomie-nourriture-boisson/specialites-produits-culinaires/

    #1043701
    PhiLyon
    Modérateur
    Maître WordPress
    28260 contributions

    Le shortcode du plugin tu l’as simplement inséré dans ta page/article, pas dans un tableau ?

    🙂

    #1043702
    baptistebarbaud
    Participant
    Padawan WordPress
    94 contributions

    Au début je l’ai mis direct dans la page, mais comme j’ai besoin de faire apparaître une image à la droite des notations, j’ai mis les notations dans une colonne widht45% à gauche, une colonne width10% vide au milieu et une colonne width45% à droite pour l’image.

    #1043703
    PhiLyon
    Modérateur
    Maître WordPress
    28260 contributions

    Essaies de rajouter un vertical-align: middle dans ton tableau

    td, th {
    padding: 0;
    border: none;
    text-align: left;
    vertical-align: middle;
    }

    🙂

    #1043704
    baptistebarbaud
    Participant
    Padawan WordPress
    94 contributions

    Merci pour ces conseils, j’ai ajouté ces lignes de code dans le style de mon tableau mais le problème persiste. Ai-je mis le code au bon endroit ?
    Ci dessous le code de mon tableau afin d’analyser le problème plus facilement. Thanks :D

    <table style="height: 98px;vertical-align: middle;text-align: left;border: none;padding: 0" width="100%">
    <tbody>
    <tr>
    <td width="45%">[usrlist Tarifs:4 « Délai de livraison:4 » « Relation clients:4 » « Qualité produits:4″ avg= »true » img= »07.png » size=25 tooltip= »false »]</td>
    <td width="10%"></td>
    <td width="45%"><img class="alignnone size-full wp-image-1096" src="http://acheterpascher.net/wp-content/uploads/2016/02/Ducs.png" alt="Ducs" width="300" height="300" /></td>
    </tr>
    </tbody>
    </table>

    #1043705
    PhiLyon
    Modérateur
    Maître WordPress
    28260 contributions

    Le code que je t’ai donné est celui récupéré avec l’inspecteur de mon navigateur sur ton site.

    Ce doit être le code qu’il y a dans ton style.css

    Et pour tout te dire, les tableaux  » à la main  » je ne connais pas trop, je me sers du plugin TablePress ?

    🙂

    #1043706
    jeanclaude57
    Participant
    Padawan WordPress
    91 contributions

    Bonjour

    c’est ça qui cause ton problème

    vertical-align: baseline;

    c’est juste après ça dans ton fichier css

    =======================================================
    =============== END – Table of Contents ===============
    ======================================================= */
    /* Reset CSS */
    /* http://meyerweb.com/eric/tools/css/reset/
    v2.0 | 20110126
    License: none (public domain)

    #1043707
    Flobogo
    Modérateur
    Maître WordPress
    20124 contributions

    Bonjour,

    Oui, il y a aussi un problème de vertical-align, comme l’avait fait remarquer PhiLyon.
    Mais je crois que cette propriété ne s’applique qu’aux images. (balises img)

    Donc, je modifierais ainsi le code de PhiLyon :

    td img, th img {
    vertical-align: middle;
    }

    #1043708
    baptistebarbaud
    Participant
    Padawan WordPress
    94 contributions

    Bonjour,

    Merci pour vos retours. J’ai ajouté le code dans mon éditeur de css et c’est déjà beaucoup mieux 👏
    Voilà le résultat : http://acheterpascher.net/meilleurs-rapports-qualite-prix/gastronomie-nourriture-boisson/specialites-produits-culinaires/

    Mais comme vous pouvez le voir, l’image est encore un peu trop haute. Quel code pourrais-je utiliser afin de descendre les cochons ou monter la photo afin qu’ils soient parallèles ?

    Voici le code mon tableau actuel

    <table>
    <tbody>
    <tr>
    <td width="45%">[usrlist Tarifs:4 « Délai de livraison:4 » « Relation clients:4 » « Qualité produits:4″ avg= »true » img= »07.png » size=25 tooltip= »false »]</td>
    <td width="15%"></td>
    <td width="40%"> <img class="alignnone size-medium wp-image-1217" src="http://acheterpascher.net/wp-content/uploads/2016/02/Ducs1-300x227.png" alt="Ducs1" width="300" height="227" /></td>
    </tr>
    </tbody>
    </table>

    🙂

15 sujets de 1 à 15 (sur un total de 22)
  • Vous devez être connecté pour répondre à ce sujet.