Voilà je poste ici mon problème car je n'ai pas trouvé de solution.
Avant de faire l'exportation en PDF, j'affiche ma page HTML, tout fonctionne bien, tout est bien affiché.
Mais dès que je passe par HTML2PDF, tout saute.. plus aucune marge, taille n'est respectées.
Je fonctionne en position:absolute et j'utilise donc des top, right, left, ..
Je suis obligé de faire du bidouillage... Surtout que ma page HTML fonctionnais au départ..
Qu'ai je mal fait, interprété, ou mal configuré.
Merci d'avance
<style>
#content{width:21cm;height:29.7cm;display:block;text-transform:capitalize;color:white;position:relative}
#entete {height:8cm;width:100%}
#categorie,#nom,#accroche{color:#FFF}
#categorie {font-size:260%;font-weight:bold;left:200px;position:absolute;text-align:center;text-shadow:0 0 5px #000000;top:55px;}
#nom {font-size:220%;font-weight:bold;left:440px;position:absolute;text-align:center;text-shadow:0 0 5px #000000;top:80px;}
#accroche {display:block;font-size:220%;font-weight:bold;height:50px;left:390px;position:absolute;text-align:center;text-shadow:0 0 5px #000000;top:145px;width:290px;}
#tech1{color:#0e2b55;font-size:170%;position:absolute;text-align:center;top:230px;left:140px;}
#tech2{color:#0e2b55;font-size:170%;position:absolute;text-align:center;top:230px;right:140px;}
#promo {color:red;font-size:300%;font-weight:bold;position:absolute;text-align:center;text-shadow:0 0 5px #000000;top:260px;width:100%;}
#middle {margin:10px;color:#000;position:absolute;top:300px;width:97%}
#articles{border:1px solid #000;border-radius:5px;box-shadow:0 0 5px #000;padding:5px 0}
#articles .active{border-radius:10px 0 0 10px;box-shadow:0 0 3px #000;padding:5px}
.article{margin-left:20%;position:relative;margin-bottom:20px}
.article div{display:inline-block}
#dim{color:#102849;font-size:250%;width:33%}
#prixbarre{text-decoration:line-through;-moz-text-decoration-color:red;width:33%;text-align:right}
#prix{text-shadow:0 0 2px #000;color:#700700;font-size:250%;font-weight:bold;position:absolute;right:15px;text-align:right;width:33%}
#eco{display:block !important;margin-right:5%;text-align:right}
#textecopart,#autretexte{text-align:center}
#footer{position:absolute;bottom:0;width:98%;padding:1%;color:#0e2b55}
#marque,#fabrication{display:inline-block}
#garantiemat,#garantiesom,#garantiemot,#fabrication,#belleliterie{width:124px;height:124px;float:left;box-shadow:0 0 5px #000;text-align:center;vertical-align:middle;margin-right:20px}
#fabrication, #fabrication img,#garantiemat,#garantiesom,#garantiemot,#belleliterie{border-radius:10px}
.garantie{display:block;font-size:150%}
.nbgarantie{font-size:350%}
#belleliterie > img {margin-top:12px}
#marque{float:right}
</style>
<page backtop="0mm" backbottom="0mm" backleft="0mm" backright="0mm">
<div id="content">
<div id="entete">
<img src="img/logo-boutique.png" width="100%" />
<div id="categorie">
###categorie###
</div>
<div id="nom">
###nom###
</div>
<div id="accroche">
###accroche###
</div>
<div id="tech1">
###tech1###
</div>
<div id="tech2">
###tech2###
</div>
<div id="promo">
###promo###
</div>
</div>
<div id="middle" style="margin:10px;color:#000">
<div id="articles" style="border-radius:5px;box-shadow:0 0 5px #000;padding:5px 0">
###article###
</div>
<div id="textecopart">
###textecopart###
</div>
<div id="autretexte">
###autretexte###
</div>
</div>
<div id="footer">
<div id="footercontent">
<div id="garantiemat">
Matelas seul <br>garantie <span class="garantie"><span class="nbgarantie">###garantiemat###</span> ans</span>
</div>
<div id="garantiesom">
Sommier seul <br>garantie <span class="garantie"><span class="nbgarantie">###garantiesom###</span> ans</span>
</div>
<div id="garantiemot">
Moteur seul <br>garantie <span class="garantie"><span class="nbgarantie">###garantiemot###</span> ans</span>
</div>
<div id="fabrication">
<img src="img/###fabrication###.jpg" alt="###fabrication###" />
</div>
<div id="belleliterie">
<img src="img/###belleliterie###.jpg" alt="###belleliterie###" width="124" />
</div>
<div id="marque">
<img src="img/###marque###.jpg" alt="###marque###" />
</div>
</div>
</div>
</div>
</page>