Publicité
+ Répondre à la discussion
Affichage des résultats 1 à 13 sur 13
  1. #1
    Membre habitué Avatar de lolymeupy
    Profil pro
    Inscrit en
    octobre 2006
    Messages
    340
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations forums :
    Inscription : octobre 2006
    Messages : 340
    Points : 104
    Points
    104

    Par défaut Centrer verticalement Image+texte dans un <td>

    Bonjour,
    dans un BO, je dois afficher un tableau avec pas mal de données, et notamment une colonne dans laquelle j'insère un <img src...> suivi d'un texte ( il est d'ailleurs possible qu'il y ait plusieurs [ <img src...>+texte ] par cellule, et dans ce cas là j'insère un <br /> pour les mettre sur des lignes différentes dans ce <td<)

    Et donc, mon problème est de pouvoir centrer verticalement dans la cellule les images et le texte.
    Les images sont centrées verticalement, mais les textes se retrouvent à droite des images (ça c'est ok) mais au niveau du bas de l'image. Et j'aimerai que les textes soient au niveau du milieu de l'image (cad au milieu de la cellule)...

    J'ai essayé avec valign="middle"...mais sans succès.

    Merci de votre aide

  2. #2
    Modérateur
    Avatar de Bisûnûrs
    Profil pro Josselin
    Développeur Web
    Inscrit en
    janvier 2004
    Messages
    9 404
    Détails du profil
    Informations personnelles :
    Nom : Josselin
    Âge : 30
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : janvier 2004
    Messages : 9 404
    Points : 14 906
    Points
    14 906

    Par défaut

    J'ai pas compris.

  3. #3
    Membre habitué Avatar de lolymeupy
    Profil pro
    Inscrit en
    octobre 2006
    Messages
    340
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations forums :
    Inscription : octobre 2006
    Messages : 340
    Points : 104
    Points
    104

    Par défaut

    Yep, je comprends
    Je vais essayer d'être plus clair (ce qui ne sera pas difficile) :
    en gros, j'ai un tableau avec des cellules comme celle-ci :
    Code :
    1
    2
    3
    4
    5
     
    <td>
    <img src="../img/tmp/img_produit1.jpg">Nom produit1<br>
    <img src="../img/tmp/img_produit2.jpg">Nom produit2
    </td>
    et il faudrait que les images et le texte à la droite de ces images soient alignés verticalement.
    Le problème c'est que les images le sont (parce que la cellule prend la taille des 2 images je pense), mais les textes se situent en bas à droite de chaque image.

  4. #4
    Modérateur
    Avatar de Bisûnûrs
    Profil pro Josselin
    Développeur Web
    Inscrit en
    janvier 2004
    Messages
    9 404
    Détails du profil
    Informations personnelles :
    Nom : Josselin
    Âge : 30
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : janvier 2004
    Messages : 9 404
    Points : 14 906
    Points
    14 906

    Par défaut

    D'accord, donc quand tu dis verticalement, en fait c'est horizontalement.

  5. #5
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro Jérôme Réaux
    Webdesigner
    Inscrit en
    août 2008
    Messages
    5 357
    Détails du profil
    Informations personnelles :
    Nom : Homme Jérôme Réaux
    Âge : 47
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 5 357
    Points : 10 398
    Points
    10 398

    Par défaut

    Bonjour,
    tu as ca :
    Code :
    1
    2
    3
    4
    5
    6
    |------|
    |image1|
    |------| texte1
    |------|
    |image2|
    |------| texte2
    et tu veux ca :
    Code :
    1
    2
    3
    4
    5
    6
    |------|
    |image1| texte1
    |------|
    |------|
    |image2| texte2
    |------|
    Ce n'est pas si simple ...

    1/ La solution la plus simple (bien que la moins recommandable) : utiliser des <table> :
    Code html :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <td>
    	<table>
    	<tr>
    		<td><img src=".../image1.jpg" alt="image1" /></td>
    		<td>texte1</td>
    	</tr><tr>
    		<td><img src=".../image2.jpg" alt="image2" /></td>
    		<td>texte2</td>
    	</tr>
    	</table>
    </td>
    2/ utiliser des div + css
    Pour ca, Bisûnûrs est l'"homme fort".
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Ce qui se conçoit bien s'énonce clairement. Et les mots pour le dire arrivent aisément."
    Nicolas Boileau-Despréaux (1636-1711).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  6. #6
    Membre habitué Avatar de lolymeupy
    Profil pro
    Inscrit en
    octobre 2006
    Messages
    340
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations forums :
    Inscription : octobre 2006
    Messages : 340
    Points : 104
    Points
    104

    Par défaut

    Merci beaucoup Jreaux, c'est exactement ça que je veux (Bisûnûrs : un schéma aurait effectivement été plus clair dsl...)
    Comme c'est au niveau du BO du site, l'utilisation de tableaux n'est pas (trop) un problème. Je vais essayer ça et je fais le retour ensuite.
    Merci encore

  7. #7
    Modérateur
    Avatar de Bisûnûrs
    Profil pro Josselin
    Développeur Web
    Inscrit en
    janvier 2004
    Messages
    9 404
    Détails du profil
    Informations personnelles :
    Nom : Josselin
    Âge : 30
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : janvier 2004
    Messages : 9 404
    Points : 14 906
    Points
    14 906

    Par défaut

    Ouais, ou alors un simple vertical-align:middle en CSS sur l'image fonctionne aussi.

  8. #8
    Membre habitué Avatar de lolymeupy
    Profil pro
    Inscrit en
    octobre 2006
    Messages
    340
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations forums :
    Inscription : octobre 2006
    Messages : 340
    Points : 104
    Points
    104

    Par défaut

    C'est nickel.
    Merci beaucoup jreaux
    (Bisûnûrs : Je vais également tester ta solution. Si ça marche, ça m'évitera d'utiliser "la moins recommandable". Merci).

  9. #9
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro Jérôme Réaux
    Webdesigner
    Inscrit en
    août 2008
    Messages
    5 357
    Détails du profil
    Informations personnelles :
    Nom : Homme Jérôme Réaux
    Âge : 47
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 5 357
    Points : 10 398
    Points
    10 398

    Par défaut

    "Chat échaudé craint l'eau froide" (je ne propose plus rien sans avoir testé avant)

    DONC : solution de Bisunurs OK (évidemment)
    Code :
    1
    2
    	<img src=".../image1.jpg" alt="image1" style="vertical-align:middle;"/> texte1<br />
    	<img src=".../image2.jpg" alt="image2" style="vertical-align:middle;"/> texte2<br />
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Ce qui se conçoit bien s'énonce clairement. Et les mots pour le dire arrivent aisément."
    Nicolas Boileau-Despréaux (1636-1711).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  10. #10
    Membre habitué Avatar de lolymeupy
    Profil pro
    Inscrit en
    octobre 2006
    Messages
    340
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations forums :
    Inscription : octobre 2006
    Messages : 340
    Points : 104
    Points
    104

    Par défaut

    Effectivement, j'ai finalement pris cette autre solution, et elle marche tout aussi bien (en + propre donc ).
    Par contre, j'ai un souci avec la colonne suivante, qui elle ne contient pas d'image, mais le nombre de produits correspondant à la colonne précédente (dans cet exemple : quantité = 1 pour le produit1 et également pour le produit 2).

    Comme il n'y pas ici de balise <img...> j'ai ajouté des <div> dans les <td> concernés :
    Code :
    1
    2
    3
    4
    5
     
    <td bgcolor="#fffff0" style="border: solid 1px #f5e9cf; border-right:solid 2px #ada490; padding: 3px; white-space: nowrap">
    <div style="vertical-align:middle">1</div><br>
    <div style="vertical-align:middle">1</div>
    </td>
    et voilà ce que j'obtiens :
    Un petit schéma
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    |------|
    |------| 
    |image1| produit1
    |------|               1
    |------|                 
    |------| 
    |------|                 
    |------|               1
    |image2| produit2
    |------|
    |------|
    En fait, les <div> ne prennent pas la hauteur totale du <td> dans lequel elles sont.
    Est-ce que possible de forcer cela ?
    (s'il y a un seul <div> : 100% de la hauteur de la cellule, si 2 <div> (comme dans cet exemple) : chaque <div> occupe 50% de la hauteur de la cellule, etc...)

    Merci encore

  11. #11
    Membre habitué Avatar de lolymeupy
    Profil pro
    Inscrit en
    octobre 2006
    Messages
    340
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations forums :
    Inscription : octobre 2006
    Messages : 340
    Points : 104
    Points
    104

    Par défaut

    Je viens de voir un exemple où l'on parle de mettre le "contenant" et le "contenu" à 100% tous les 2. j'ai donc essayé ça, mais le résultat est le même :
    Code :
    1
    2
    3
    4
    5
     
    <td bgcolor="#fffff0" style="border: solid 1px #f5e9cf; border-right:solid 2px #ada490; padding: 3px; white-space: nowrap;height:100%">
    <div height="100%">1</div><br>
    <div height="100%">1</div>
    </td>

  12. #12
    Membre habitué Avatar de lolymeupy
    Profil pro
    Inscrit en
    octobre 2006
    Messages
    340
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations forums :
    Inscription : octobre 2006
    Messages : 340
    Points : 104
    Points
    104

    Par défaut

    J'ai finalement remplacé le <div> par <p> (car j'ai vu que les DIV prennent les dimensions qui leurs sont nécessaires, sans plus).
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
     
    <td bgcolor="#fffff0" style="border: solid 1px #f5e9cf; border-right:solid 2px #ada490; padding: 3px; white-space: nowrap;height:100%">
    <p style="min-height:100%;">1</p><br>
    <p style="min-height:100%;">2</p><br>
    <p style="min-height:100%;">1</p><br>
    <p style="min-height:100%;">1</p><br>
    <p style="min-height:100%;">1</p>
    </td>
    C'est beaucoup mieux, mais ce n'est pas encore ça. Les <p> ne prennent pas toutes la hauteur, et lorsque j'ai plus de lignes (comme ici : 5) le décalage est de plus en plus important, surtout pour les 1ères et dernières lignes car les <p> sont "centrés" vers le milieu de la cellule.

  13. #13
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    6 986
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 6 986
    Points : 12 556
    Points
    12 556

    Par défaut

    Bonjour,
    Citation Envoyé par lolymeupy
    Par contre, j'ai un souci avec la colonne suivante, qui elle ne contient pas d'image, mais le nombre de produits correspondant à la colonne précédente (dans cet exemple : quantité = 1 pour le produit1 et également pour le produit 2).
    on est donc en présence de données tabulaires, 1 image -> 1 produit -> 1 quantité, dans ce cas pourquoi ne pas créer une ligne par "image"
    Code html :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <table>
      <tr>
        <th>image</th>
        <th>produit</th>
        <th>nombre</th>
      <tr>
        <td><img src=".../image1.jpg" alt="image1"></td>
        <td>produit #1</td>
        <td>nombre #1</td>
      <tr>
      <tr>
        <td><img src=".../image2.jpg" alt="image2"</td>
        <td>produit #2</td>
        <td>nombre #2</td>
      <tr>
    </table>

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •