5568 sujets

Sémantique web et HTML

<table> problèmes pour les hauteurs de lignes

bonjour à tous.

Je crée un template de newsletter pour mailchimps.
Après avoir fait quelques tentatives en codage "classique" grâce à des <div> j'ai abandonné, vu les différences d'interprétations des différents clients mail et webmail.

Je repars donc sur un codage de style "tableaux", ce qui est utilisé dans les templates de base de mailchimp et qui semble mieux interprété.

mai je ne m'en sors pas avec les alignements de cellules, que je n'ai jamais utilisé.
j'ai 2 colonnes :
celle de gauche contient une image en "portrait" avec largeur fixe et hauteur variable.
celle de droite contient 2 lignes de texte
la première ligne à une hauteur fixe
la 2ème doit s'ajuster en hauteur par rapport à la hauteur de l'image de la colonne 1.

c'est la que ça pose souci
en l'etat actuel, la 2ème ligne est bien alignée en bas, à la même hauteur que l'image de gauche mais elle ne prend pas toute la hauteur pour aller se coller sous la 1ère ligne.

Je ne sais pas si je m'exprime clairement ...
merci de votre aide Smiley smile 


        <table border="0" cellpadding="0" cellspacing="0" width="100%" class="contentBlock">
                <tr height=30>
                      <td rowspan=2 valign="top" style="padding:0px;" class="contentBlockImage">
                               <img src="XXX" mc:label="image" style="max-width:200px;" />
                      </td>
                      <td valign="top" width="100%" style="padding-left:10px;padding-bottom:20px;">
                               <div class="bodyContent blanc">
                                           texte de la 1ère ligne
                               </div>
                       </td>
                
                 </tr>
                 <tr valign="top" height=100%>
                        <td valign="top" width=100% height=100% style="padding-left:10px;">
                                 <div class="bodyContent blanc" style="height:100%">
                                        texte de la 2ème ligne
                                 </div>
                         </td>
                  </tr>
       </table>
Le comportement de colspan et rowspan ça peut donner des trucs bizarres. Les navigateurs modernes s'en sortent bien, et je ne sais pas si dans les clients mail ça passe ou au contraire ça à tendance à patiner. Je dirais que par précaution il vaut mieux limiter l'usage des cellules qui prennent plusieurs lignes ou colonnes. Ceci dit, j'ai très peu bossé avec les tableaux de mise en page ou pour des emails, donc je dis peut-être (sans doute?) des bêtises.

Pourquoi ne pas faire seulement deux cellules: une pour l'image, et l'autre pour les deux lignes de texte?
mais c'est bien sur !
j'ai donc un tableau à 1 seule ligne et 2 colonnes maintenant.

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="contentBlock">
        <tr>
                  <td valign="top" style="padding:0px;" height="100%" class="contentBlockImage">
                           <img src="XXX.jpg" mc:label="image" style="max-width:200px;" />
                   </td>
                   <td valign="top" height="100%" width="100%" style="padding-left:10px;">
                            <div class="bodyContent blanc">
                                    texte ligne 1
                            </div>
                             <div class="bodyContent blanc" style="height:100%; margin-top:10px;">
                                   texte ligne 2
                            </div>
                    </td>   
          </tr>
</table>


Mais je ne parviens à ce que la 2ème div prenne la hauteur "restante", donnée par la hauteur de l'image uploadée en 1ère colonne.
Si j'applique un height=100% sur le <tr>, alors la 2ème div s’étire jusqu'en bas de la page et sort du tableau.
Tes height:100% ne donneront rien car dans ta tête c'est «100% de la hauteur qui reste dans tel bloc en soustrayant tel autre bloc, enfin bref faut que ça fasse joli quoi», tandis que pour le navigateur c'est «100% de la hauteur du parent si celui-ci a une hauteur fixe déterminée». Vos deux définitions ne collent pas. Smiley cligne

