28172 sujets

CSS et mise en forme, CSS3

CSS Souci d'alignement pour l'impression seulement

Bonjour.
J'ai un souci d'alignement vertical pour les cellules d'une table. Je n'utilise pas le paramètre valign="top" puisqu'il est obsolète. Ma feuille de style indique un vertical-align:top pour les cellules. A l'écran, tout se passe bien quel que soit le navigateur et sa version. En revanche, ça ne se passe pas bien lors de l'impression. Le contenu des cellules est centré verticalement en fonction de la cellule dont le contenu est le plus long.
Quelqu'un aurait-il une idée ?
Un grand merci d'avance Smiley biggrin
Oui. J'ai une feuille de style impression.
Dans la section <head> du html

<link href="../mat_com/print.css" rel="stylesheet" type="text/css" media="print">


Le contenu de la f d s est le suivant :

@media print {
.noPrint {
    display:none;
  }
}


Le code HTML de la table dont le contenu des cellules ne s'aligne pas en TOP dans le cas d'une impression est le suivant :

<table class="four_col_table">
<tr>
<td class="four_col_td border_r_dots">
<div class="titre1">...</div>					
<div style="margin-left:auto; margin-right:auto; width:200px; padding-top:6px; text-align:left">...</div>
</td>

... + 3 autres colonnes
</tr>
</table>


La feuille de style globale indique ceci pour la table en question :

.four_col_table {width:auto; margin-left:auto; margin-right:auto;}
.four_col_td {width:237px; display:table-cell; vertical-align:top;}
.border_r_dots {background-image:url(../mat_com/vertical-dots.png); background-position:right; background-repeat:repeat-y}

Le "vertical-align:top" agit comme il faut à l'écran quel que soit le navigateur et sa version.
A l'impression, le contenu des cellules est centré verticalement.

Merci pour votre lecture et votre attention Smiley cligne
Pas de problème chez moi sur Firefox en regardant l'aperçu d'impression.

Le code que j'ai testé (avec css vu plus haut) :


<table class="four_col_table">
    <tr>
        <td class="four_col_td border_r_dots">
            <div class="titre1">...</div>
            <div style="margin-left:auto; margin-right:auto; width:200px; padding-top:6px; text-align:left">Lorem Elsass ipsum geïz Richard Schirmeck purus munster ch'ai Yo dû. sed commodo dolor porta Huguette Gal. Oberschaeffolsheim météor wie knack Chulia Roberstau libero, Miss Dahlias amet, so und picon bière habitant in, kougelhopf leo bissame hopla eget rucksack Coopé de Truchtersheim ornare Hans leo adipiscing ftomi! leverwurscht Verdammi Oberschaeffolsheim amet chambon turpis, sit ac semper barapli kartoffelsalad Salu bissame elementum hopla wurscht lacus geht's knepfle tellus gravida Gal ! Spätzle nullam quam, flammekueche schnaps bredele messti de Bischheim Heineken senectus amet ornare Morbi Racing. Wurschtsalad sit risus, sed blottkopf, placerat nüdle jetz gehts los id auctor, mänele eleifend consectetur dui salu ac Salut bisamme schpeck id, Pfourtz ! vulputate kuglopf baeckeoffe Strasbourg Chulien quam.</div>
        </td>
        <td class="four_col_td border_r_dots">
            <div class="titre1">...</div>
            <div style="margin-left:auto; margin-right:auto; width:200px; padding-top:6px; text-align:left">Lorem Elsass ipsum geïz Richard Schirmeck purus munster ch'ai Yo dû. sed commodo d
        </td>
        <td class="four_col_td border_r_dots">
            <div class="titre1">...</div>
            <div style="margin-left:auto; margin-right:auto; width:200px; padding-top:6px; text-align:left">Le Elsass Ipsum Chenerator vous offre un texte dont le contenu est totalement aléatoire... ou presque.</div>
        </td>
    </tr>
</table>


Note : Essaie d'enlever les styles qui sont dans ton code html.
J'ai suivi le conseil de Benj. Si j'enlève les styles de la table dans le code HTML, le résultat à l'écran devient alors le même que celui que je rencontre lors de l'impression. Le contenu des cellules est centré verticalement.
Isole le code qui pose problème et montre le nous en entier. Car, comme indiqué plus haut, je n'ai pas de problème. Il doit y avoir autre choses.
Je signale que si j'ajoute la propriété valign="top" aux TD, le problème d'alignement lors de l'impression est résolu. Mais valign est un attribut obsolète vis à vis de W3C.
kustolovic a écrit :
Bonjour,

valign =&gt; css: vertical-align: text-top;


Merci pour la suggestion. Mais je l'avais déjà testée, et elle n'a pas donné le résultat escompté.
Je précise cependant ceci.
Si j'ajoute l'instruction TD.[Classe] {vertical-align:top} au fichier CSS pour l'impression, très étonnamment, ça fonctionne !

@charset "utf-8";

td.four_col_td {vertical-align:top;}

@media print {
.noPrint {
    display:none;
  }
}

J'avoue que c'est une situation qui me dérange. Je voudrais conserver la seule véritable instruction du CSS pour l'impression, qui consiste à exclure certaines sections DIV.
Sujet clos
Aller à