I try to create a A4 page with 4 parts.
There is a white separator between the 2 first squares and the it breaks the page at square 3.
And quite strange the image does not appear in square 3!
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Header and Footer example</title>
<style type="text/css">
#page {
margin: 0;
}
.pages {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.dis-inl-blc {
display:inline-block;
vertical-align:top;
}
.page-break {
page-break-after: always;
}
.center {
text-align:center;
}
.bg-red {
background:red;
}
.bg-green {
background:green;
}
</style>
</head>
<body>
<div class="pages page-break">
<div class="dis-inl-blc center bg-red" style="margin-left:-0.03in;width:50%;height:50%;padding-top:5%;">
<img src="'.$image2Base64.'" style="height:2.5in"><br>Square 1
</div>
<div class="dis-inl-blc center bg-green" style="margin-right:-0.03in;width:50%;height:50%;padding-top:5%;">
<img src="'.$image2Base64.'" style="height:2.5in"><br>Square 2
</div>
<div class="dis-inl-blc center bg-green" style="margin-left:-0.03in;width:50%;height:50%;padding-top:5%;">
<img src="'.$image2Base64.'" style="height:2.5in"><br>Square 3
</div>
<div class="dis-inl-blc center bg-red" style="margin-right:-0.03in;width:50%;height:50%;padding-top:5%;">
<img src="'.$image2Base64.'" style="height:2.5in"><br>Square 4
</div>
</div>
</body>
</html>
The PHP part is quite basic:
$options = new \Dompdf\Options();
$options->set('isRemoteEnabled', true);
$options->set('isPhpEnabled', true);
$dompdf = new \Dompdf\Dompdf($options);
$dompdf->set_option('dpi', 300);
$dompdf->set_paper('A4', 'portrait');
$dompdf->load_html($html);
$dompdf->render();
$output = $dompdf->output();
file_put_contents('test.pdf', $output);
NOTE
I also tried with tables but with same issue.
<table class="bg-red" style="width:100%;line-height:0;" cellspacing="0" cellpadding="0">
<tr>
<td class="bg-grey" style="width:50%;height:50%;line-height:0;">Square 1</td>
<td class="bg-green" style="width:50%;height:50%;line-height:0;">Square 2</td>
</tr>
<tr>
<td class="bg-green" style="width:50%;height:50%;line-height:0;">Square 3</td>
<td class="bg-grey" style="width:50%;height:50%;line-height:0;">Square 4</td>
</tr>
</table>
[![enter image description here][1]][1]
[![enter image description here][2]][2]
[1]: https://i.stack.imgur.com/AIqek.png
[2]: https://i.stack.imgur.com/VFpMs.png
Related
I have an MVC application that has roughly 10 different views. The footer acts the way I'd expect it to on every page but one. This view in particular displays a table that contains SQL data. I believe the problem might have something to do with the footer ignoring or not "seeing" this table.
Layout Page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Pay Data</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
#Html.ActionLink("MyPay Data", "Index", "Dashboard", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Pay Period", "PayPeriod", "Dashboard")</li>
<li>#Html.ActionLink("Internal Job Postings", "JobPostings", "Dashboard")</li>
<li>#Html.ActionLink("View Paycheck", "ViewPayCheck", "Dashboard")</li>
<li>#Html.ActionLink("LOGOUT", "Logout", "Dashboard", new { #class = "log-button" })</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<footer>
<div class="footer-wrapper">
<div class="footer-content">
<div class="copyright-left">
Copyright © #DateTime.Now.Year All Rights Reserved.
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
View:
#model MyPayTC.Models.ServiceGroupConglom
#{
Layout = "~/Views/Shared/_LayoutDashboard.cshtml";
if (Session["userID"] == null)
{
Response.Redirect("~/Home/Login");
}
}
<body>
<div class="paycheck-table-container">
#using (Html.BeginForm("ViewPayCheck", "Dashboard", FormMethod.Post))
{
<table id="paycheck-table">
#foreach (var item in Model.ListOfServiceGroups)
{
<thead>
<tr>
<td id="service-name" colspan="4">
#item.service
</td>
</tr>
<tr>
<td id="service-duration">
<b>Duration: </b>#item.duration
</td>
<td id="service-rate">
<b>Rate: </b>$#item.rate
</td>
</tr>
</thead>
<tbody>
#foreach (var service in item.ListOfServices)
{
<tr>
<td>
#service.serviceDate.ToShortDateString()
</td>
<td>
#service.units
</td>
</tr>
}
<tr>
<td>
<u><b>Total Units: </b>$#item.TotalUnits</u>
</td>
</tr>
</tbody>
}
<tfoot>
<tr>
<td colspan="4">
<b>Your Pay Before Deductions: #Model.TotalPayBeforeDeductions</b>
</td>
</tr>
</tfoot>
</table>
}
</div>
</body>
StyleSheet:
.footer-wrapper {
height: 100px;
background-color: rgb(20, 20, 23);
width:100vw;
left:0px;
position:absolute;
min-width:600px;
}
.footer-content {
width: 100%;
line-height:100px;
padding-left: 15px;
padding-right: 15px;
margin-right: auto;
margin-left: auto;
color:rgba(255,255,255,0.2);
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Data Retrieve</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap.css">
<style>
#demo{
background-color:purple;
color: white;
width: 100%;
}
#home{
width: 45px;
}
#back{
width: 25px;
}
#header{
width:100%;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12">
<table id="info_table" class="table">
<tr>
<td id="header">
<p align="center"><span style="float: left"><img src="back.png" id="back"></span><b>মন্ত্রণালয়</b><span style="float: right"><img src="home.png" id="home"></span><span style="float: right"><img src="refresh.png" id="refresh"></span></p>
</td>
</tr>
<tr>
<td id="demo" align="center"><td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
<script>
var bn_num = new Array('০','১','২','৩','৪','৫','৬','৭','৮','৯');
function bn_num_convert(num){
//console.log(num.length);
var bn_val = '';
for(i=0;i<num.length;i++){
//console.log(num[i] + '/' + bn_num[num[i]]);
bn_val = bn_val + bn_num[num[i]];
}
//console.log(bn_val);
return bn_val;
}
$.getJSON("http://localhost/directory/ministri.json",function(obj){
var info ='';
//alert(obj.data.length);
var count = obj.data.length;
document.getElementById("demo").innerHTML ='মোট মন্ত্রণালয় ('+bn_num_convert(count.toString())+')';
var count = obj.data.length;
$.each(obj.data,function(key,value){
info += '<tr>';
info +='<td>'+value.sitename_bn+'<span style="float: right"> > </span>'+ '</td>';
info += '</tr>';
[This is the corresponding output of the code.][1]
});
$('#info_table').append(info);
});
</script>
Firstly here purple background color doesn't get the full wide.if i inspect the background there shows an empty td which cause the problem.if i delete the empty td then i get perfect result.but there is no empty td in my code.plz see the code and show me the error.
Secondly there is no horizontal line at the end of the output result.why last line doesn't get horizontal line?
You are not closing the td, thats why empty td is appending.
<td id="demo" align="center"></td>
Close the td like in above code
and remove margin and padding as other posts suggested in case if you want full width till ends.
Set body margin paddding to 0px
body {
padding: 0px;
margin: 0px;
}
Just put in demo id td, it will show.
See thishttps://jsfiddle.net/v6mwpz89/3/
Cheers!
I am having trouble centering my table in html as I am trying to create a web page for a class.
This is what I have entered into html:
<table align="center" width="50%">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
However, whenever I try to add 'align' and 'width' in the attribute, it only affects my width. It doesn't center the table.
Does anyone know of a way to both center the table in the page while applying width?
Thank you. I can provide the markup of my html page if needed.
Try this:
<table style="margin:0px auto; width:500px">
However align is obsolete so you may try this:
table {
width:500px;
margin: 10px auto;
}
ie, give width to your table and set margin auto horizontal
just add this to your table
table {
text-align: center;
}
Live Demo
try to put it inside
<p align="center">
<table align="center" width="50%">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</p>
Enclose your table in a wrapping div:
<div class="wrapper">
<table>
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</div>
And then in your css file (if you want to centre the text too):
table {
text-align: center;
width: 50%
}
.wrapper {
margin: 0 auto;
}
You can't center an element without defining the width of its outside container. Let me show you a better way to set it up.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#outside-container {
width: 100%;
}
#form-container {
width: 50%;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="outside-container">
<div id="form-container">
<table align="center">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</div> <!-- CLOSE #form-container -->
</div> <!-- CLOSE #outside-container -->
</body>
</html>
My table keeps show up in one cell, not sure what i did wrong. anyone willing to look and let me know where i went wrong.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="main.css">
<title>Ironton Fire department Sponsors</title>
</head>
<body>
<div style="width:1020px; height:1020px; float:center; background- image:url(images/zombie_5k_TM_AP_stripped.png)">
<div class="home">
<img src='images/home_button.jpg' name="register" onMouseOver="this.src='images/home_button_hover.jpg'" onMouseOut="this.src='images/home_button.jpg'" onclick="location.href='index.html'"/>
</div>
<div class="register">
<img src='images/register_button.jpg' name="register" onMouseOver="this.src='images/register_button_hover.jpg'" onMouseOut="this.src='images/register_button.jpg'" onclick="location.href='register.html'"/>
</div>
<div class="sponsor">
<img src='images/sponsor_button.jpg' name="sponsor" onMouseOver="this.src='images/sponsor_button_hover.jpg'" onMouseOut="this.src='images/sponsor_button.jpg'" onclick="location.href='sponsors.html'"/>
</div>
<div class="gallery">
<img src='images/gallery_button.jpg' name="gallery" onMouseOver="this.src='images/gallery_button_hover.jpg'" onMouseOut="this.src='images/gallery_button.jpg'" onclick="location.href='gallery.html'" />
</div>
<div class="sponsors">
<table>
<tr>
<td align="center" width="250">Seth Jackson - Edward Jones</td>
<td align="center" width="250">Heritage Mechanical </td>
</tr>
<tr>
<td align="center" width="250">Mike Flanagan – Iron Range Auto </td>
<td align="center" width="250"> </td>
</tr>
</table>
</div>
<div class="sform">
< p align="center">
<a style="color: #D91D1F;"href="Images/ZX5K Sponsorship Agreement.pdf" target="_blank">ZX5K Sponsorship Agreement</a></p></div></div>
</body>
</html>
here is the css that covers the class .sponsors
.sponsors {
position: absolute;
top: 280px;
left: 340px;
}
here is the link to see what i am talking about, http://www.ifdauxzx5k.com/sponsors.html
Your table doesn't show up in one cell.
But all the cells are on top of eachother, because you have position: absolute; on your TD in your main.css line 62.
td{
color: #D91D1F;
position: absolute;
}
This is why every TD is going to the left top position of the table. Remove this line and it will behave correctly.
I'm having some trouble with using an iframe. So basically I was trying to create a slideshow, with one of the slides being an embedded video, so I did this by using an iframe. Well, the slideshow functions properly, and the video is resized properly, but when the image slides come up, they aren't being enlarged to the size of the iframe like the video is, and they seem to have a padding of 2 or 3px around the top/left sides. I've attached the HTML and CSS code, and took some pictures to illustrate what I'm trying to say and if anyone see's the problem, I'd really appreciate some help. Thanks so much!
CSS CODE
#imageDiv {
border: 5px solid black;
width:500px;
}
#slideshowImg {
width:500px;
height:300px;
margin:0px;
border-spacing:20px;
}
#mediaMenu table {
font-size:14px;
border:0;
margin-top:5px;
border-spacing:0;
}
table {
margin:0;
padding:0;
border-spacing:0
}
#mediaMenu td {
margin:0px;
padding:0px;
width:120px;
height:20px;
color:#CBE8E8;
}
.subMenu img {
width:100%;
height:100px;
}
.subTitle {
font-family:chalkboard, sans-serif;
background-color:#000;
font-size:12px;
}
.subTitle a {
color:#CBE8E8;
text-decoration:none;
}
HTML CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> ******* </title>
<link rel="stylesheet" type="text/css" href="" />
<script language="javascript" type="text/javascript">
slideshowImages = new Array(5);
slideshowImages[0] = new Image();
slideshowImages[0].src = 'images/tebowFinal.jpg';
slideshowImages[1] = new Image();
slideshowImages[1].src = 'images/nash.jpg';
slideshowImages[2] = new Image();
slideshowImages[2].src = 'images/kobe.jpg';
slideshowImages[3] = new Image();
slideshowImages[3].src = 'http://www.youtube.com/embed/9UlmwcEIWUw';
slideshowImages[4] = new Image();
slideshowImages[4].src = 'images/tbrown.jpg';
index=0;
function slideShow(source)
{
document.getElementById('slideshowImg').src = slideshowImages[source].src;
clearInterval(newPic);
index=source;
imageChange();
if (source=="3")
{
onclick=clearInterval(newPic);
}
}
function slideshowForward()
{
// increase the value of index by one or reset the value to 0 if all the slides have been cycled
index++;
if(index >= 5)
{
index=0;
}
// set the image name to the slide show image
document.getElementById('slideshowImg').src = slideshowImages[index].src;
}
function imageChange() {
newPic=setInterval(function(){slideshowForward() },5000);
}
</script>
<link href="slideshow.css" rel="stylesheet" type="text/css" />
</head>
<body onload="imageChange()">
<div id="imageDiv">
<table id="mediaMenu">
<tr>
<td id="imageRow" colspan="5" >
<a href="#" onclick="clearInterval(newPic)">
<iframe id="slideshowImg" src="images/tebowFinalFinal.jpg" frameborder="0" scrolling="no" ></iframe>
</a>
</td>
</tr>
<tr>
<td class="subMenu">
<a href="#" onclick="slideShow(0)">
<table>
<tr> <td class="subTitle"> Tebow Talks </td></tr>
<tr><td><img src="images/tebow.jpg" alt="Tim Tebow"></img></td></tr>
</table>
</a>
</td>
<td class="subMenu">
<a href="#" onclick="slideShow(1)">
<table>
<tr> <td class="subTitle">Nash attack </td></tr>
<tr><td><img src="images/nash.jpg" alt="Steve Nash"></img></td></tr>
</table>
</a>
</td>
<td class="subMenu">
<a href="#" onclick="slideShow(2)">
<table>
<tr> <td class="subTitle">Kobe Who? </td></tr>
<tr><td><img src="images/kobe.jpg" alt="Kobe Bryant"></img></td></tr>
</table>
</a>
</td>
<td class="subMenu">
<a href="#" onclick="slideShow(3)">
<table>
<tr> <td class="subTitle">Not So Giant </td></tr>
<tr><td><img src="images/giants.jpg" alt="San Francisco Giants"></img></td></tr>
</table>
</a>
</td>
<td class="subMenu">
<a href="#" onclick="slideShow(4)">
<table>
<tr> <td class="subTitle">Expensive mistake </td></tr>
<tr><td><img src="images/tbrown.jpg" alt="Terrell Brown"></img></td></tr>
</table>
</a>
</td>
</tr>
</table>
</div>
</body>
</html>