IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Dompdf v2.0.0 : clear both ne marche pas


Sujet :

CSS

  1. #1
    Membre régulier
    Profil pro
    Inscrit en
    janvier 2010
    Messages
    123
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : janvier 2010
    Messages : 123
    Points : 104
    Points
    104
    Par défaut Dompdf v2.0.0 : clear both ne marche pas
    Bonjour à tous,

    J'ai une page avec un header et un footer avec 2 parties en float left et right :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    <html>
        <head>
            <style>
                body {
                    font-family: Verdana, Arial, sans-serif;
                    height: 100%;
                }
                #content {
                                    position: fixed;
                    /* clear: both; */
                    margin: 30px;
                    margin-top: 80px;
                                    margin-bottom: 200px;
                    background-color: red;
                }
                hr {
                    margin-left: 30px;
                    margin-right: 30px;            
                }
                @page {
                    margin: 80px 1px;
                }
                #header {
                    position: fixed;
                    left: 0px;
                    right: 0px;
                    top: 0px;
                    height: 40px;
                    background-color: orange;
                    text-align: center;
                    margin-top: 30px;
                }
                #footer {
                    position: fixed;
                    left: 0px;
                    right: 0px;
                    bottom: 0px;
                    height: 80px;
                                    background-color: yellow;
                }
                #footer-gauche {
                    float: left;
                    text-align: left;
                    margin-left: 50px;
                    background-color: lightblue;
                }
                #footer-droite {
                    float: right;
                    text-align: right;
                    margin-right: 50px;
                    background-color: green;
                }
                #footer-droite #page:after {
                    content: counter(page, decimal);
                }
            </style>
        </head>
        <body>
            <div id="header">
                Entête
                <hr>
            </div>
            <div id="footer">
                <hr>
                <div id="footer-gauche">Pied gauche</div>
                <div id="footer-droite"><div id="page">Page </div></div>
            </div>
            <div id="content">
                Bla bla bla<br>
    			Bla bla bla<br>
    			Bla bla bla<br>
    			Bla bla bla<br>
    			Bla bla bla<br>
    			Bla bla bla<br>
    			Bla bla bla<br>
    			Bla bla bla<br>
            </div>
        </body>
    </html>

    J'affiche ce code dans mon navigateur : tout est OK, je n'ai pas besoin du "clear both" dans content.

    Nom : Capture1.JPG
Affichages : 73
Taille : 27,0 Ko

    J'ajoute "clear both" et j'affiche ce code par Dompdf, et dans mon pdf généré, mon content en rouge prend à gauche la marge de mon pied gauche.

    Nom : Capture2.JPG