Je ne sais pas trop ce que donne le design mais je ne vois pas trop l'intérêt ou la nécessité de faire que ce deuxième DIV prenne toute la hauteur restante (ce qui ne sera pas possible à ma connaissance avec des techniques compatibles newsletters...).
oui j'ai bien compris.
100% de la hauteur du parent, si elle est fixe, mais le problème est qu'elle n'est pas fixe, elle est fonction de la hauteur de l'image uploadée à coté

pourquoi faire ça ? parce que les 2 divs de droite ont un background-color et une bordure et mon client souhaite que la bordure du bas soit alignée avec le bas de l'image d'à côté pour une question simplement esthétique.

arg, donc à priori pas possible ?
je viens de tester en imposant une hauteur fixe à ma cellule et j'ai un comportement que je ne comprend pas.


<tr style="height:575px;">
               <td valign="top" style="padding:0px;height:575px;" class="contentBlockImage">
                             <img src="XXX.jpg" mc:label="image" style="height:575px;max-width:200px;" />
                </td>
                <td valign="top" width="100%" style="padding-left:5px;height:575px;">

                              <div class="bodyContent blanc">
                                        div 1
                               </div>
                               <div class="bodyContent blanc" style="height:100%; margin-top:10px;padding:5px;">
                                        div 2
                               </div>
               </td>              
</tr>


ma <td> de droite est fixée à height:575px.
la 1ère div n'a pas de hauteur fixe, elle s'adapte par rapport à son contenu.
la 2ème div a une height de 100%, j'aimerai qu'elle prenne la hauteur restante dans son contenant, mais elle prend une hauteur de 575px, égale à sa <td> parente.
elle sort donc du tableau et dépasse d'une hauteur égale à celle de la div1. Smiley ohwell

Je suis obligé de fixer la hauteur de la div1 pour que la div2 prenne la place restante ?
euh, dans ce cas je lui met une taille fixe, le 100% ne sert plus à rien si tout est fixe autour.
ChDUP a écrit :
les 2 divs de droite ont un background-color et une bordure

Pourquoi ne pas appliquer ce background-color et cette bordure sur l'élément TD qui contient les deux DIV?

ChDUP a écrit :
le 100% ne sert plus à rien si tout est fixe autour

Il ne servait déjà à rien vu qu'il était tout simplement ignoré. Avec tes modifications il n'est plus ignoré mais il ne correspond pas à ce que tu veux.
Modérateur
a écrit :
la 2ème div a une height de 100%, j'aimerai qu'elle prenne la hauteur restante dans son contenant, mais elle prend une hauteur de 575px, égale à sa <td> parente.

Ce comportement est normal. une taille en pourcent se réfère à l'élément parent. Il faut donc penser à construire cela différemment. Peut-être envoie une image pour montrer ce que tu souhaites...

Sinon le html et le css est soumis à une large balkanisation quant à l'interprétation dans les systèmes de mail.

Voici un bon site qui recense les compatibilités css, attention, mal de crâne à prévoir si il y a désir d'être compatible. à peu près que les propiétés font-... sont reconnues à la fois par gmail et outlook...
http://www.campaignmonitor.com/css/
Modifié par kustolovic (06 Feb 2012 - 15:43)
oui j'ai bien gouté à cette "balkanisation" durant 3 jours ! Smiley biggrin

fvsch, il y a un margin entre les 2 divs

voila sur cette page ce que j'arrive à obtenir
http://www.chdup.fr/douro/

j'ai fixé la hauteur de la première div, et la hauteur de la seconde, ainsi que celles des colonnes
mais dans l'ideal j'aurai aimé que la première div s'adapte à son contenu, en hauteur
et que la seconde prenne la place restante pour s'aligner avec la hauteur de la colonne d'à coté
colonne qui est aussi variable en hauteur, suivant l'image uploadée
Modérateur
Ce comportement est possible "visuellement". De plusieurs manières. un exemple: toute le conteneur (sur toute la hauteur) a un fond blanc et une bordure. La div titre (h1,h2?) a une image de fond, en bas qui fait la séparation. après pour la compatibilité mail il faut voir... ou mettre une image carrément "<img>" on n'est plus à ça près de faire du mauvais html dans ces cas là ^^
Sujet clos
Aller à