I am converting an HTML to pdf file using dompdf. It is working fine. But the problem is that I need to have page margin for all the pages except the first page. The first page should have an image covering the whole page. But now the margin is coming for all pages including the first one.
I am not able to disable margin for the first page. Any help is greatly appreciated. Thanks in advance.
Below is my css
<style type="text/css">
body { margin: 0px; }
#page { margin: 50px; }
#header {
position: fixed;
left: 0px;
top: -52px;
height: 50px;
border-bottom: 2px solid #797979;
margin: 0;
}
#footer {
position: fixed;
left: 0px;
bottom: -52px;
height: 50px;
border-top: 2px solid #797979;
margin: 0;
}
#footer .page:after { content: counter(page); }
.firstpage {
position: absolute;
page-break-after: always;
top: -50px;
width: 100%;
margin: 0;
}
.otherpages{ margin: 0; }
</style>
And here's my html
<div class="firstpage">
<img src="pdf-bg.jpg" style="width:100%; height:auto;/>
</div>
<div id="header">
<p><?php echo date("F j, Y"); ?></p>
</div>
<div id="footer">
<p class="page">Page <?php $PAGE_NUM ?></p>
</div>
<div class="otherpages">
some content
</div>
Try this,
#page { margin: 50px 0; }
.firstpage {
position: absolute;
page-break-after: always;
top: -50px; // compensating for #page top margin
width: 100%;
margin: 0;
}
.otherpages{ margin: 0 50px; }
Related
This is how I create the footer with DOMPdf:
$canvas = $dompdf->get_canvas();
$footer = $canvas->open_object();
$w = $canvas->get_width();
$h = $canvas->get_height();
$canvas->page_text($w-85,$h-28,"footer right",'helvetica',8);
$canvas->page_text($w-320,$h-28,"Page {PAGE_NUM} of {PAGE_COUNT}",'helvetica',8);
$canvas->page_text($w-550,$h-28,"footer left", 'helvetica',8);
This creates 3 sections in my footer, which works fine for me.
But I need the possibility in each line to integrate html text. I tried it like this:
$canvas->page_text($w-85,$h-28,"<b>My Company</b><br>My street<br>My city",'helvetica',8);
$canvas->page_text($w-320,$h-28,"Page {PAGE_NUM} of {PAGE_COUNT}",'helvetica',8);
$canvas->page_text($w-550,$h-28,"footer left", 'helvetica',8);
But the html code is not converted in the pdf.
I also tried:
$text = $dompdf->loadHtml("<b>My Company</b><br>My street<br>My city");
$canvas->page_text($w-85,$h-28,$test,'helvetica',8);
Like this nothing is loaded
You can't add html code in DomPdf
But you can work around using css
footer {
position: fixed;
bottom: 0;
left: 0px;
right: 0px;
height: 20px;
border-top: 1px solid #AAAAAA;
color: #777777;
width: 100%;
padding: 8px 0;
text-align: center;
}
And in html body place your content in <footer> </footer>
Working example:
<html>
<head>
<style>
#page { margin: 180px 50px; }
#header { position: fixed; left: 0px; top: -180px; right: 0px; height: 150px; background-color: orange; text-align: center; }
#footer { position: fixed; left: 0px; bottom: -180px; right: 0px; height: 150px; background-color: lightblue; }
#footer .page:after { content: counter(page, upper-roman); }
</style>
<body>
<div id="header">
<h1>Widgets Express</h1>
</div>
<div id="footer">
<p class="page">Page </p>
</div>
<div id="content">
<p>the first page</p>
<p style="page-break-before: always;">the second page</p>
</div>
</body>
</html>
The footer is overlapping one of my webpage. all the others pages are fine but this one its overlapping, i dont really want to edit/update the footer as it is working in other pages, but I would like to see if there is something I can do with the css container for this page.
CSS
#box {
width: 100%;
height: auto;
margin-top: 20px;
position:relative;
padding-right:0.4%;
float:left;
margin-bottom: 10px;
}
.boxChildLeft {
left: 0;
width: 80%;
height: 100px;
border: 1px solid;
margin-bottom: 2px;
position: relative;
float: left;
}
CSS footer/body etc
html,
body {
margin:0 auto;
padding: 0;
max-width: 960px;
height: 100%;
background-color: white;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:white;
padding:10px;
}
#body {
padding:10px;
padding-bottom:40px; /* Height of the footer */
}
#footer {
position: absolute;
bottom:0;
left: 0;
right: 0;
height:40px; /* Height of the footer */
background:#EBEBEB;
border-radius: 5px;
}
PHP/HTML
for($temp = 1; $temp <= $cArray[2]; $temp++)
{
$img .= "<div class='boxChildLeft'>
<div class='img'>
<img src='../ProductImages/$cArray[0].jpg' width='100px' height='100px'>
</div>
<div class='prodInfo'>
<p1>$pName</p1><br>
<span id='sp'><p1>$pPrice<p1>
</span>
</div>
</div>";
}
HTML
<div id="box">
<?php echo $img;?>
</div>
The information you provided is not enough, what I suggest is to use W3school HTML validator it will indicate what's missing from your HTML implementation, it will help you by giving suggestions.
I have been using PHP and ImageMagick for to generate a 3D preview of a canvas print (see image below).
There are options to change the edge type, depth, size etc which are AJAX calls to a PHP support file which re-renders the preview with new settings and I reload it into the DOM.
This is starting to overload our server when busy. So I thought I could do this in CSS3 and do all the preview rendering client-side instead.
Here's what I have so far:
<div class="wrapper">
<div class="inner">
<div>
<img src="http://lorempixel.com/200/200/nature" alt="Nature">
</div>
</div>
</div>
.wrapper {
perspective: 500px;
margin: 4em auto;
width: 37em;
}
.inner {
transform: rotateY(40deg);
}
.inner div {
width: 11em;
display: inline-block;
margin-right: 1em;
}
.inner img {
display: block;
height: auto;
max-width: 100%;
margin: 0 auto;
}
The problem I am having is wrapping the image around the edges like in the image above. How can I do this?
I have done a demo, with 2 elements holding the same image.
Just set the image origin on them accordingly to the dimension, and it will match.
.main {
width: 400px;
height: 300px;
border: solid 1px red;
background-image: url(http://lorempixel.com/400/300);
background-size: 0px 0px;
perspective: 500px;
position: relative;
}
.front {
position: absolute;
width: 360px;
height: 100%;
left: 40px;
top: 0px;
transform: rotateY(45deg);
transform-origin: left center;
background-image: inherit;
background-position: -40px 0px;
}
.side {
position: absolute;
width: 40px;
height: 100%;
left: 0px;
top: 0px;
transform: rotateY(-45deg);
transform-origin: right center;
background-image: inherit;
background-position: 0px 0px;
}
<div class="main">
<div class="side"></div>
<div class="front"></div>
</div>
I'm building a website with a CSS popup inside a loop that increments by 1, but the variable $i does not carry on the popup.
CSS
#cover {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 5;
width: 100%;
height: 100%;
display: none;
}
#score {
height: 380px;
min-width: 280px;
max-width: 380px;
margin: 0 auto;
position: relative;
z-index: 10;
display: none;
background: url(login.png) no-repeat;
border: 5px solid #cccccc;
border-radius: 10px;
}
#score:target,
#score:target + #cover {
display: block;
opacity: 2;
}
.cancel {
display: block;
position: absolute;
top: 3px;
right: 2px;
background: rgb(245, 245, 245);
color: black;
height: 30px;
width: 35px;
font-size: 30px;
text-decoration: none;
text-align: center;
font-weight: bold;
}
.popup {
position: fixed;
left: 50%;
top: 20%;
}
.popup .wrapper {
position: relative;
left: -50%;
}
PHP
<?php $loopvalue = 3; $i=1; while ($i <= $loopvalue) {?>
<li>open popup <?php echo $i;?></li>
<div class="popup">
<div class="wrapper">
<div id="score" style="background-color:#FFF;">
popup # <?php echo $i;?>
×
</div>
<div id="cover" >
</div>
</div>
</div>
The popup number $i never changes. It freezes on 1. I'm not sure what's the problem. I don't see any, but I can't make the popup number change.
In your codes you have repeated the score div with same id. it need to have different ids for different divs
(This will only create proper html. for popup effect it needs to use some java script/JQuery codes)
Try this
<?php $loopvalue = 3; $i=1; while ($i <= $loopvalue) {?>
<li>open popup <?php echo $i;?></li>
<div class="popup">
<div class="wrapper">
<div id="score<?php echo $i;?>" style="background-color:#FFF;">
popup # <?php echo $i;?>
×
</div>
<div id="cover" > </div>
</div>
</div>
<?php $i++;}?>
I'm currently working on making my header and my footer fixed while my page content scrolls through. My body has overflow: hidden; currently. When I remove it I can scroll through the page, however, my header is no longer fixed at the top and my footer still covers the last bit of my page content. I'm pulling the content through php. How can I keep my header and footer fixed on the page, but still allow my PHP dynamic content appear completely?
My code:
CSS:
body {
margin: 0;
padding: 30px 0 40px 0;
overflow: hidden;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
background: red;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background: white;
}
#page {
overflow: auto;
height: 100%;
}
HTML:
<head id="header">
<?php
include('incl/menuinc.php');
?>
</head>
<body>
<div id="page">
<?php
if (isset($_GET['page'])) {
switch ($_GET['page']) {
case 'example_page':
include('incl/pages/example.php');
break;
default:
include('home.php');
}
}
?>
</div>
<div id="footer">
<?php
include('footer.php')
?>
</div>
</body>
http://jsfiddle.net/q8j208eo/2/
*{ /*basic reset*/
margin: 0;
padding: 0;
}
html, body{
position: relative;
height: 100%;
min-height: 100%;
}
#header{
background-color: #ccc;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
}
#footer{
background-color: #ddd;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
}
#page{
box-sizing: border-box;
min-height: 100%;
padding-top: 40px;
padding-bottom: 60px;
background-color: yellow;
}