Affichages : 69
Taille : 33,8 Ko

    J'ai l'impression que seul le float right est annulé, et pas le float left.
    J'utilise la version 2.0.0 de Dompdf.
    Avec mes recherches, j'ai vu ce problème il y a des années avec la version 0.7, problème qui semble avoir été résolu depuis.

    Vous voyez ce qui cloche dans mon code ?
    Vous avez des idées ?

    Merci d'avance pour votre aide !

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    16 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 093
    Points : 40 883
    Points
    40 883
    Par défaut
    Bonjour,
    J'ajoute "clear both" et j'affiche ce code par Dompdf, et dans mon pdf généré, mon content en rouge prend à gauche la marge de mon pied gauche.
    quel est le but rechercher ?

  3. #3
    Membre régulier
    Profil pro
    Inscrit en
    janvier 2010
    Messages
    123
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : janvier 2010
    Messages : 123
    Points : 104
    Points
    104
    Par défaut
    Bonjour,

    En effet, ma demande n'est peut être pas assez claire, désolé !

    Je veux mon pdf sans la marge de gauche pour le content.
    Donc que les 2 float (right et left) du pied soient annulés.

    J'essaie mon code dans une page html, dans un navigateur : c'est ok.
    j'essaie le même code dans dompdf, dans mon pdf généré : le content prend comme marge de gauche la largeur de mon pied en float left.

    Je veux dans mon pdf avoir le même aspect que dans mon html.
    En recherchant, j'ai découvert le code css : Mais même avec ce code en plus pour mon pdf, je n'ai pas le résultat comme le html.

    Peut être qu'il y a d'autres moyens de faire, si vous avez des idées, je suis preneur !
    Merci pour votre aide !

  4. #4
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 034
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 034
    Points : 13 903
    Points
    13 903
    Par défaut
    le code html est fait pour être lu par un moteur de rendu html et même dans ce cas, il y a des différences de résultat suivant les navigateurs.

    donc si vous avez besoin d'avoir un fichier pdf précis, je vous conseille de ne pas passer par de l'html mais de générer directement le pdf. si vous utilisez php, cela peux se faire avec la bibliothèque suivante par exemple :
    http://fpdf.org/

  5. #5
    Membre régulier
    Profil pro
    Inscrit en
    janvier 2010
    Messages
    123
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : janvier 2010
    Messages : 123
    Points : 104
    Points
    104
    Par défaut
    En effet, le rendu peut être différent selon les navigateurs, donc d'autant plus par les convertisseurs vers pdf

    Merci pour l'idée de fpdf, je ne m'étais jamais penché dessus.

    Mon site est en Symfony 5, et je viens de faire un tour sur Packagist, il y a plusieurs bundles, et mêmes des html2pdf, pour créer des pdf. Là dans l'immédiat, je ne sais pas lequel choisir, je vais regarder les docs en fonction de mes besoins, et créerai un nouveau sujet dans le forum Symfony si besoin...

    Merci encore à vous !

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    16 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 093
    Points : 40 883
    Points
    40 883
    Par défaut
    Donc que les 2 float (right et left) du pied soient annulés.
    pour annuler :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    selecteur {
      float: none;
    }

  7. #7
    Membre régulier
    Profil pro
    Inscrit en
    janvier 2010
    Messages
    123
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : janvier 2010
    Messages : 123
    Points : 104
    Points
    104
    Par défaut
    Yes, c'est mieux, merci beaucoup !

    ça m'a permis de me rendre compte que c'était mon page:after qui provoquait aussi des décalages.

    Voilà où j'en suis :
    J'ai mis un float: none dans content et dans #page:after.
    Et j'ai supprimé le float: left dans #footer-gauche.

    Voilà ce que ça donne :

    Nom : Capture3.JPG
Affichages : 22
Taille : 39,7 Ko

    Le pied est donc sur 2 lignes, mais je ne trouve pas mieux, je peux m'en contenter...

    Pour ceux que ça intéresse, voici mon code :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    <html>
        <head>
            <style>
                body {
                    font-family: Verdana, Arial, sans-serif;
                    height: 100%;
                }
                #content {
                    float: none;
                    margin: 30px;
                    margin-top: 80px;
                                    margin-bottom: 200px;
                    background-color: red;
                }
                hr {
                    margin-left: 30px;
                    margin-right: 30px;            
                }
                @page {
                    margin: 80px 1px;
                }
                #header {
                    position: fixed;
                    left: 0px;
                    right: 0px;
                    top: 0px;
                    height: 40px;
                    background-color: orange;
                    text-align: center;
                    margin-top: 30px;
                }
                #footer {
                    position: fixed;
                    left: 0px;
                    right: 0px;
                    bottom: 0px;
                    height: 80px;
                                    background-color: yellow;
                }
                #footer-gauche {
                    /* float: left; */
                    text-align: left;
                    margin-left: 50px;
                    background-color: lightblue;
                }
                #footer-droite {
                    float: right;
                    text-align: right;
                    margin-right: 50px;
                    background-color: green;
                }
                #footer-droite #page:after {
                    content: counter(page, decimal);
                    float: none;
                }
            </style>
        </head>
        <body>
            <div id="header">
                Entête
                <hr>
            </div>
            <div id="footer">
                <hr>
                <div id="footer-gauche">Pied gauche</div>
                <div id="footer-droite"><div id="page">Page </div></div>
            </div>
            <div id="content">
                Bla bla bla<br>
    			Bla bla bla<br>
    			Bla bla bla<br>
    			Bla bla bla<br>
    			Bla bla bla<br>
    			Bla bla bla<br>
    			Bla bla bla<br>
    			Bla bla bla<br>
            </div>
        </body>
    </html>

Discussions similaires

  1. float et clear: both ne fonctionne pas ensemble
    Par R.L. dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 15/06/2013, 09h52
  2. clear:both semble ne pas fonctionner
    Par Bayard dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 31/10/2007, 12h14
  3. Un clear:both qui marche pas ?!
    Par bblampain dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 16/08/2007, 09h20
  4. [IE] clear:both ignoré
    Par Bisûnûrs dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 21/03/2007, 08h53
  5. Probleme de clear:both
    Par intrud3r dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 11/12/2005, 10h42

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo