I am trying to display client details as a pdf using dompdf from HTML. Also added a header and footer in the pdf. Some contents in the pdf are displayed under the footer section.
This is the Image of pdf generated, here the data under Other Details are displayed under the footer section. How can change the alignment of content into the next page with a header and footer?
This is the code have written, give a solution
<html>
<head>
<title>Prescription</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
padding: 0;
margin: 0;
font-family: "Times New Roman", Times, serif;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 200px;
padding: 10px 50px;
background-color: #ccc;
border-bottom: 1px solid #1f1f1f;
z-index: 1000;
}
.text-center {
text-align: center;
}
.phone {
float: right;
margin-bottom: 10px;
margin-right: 150px;
}
.phone h4 {
text-align: center;
right: 50px;
}
main {
margin-top: 200px;
padding: 10px 50px;
}
.after-header {
height: 30px;
padding: 10px 0;
}
.patient-id {
float: left;
}
.date-day {
float: right;
}
.page-header {
margin-top: 5px;
padding: 5px;
background-color: aqua;
}
.page-header h2 {
font-family: monospace;
font-size: 20px;
text-align: center;
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
border-bottom: 1px solid #1f1f1f;
border-top: 1px solid #1f1f1f;
z-index: 1000;
}
footer h3 {
padding-left: 50px;
}
.details {
margin-top: 0;
padding: 2px 0;
}
table {
margin: 5px 0;
width: 100%;
border-top: 1px dotted #1f1f1f;
border-right: 1px dotted #1f1f1f;
}
td {
text-align: justify;
padding: 10px;
border-bottom: 1px dotted #1f1f1f;
border-left: 1px dotted #1f1f1f;
}
table tr>td:first-child {
border-left: none;
}
label {
font-weight: bold;
font-size: 15px;
}
</style>
</head>
<body>
<header>
<div class="text-center">
<h1>SPECIALITY CLINIC</h1>
<h2>xxxxxxxx</sub>
</h2>
<h3>Pediatrition</h3>
</div>
<div class="phone">
<h4>Phone: xxxxx</h4>
</div>
</header>
<footer>
<h3>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</h3>
</footer>
<main>
<div class="after-header">
<div class="patient-id">
<h3>Patient Id: 1001</h3>
</div>
<div class="date-day">
<h3>Date: 17/05/2019</h3>
</div>
</div>
<div class="page-header">
<h2>Patient Details</h2>
<hr>
</div>
<div class="details">
<div>
<div style="background-color: #f2f2f2; padding: 5px;">
<h3>General Details</h3>
</div>
</div>
<table>
<col width="10%">
<col width="20%">
<col width="10%">
<col width="10%">
<col width="30%">
<tr>
<td><label>Name:</label></td>
<td colspan="3"><label>Agreesh V S</label></td>
<td rowspan="4"><img src="img.jpg"></td>
</tr>
<tr>
<td><label>Age:</label></td>
<td><label>24</label></td>
<td><label>Gender: </label></td>
<td><label>Male</label></td>
</tr>
<tr>
<td><label>Phone: </label></td>
<td colspan="3"><label>9876543210</label></td>
</tr>
<tr>
<td><label>Email: </label></td>
<td colspan="3"><label>9876543210</label></td>
</tr>
</table>
<div>
<div style="background-color: #f2f2f2; padding: 5px;">
<h3>Personal Details</h3>
</div>
</div>
<table>
<col width="50%">
<col width="50%">
<tr>
<td><label>Date Of Birth:</label></td>
<td colspan="3"><label>18/04/1995</label></td>
</tr>
<tr>
<td><label>Weight</label></td>
<td><label>65 KG</label></td>
</tr>
<tr>
<td><label>Weight at Birth </label></td>
<td colspan="3"><label>2.5 KG</label></td>
</tr>
<tr>
<td><label>Blood Group </label></td>
<td colspan="3"><label>B+ve</label></td>
</tr>
</table>
<div>
<div style="background-color: #f2f2f2; padding: 5px;">
<h3>Other Details</h3>
</div>
</div>
<table>
<col width="50%">
<col width="50%">
<tr>
<td><label>Date Of Birth:</label></td>
<td colspan="3"><label>18/04/1995</label></td>
</tr>
<tr>
<td><label>Weight</label></td>
<td><label>65 KG</label></td>
</tr>
<tr>
<td><label>Weight at Birth </label></td>
<td colspan="3"><label>2.5 KG</label></td>
</tr>
<tr>
<td><label>Blood Group </label></td>
<td colspan="3"><label>B+ve</label></td>
</tr>
</table>
</div>
</main>
</body>
</html>
Keep in mind that when Dompdf positions content it is based on the bounds of the body. If you have a header/footer on the page you need to push it outside the bounds of the body or it will overlap the document content.
A small tweak to your CSS should fix things. First, add a page margin to accommodate your header. Something along the lines of:
#page {
margin: 220px 1in 1in 1in;
}
Then modify the top positioning of your header to push it into that space:
header {
position: fixed;
top: -200px;
left: 0;
right: 0;
height: 200px;
padding: 10px 50px;
background-color: #ccc;
border-bottom: 1px solid #1f1f1f;
z-index: 1000;
}
I am using dompdf in codeigniter, the HTML page looks fine but in dompdf generated pdf, there is a black box.
The code in the footer section is:
<div class="signature-footer">
<table>
<tr>
<td style="text-align: center;border-style:dashed; border-top:1px black;border-bottom:1px solid white; border-left:1px solid white; border-right:1px solid white;">Prepared By<br><?php echo $quotation_detail[0]->employee_name; ?><br><?php echo $quotation_detail[0]->designation_name ; ?></td>
<td style="width: 30%;border-top:1px solid white;border-bottom:1px solid white; border-left:1px solid white; border-right:1px solid white;"> </td>
<td style="text-align: center;border-top:1px solid white;border-bottom:1px solid white; border-left:1px solid white; border-right:1px solid white;"> </td>
<td style="width: 30%;border-top:1px solid white;border-bottom:1px solid white; border-left:1px solid white; border-right:1px solid white;"> </td>
<td style="text-align: center;border-style:dashed; border-top:1px black;border-bottom:1px solid white; border-left:1px solid white; border-right:1px solid white;">Authorized Signature<br> <br> </td>
</tr>
</table>
</div>
</div><div class="below-border-footer"></div><div style="text-align: center"><img src="<?php echo base_url(); ?>interface/img/footerImage.png"> </div></div></body>
</html>
CSS for these two elements:
.below-border-footer {
width: 100%;
border-top: 0 ;
padding-bottom: 0;
text-align: center;
}
.signature-footer {
font-size: 12px;
font-weight: bold;
width: 100%;
position: relative;
margin-top: 70px;
margin-bottom: 2px;
}
I've tried for hours but no result. How can I remove the black box in the footer?
This code works prefect on browsers but problem is that when i fill dynamic data and generating PDF using dompdf then <td>item</td> full column goes top on cell.
What is the solution ?
Browsers shows like this Browsers View but Generated PDF by dom pdf shows like this Generated PDF View
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
#header { position: fixed; left: 0px; width:100%; bottom: -150px; right: 0px; height: 150px; background-color: #4b94d9; color:#000; text-align: left; }
#page-wrap {
width: 700px;
margin: 0 auto;
}
.center-justified {
text-align: justify;
margin: 0 auto;
width: 30em;
}
table.outline-table {
border: 1px solid;
border-spacing: 0;
}
tr.border-bottom td, td.border-bottom {
border-bottom: 1px solid;
}
tr.border-top td, td.border-top {
border-top: 1px solid;
}
tr.border-right td, td.border-right {
border-right: 1px solid;
}
tr.border-right td:last-child {
border-right: 0px;
}
tr.center td.center {
text-align: center;
valign:"middle";
}
td.pad-left {
padding-left: 5px;
line-height: 2;
}
tr.right-center td, td.right-center {
text-align: right;
padding-right: 50px;
}
tr.right td, td.right {
text-align: right;
}
.content > div > span{
display:inline-block;
width:50%; /* or choose some other value */
}
.contentdate > div > span{
display:inline-block;
width:35%; /* or choose some other value */
}
<table width="100%" class="outline-table">
<tbody>
<tr class="border-bottom border-right" style="background:#353940;color:#FFF;">
<td width="35%" class="pad-left"><strong>Item</strong></td>
<td width="10%" style="text-align:center;"><strong>Quantity</strong></td>
<td width="10%" class="right"><strong>Unit Cost</strong></td>
<td width="15%" class="right"><strong>Total</strong></td>
</tr>
<tr class="border-right">
<td class="pad-left">some item name one</td>
<td style="text-align:center;">15</td>
<td class="right">1500.00</td>
<td class="right">22500.00</td>
</tr>
</tbody>
</table>
This code works prefect on browsers but problem is that when i fill dynamic data and generating PDF using dompdf then <td>item</td> full column goes top on cell.
What is the solution ?
Try This.
td.pad-left {
padding-left: 5px;
//line-height: 2; <--remove this
}
Html
<tr class="border-right">
<!-- give margin top in particular line -->
<td class="pad-left"><p style="margin-top:10px;">some item name one</p></td>
<td style="text-align:center;">15</td>
<td class="right">1500.00</td>
<td class="right">22500.00</td>
</tr>
I wrote a PHP code to generate a table dynamically. The head of the table can be any text value in a database and the column of the table can be any text in the database.
If the value of the columns are the same or similar, then the width should be somewhat the same.
the following is my HTML code that is generated by PHP
<div style="margin: 0 auto; text-align: center;">
<table class="common2">
<thead>
<tr>
<th colspan="12">Title</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left; width: 150px;">Answer Options</td>
<td style="text-align: center;">1</td>
<td style="text-align: center;">2</td>
<td style="text-align: center;">3</td>
<td style="text-align: center;">4</td>
<td style="text-align: center;">5</td>
<td style="text-align: center;">6</td>
<td style="text-align: center;">7</td>
<td style="text-align: center;">8</td>
<td style="text-align: center;">9</td>
<td style="text-align: center;">10</td>
<td style="text-align: center;">11+</td>
</tr>
<tr>
<td style="text-align: left; width: 150px;">Response Count</td>
<td style="text-align: center;">2</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">1</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">1</td>
</tr>
</tbody>
</table>
</div>
this is my common2 css code
.common2
{
width: 100%;
border: solid #E6E6E6 1px;
margin: 0 auto;
padding: 0;
border-spacing: 0px;
/* border-collapse: collapse; */
}
.common2 td
{
padding: 6px;
border: solid #E6E6E6 1px;
}
.common2 th
{
color: #fff;
font-weight: bold;
text-align: center;
border: solid #E6E6E6 1px;
background-color: #1A1A1C;
padding: 8px;
font-size: 14.5px;
}
.common2 th.highlighed
{
color: #fff;
font-weight: bold;
text-align: center;
border: 0px solid #DBDBDB;
background-color: #666666;
padding: 6px 10px;
}
.common2 tr:last-child td:last-child {
-moz-border-radius: 0 0 6px 0;
-webkit-border-radius: 0 0 6px 0;
border-radius: 0 0 6px 0;
}
.common tr:last-child td:last-child {
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
.common2 tr:nth-child(even)
{
background-color: #E8E8E8; /*#E7E9E8; /*#D6D8D7;*/
position: relative;
}
.common2 td.stickOut
{
background-color: #DDEAFA; /*#DBAFAF;*/
position: relative;
font-weight: bold;
border: solid #DBDBDB 1px;
}
.common2 td.head
{
background-color: #25328C; /* #4F4F4F; */
text-align: center;
border: 1px solid #25328C;
padding: 3px;
font-weight: bold;
color: #fff;
padding: 4px 10px;
height: 35px;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #2C3C92 0%, #25328C 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #2C3C92 0%, #25328C 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #2C3C92 0%, #25328C 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #2C3C92), color-stop(1, #25328C));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #2C3C92 0%, #25328C 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #2C3C92 0%, #25328C 100%);
}
.common2 td.subfoot
{
background-color: #FFFF99; /* #4F4F4F; */
text-align: center;
border: 1px solid #DBDBDB;
padding: 3px;
color: #000;
font-weight: 600;
font-style:italic;
padding: 4px 10px;
}
.common2 td.foot1
{
background-color: #999999; /* #4F4F4F; */
text-align: center;
border: 1px solid #DBDBDB;
padding: 3px;
font-weight: bold;
color: #fff;
padding: 4px 10px;
}
.common2 td.foot2
{
background-color: #555555; /* #4F4F4F; */
text-align: center;
border: 1px solid #DBDBDB;
padding: 3px;
font-weight: bold;
color: #fff;
padding: 4px 10px;
}
Here is a screenshot of my current output.
How can I make those columns with a similar width, excluding the very first column, as I specified how wide that will be?
remove width property from .common2
http://jsfiddle.net/raam86/knj9E/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
I have tried in weeks to convert this template:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<?php echo head();?>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body leftmargin="10" topmargin="10" marginwidth="10" marginheight="10" class="background"<?php echo onload();?>>
<a name="top"></a>
<table border="0" align="center" cellpadding="7" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td><table class="main" align="center" width="755" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="header"colspan="2"><div class="sitetitle"></div></td>
</tr>
<tr>
<td valign="top" width="220"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table class="navigation" align="left" width="170" border="0" cellpadding="5" cellspacing="0">
<tr>
<td></td>
</tr>
<tr>
<td valign="top"> <?php echo toc();?> </td>
</tr>
<tr>
<td valign="top" class="menu"><p><?php echo sitemaplink();?></p></td>
</tr>
<tr>
<td valign="top" class="menu"><p><?php echo printlink();?></p></td>
</tr>
<tr>
<td valign="top" class="menu"><p><?php echo mailformlink();?></p></td>
</tr>
<tr>
<td valign="top" class="menu"><p><?php echo guestbooklink();?></p></td>
</tr>
<tr>
<td valign="top" class="menu"><p><?php echo languagemenu();?></p></td>
</tr>
<tr>
<td valign="top" class="menu"><p><?php echo loginlink();?></p></td>
</tr>
<tr>
<td valign="top" class="menu"><p><?php echo lastupdate();?></p></td>
</tr>
<tr>
<td class="eckenaviunten"></td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td class="searchbox"><?php echo searchbox();?></td>
</tr>
</table></td>
</tr>
</table></td>
<td valign="top" width="550"> <table width="550" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div class="locator"><?php echo locator();?></div></td>
</tr>
</table>
<table align="center" width="550" border="0" cellpadding="5" cellspacing="0">
<tr>
<td class="eckeoben"></td>
</tr>
<tr>
<td class="content" valign="top"> <?php echo editmenu();?> <?php echo content();?>
<?php echo submenu();?></td>
</tr>
<tr>
<td class="eckeunten"></td>
</tr>
</table>
<br>
<br>
</td>
</tr>
<tr>
<td class="endline" colspan="2"><div align="center"><?php echo footer();?></div></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
The CSS is:
.codeview {
background-color: #CCCCCC;
border: 1px solid #999999;
}
BODY,TD{
font-family:Verdana, Geneva, Arial, Helvetica;
font-size:8pt;
color:#000000;
}
H1,H2,H3{
font-size:13pt;
font-weight:bold;
margin-bottom:6px;
font-family: Arial, Helvetica, sans-serif;
}
H4{
font-size:11px;
font-family: Arial, Helvetica, sans-serif;
background-image: url(images/infotable.png);
border: 1px solid #003399;
padding: 2px 4px;
font-weight: bold;
color: #003399;
}
ul.menulevel1,ul.menulevel2,ul.menulevel3,ul.sitemaplevel1,ul.sitemaplevel2,ul.sitemaplevel3,ul.submenu,ul.search{padding-left: 0;margin-left: 0;list-style: none;}
form{margin:0;}
IMG{border:0;}
li{line-height:1.5;}
.doc{padding-left: 15px;background-image: url(menu/doc.gif);background-repeat: no-repeat;}
.docs{padding-left:15px;background-image: url(menu/docs.gif);background-repeat:no-repeat;}
.sdoc{padding-left: 15px;background-image: url(menu/sdoc.gif);background-repeat: no-repeat;}
.sdocs{padding-left: 15px;background-image: url(menu/sdocs.gif);background-repeat: no-repeat;}
.sitemaplevel1 .doc{padding-left: 15px;background-image: url(menu2/doc.gif);background-repeat: no-repeat;}
.sitemaplevel1 .docs{padding-left:15px;background-image: url(menu2/docs.gif);background-repeat:no-repeat;}
.sitemaplevel1 .sdoc{padding-left: 15px;background-image: url(menu2/sdoc.gif);background-repeat: no-repeat;}
.sitemaplevel1 .sdocs{padding-left: 15px;background-image: url(menu2/sdocs.gif);background-repeat: no-repeat;}
.submenu .doc{padding-left: 15px;background-image: url(menu2/doc.gif);background-repeat: no-repeat;}
.submenu .docs{padding-left:15px;background-image: url(menu2/docs.gif);background-repeat:no-repeat;}
.submenu .sdoc{padding-left: 15px;background-image: url(menu2/sdoc.gif);background-repeat: no-repeat;}
.submenu .sdocs{padding-left: 15px;background-image: url(menu2/sdocs.gif);background-repeat: no-repeat;}
.search .doc{padding-left: 15px;background-image: url(menu2/doc.gif);background-repeat: no-repeat;}
.search .docs{padding-left:15px;background-image: url(menu2/docs.gif);background-repeat:no-repeat;}
.search .sdoc{padding-left: 15px;background-image: url(menu2/sdoc.gif);background-repeat: no-repeat;}
.search .sdocs{padding-left: 15px;background-image: url(menu2/sdocs.gif);background-repeat: no-repeat;}
a{text-decoration:none;font-weight:bold;}
a:link,a:visited{color:#1B366C;}
a:active,a:hover{color:#728DC3;}
.sitename{font-weight:normal;font-size:20pt;}
.menulevel1{font-size:8pt;color:#FCDE1C;}
.menulevel1 a{font-weight:normal;color:#FFFFFF;}
.menulevel1 a:link,.menulevel1 a:visited{color:#FFFFFF;}
.menulevel1 a:active,.menulevel1 a:hover{color:#FCDE1C;}
.sitemaplevel1,.sitemaplevel2,.sitemaplevel3{font-size:9pt;}
.sitemaplevel1 a,.sitemaplevel2 a,.sitemaplevel3 a{font-weight:normal;color:black;}
.sitemaplevel1 a:link,.sitemaplevel2 a:link,.sitemaplevel3 a:link,.sitemaplevel1 a:visited,.sitemaplevel2 a:visited,.sitemaplevel3 a:visited{color:black;}
.sitemaplevel1 a:active,.sitemaplevel2 a:active,.sitemaplevel3 a:active,.sitemaplevel1 a:hover,.sitemaplevel2 a:hover,.sitemaplevel3 a:hover{color:black;}
.submenu{
font-size:8pt;
color: #FFFFFF;
}
.submenu a{font-weight:normal;color:black;}
.submenu a:link,.submenu a:visited{color:black;}
.submenu a:active,.submenu a:hover{color:#1B366C;}
.search a{font-weight:normal;color:black;}
.search a:link,.search a:visited{color:black;}
.search a:active,.search a:hover{color:black;}
.locator{
font-size:8pt;
color:white;
margin-bottom: 13px;
background-image: url(images/pageico.png);
background-repeat: no-repeat;
text-indent: 20px;
height: 19px;
padding-top: 3px;
}
.locator a{font-weight:normal;text-decoration:underline}
.locator a:link,.locator a:visited,.locator a:active,.locator a:hover{color:white;}
.menu{font-weight:normal;font-size:7pt;color:white;}
.menu a{
color:white;
font-size: 7pt;
font-weight: normal;
text-decoration: underline;
}
.menu a:link,.menu a:visited,.menu a:active,.menu a:hover{color:white;}
.login{font-weight:bold;font-size:8pt;color:grey;}
.login a,.login a:link,.login a:visited,.login a:active,.login a:hover{color:gray;}
.navigator{font-weight:bold;font-size:10pt;color:white;}
.navigator a:link,.navigator a:visited{color:#c0c0c0;}
.navigator a:active,.navigator a:hover{color:white;}
.edit{
font-size:8pt;
color:black;
background-color:#FFFFFF;
background-image: url(images/edit.jpg);
background-repeat: no-repeat;
}
.edit a:link,.edit a:visited,.edit a:active,.edit a:hover{font-weight:normal;color:black;}
input,select{font-size:8pt;}
textarea{font-family:Verdana,Geneva,Arial,Helvetica;font-size:8pt;background-color:white;width:98%;}
.searchbox .text,.searchbox .submit{border:2px solid #c0c0c0;background-color:white;}
.background {
background-color: #FFFFFF;
background-image: url(images/cmsimpledebg.png);
background-attachment: fixed;
}
.main {
background-image: url(images/center.png);
border-bottom: 2px solid #103482;
}
.eckeoben {
background-color: #FFFFFF;
background-image: url(images/eckeoben.png);
background-repeat: no-repeat;
background-position: left;
height: 17px;
}
.eckeunten {
background-color: #FFFFFF;
background-image: url(images/eckeunten.png);
background-repeat: no-repeat;
background-position: left;
height: 17px;
}
.content {
background-color: #FFFFFF;
padding-left: 20px;
padding-right: 20px;
}
.eckenavioben {
background-color: #3C5A99;
background-image: url(images/eckenavioben.png);
background-repeat: no-repeat;
background-position: right;
height: 17px;
}
.eckenaviunten {
background-color: #3C5A99;
background-image: url(images/eckenaviunten.png);
background-repeat: no-repeat;
background-position: right;
height: 17px;
}
.navigation {
background-color: #3C5A99;
padding-left: 5px;
background-image: url(images/navigation.png);
background-repeat: no-repeat;
}
.searchbox .text {
border: 1px solid #D5DDED;
color: #FFFFFF;
background-image: url(images/textfield.png);
text-indent: 2px;
}
.searchbox .submit {
border: 1px solid #103482;
color: #FFFFFF;
background-image: url(images/submit.png);
}
.header {
background-image: url(images/header.png);
background-repeat: no-repeat;
height: 180px;
}
.endline {
background-color: #BAD5FF;
padding-top: 2px;
padding-bottom: 2px;
}
.sitetitle {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
color: #008040;
text-align: left;
position: relative;
padding-left: 220px;
}
.borderheadline {
background-image: url(images/boderheadline.png);
}
.infotable {
background-color: #CCCCCC;
background-image: url(images/infotable.png);
background-repeat: repeat-x;
border: 1px solid #003399;
}
.codeview {
background-color: #CCCCCC;
padding: 3px;
border: 1px solid #999999;
width: 100%;
overflow: auto;
}
.warning {
color: #FF0000;
background-image: url(images/ausrufezeichen.png);
text-indent: 30px;
height: 35px;
background-repeat: no-repeat;
font-weight: bold;
padding-top: 10px;
}
Do you know a good tutorial on how to convert it from table to div?
Edit:
The template and screenshot of it can be found at: http://www.cmsimple-styles.com/cmsimplestyles/en/?Templates:Template_Downloads__1. The temple is called "cmsimple de". It's a little down the page :)
The CSS display property could help here?
<table> --> #topdiv { display:table; }
<tr> --> .row { display:table-row; }
<td> --> .cell { display:table-cell; }
It probably isn't the best way - is still is table design - but it should work reliably and all from css. (Never tried this personally, so not sure what other properties you'll need to set.)
replace 'table' 'tr' 'td' with div
set tr's width the same with table's width