Hiho,
I have a problem with princexml.
I need to render pages with a repeating footer.
This onbe works fine, but on every site is only the first line from the footer content is shown.
The footer content is a table with two rows.
The first row has on every cell more than one line.
The problem is that only the first line from the first row is shown and not the whole table.
Does anybody has an idea why?
The HTML-Part from the footer:
<table id="footer" style="height: 67px; width: 100%;" border="0" frame="void" rules="none">
<tbody>
<tr>
<td>#BetreiberDaten</td>
<td style="width: 2%;"> </td>
<td style="width: 40%;">#GesellschafterBeschreibung</td>
<td style="width: 2%;"> </td>
<td>#BankAdresse</td>
</tr>
<tr>
<td style="text-align: center;" colspan="5">#Rechnungsart_#Buchungscode_#Seitenzahl</td>
</tr>
</tbody>
</table>
and the css part(s):
#page {
size: A4;
margin: 15pt;
page-break-before: always;
#bottom {
content: flow(footer);
margin: 0;
}
}
#footer
{
width:100%;
padding:2mm;
text-align:left;
}
#footer td
{
font-size:6pt;
}
div.pdf-footer-page-counter span.pdf-footer-page-counter-page {
font-size: 6pt;
content: counter(page);
}
div.pdf-footer-page-counter span.pdf-footer-page-counter-page-total {
font-size: 6pt;
content: counter(pages);
}
table#footer {flow: static(footer, start);}
Related
I have read many questions and many articles but cant find my answer Here is my code result
Here is my code
.checkout-cart-total {
background-color: #f5f5f5;
padding: 45px;
}
#media only screen and (max-width: 575px) {
.checkout-cart-total {
padding: 30px;
}
}
.checkout-cart-total h4 {
flex-basis: 18px;
line-height: 23px;
font-weight: 600;
color: #292929;
}
.checkout-cart-total h4:first-child {
margin-top: 0;
margin-bottom: 25px;
}
.checkout-cart-total h4:last-child {
margin-top: 15px;
margin-bottom: 0;
}
.checkout-cart-total h4 span {
float: right;
display: block;
}
.checkout-cart-total ul {
border-bottom: 1px solid #292929;
}
.checkout-cart-total ul li {
color: #292929;
font-size: 14px;
line-height: 23px;
font-weight: 600;
display: block;
margin-bottom: 16px;
}
.checkout-cart-total ul li span {
color: #292929;
float: right;
}
.checkout-cart-total p {
line-height: 30px;
font-weight: 600;
color: #292929;
padding: 10px 0;
border-bottom: 1px solid #292929;
margin: 0;
}
.checkout-cart-total p span {
float: right;
}
<div class="col-12 mb-60">
<h4 class="checkout-title">Cart Total</h4>
<div class="checkout-cart-total">
<h4>Product <span>Total</span></h4>
<ul>
<?php
$cartres = $fetchcart->fetchAll(PDO::FETCH_ASSOC);
foreach($cartres as $row){
?>
<li>
<input type="text" disabled value="<?php echo $row['p_name']; ?>" name="product_name[]" style="color:#292929;font-size:14px;font-weight:600;display:inline;float:left;border:none;background:transparent;"> X
<input type="text" disabled value="<?php echo $row['qty']; ?>" name="qty[]" style="color:#292929;font-size:14px;font-weight:600;display:inline;float:left;border:none;background:transparent;">
<span><input type="text" disabled value="<?php echo $row['price']; ?>" name="product_name[]" style="color:#292929;font-size:14px;font-weight:600;float:left;display:inline;border:none;background:transparent;"><input type="text" disabled value="<?php echo $row['p_id']; ?>" hidden name="product_id[]" style="color:#292929;font-size:14px;font-weight:600;float:left;display:inline;border:none;background:transparent;"></span>
</li>
<?php } ?>
</ul>
</div>
</div>
Help me to figure out how to align this I have done many techniques like the form-inline bootstrap class but doesn't work for me. Because I am submitting two data at a time so I cant use form-inline class first form is for user details and second for product details and checkout at a time.
The best design can be achieved using tables. This is what tables are used for - representation of data. You can also use <input type="number"> for quantity and update total price accordingly.
DOCS: https://getbootstrap.com/docs/4.5/content/tables/
/*DEMO*/body{padding:2rem}input[type="number"]{max-width:75px}
tbody th,tbody td{vertical-align:middle!important}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="row">
<div class="col-12">
<h4>Cart Total</h4>
<table class="table table-striped table-hover">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Product</th>
<th scope="col">Price</th>
<th scope="col">Quantity</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Lorem Ipsum</td>
<td>1400</td>
<td><input class="form-control form-control-sm" type="number" value="1"></td>
<td>1400</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Dolor Sit Amet</td>
<td>425</td>
<td><input class="form-control form-control-sm" type="number" value="2"></td>
<td>850</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Lorem Lorem</td>
<td>850</td>
<td><input class="form-control form-control-sm" type="number" value="1"></td>
<td>850</td>
</tr>
</tbody>
</table>
</div>
</div>
I think its better to use Table layout or Display Flex or Grid layout.
All the theories below are from w3school,
Table Layout:
The table-layout property defines the algorithm used to lay out table cells, rows, and columns.
The main benefit of table-layout: fixed; is that the table renders much faster. On large tables, users will not see any part of the table until the browser has rendered the whole table. So, if you use table-layout: fixed, users will see the top of the table while the browser loads and renders rest of the table. This gives the impression that the page loads a lot quicker!
Display Flex:
Click here
HTML:
<div> // display:flex, flex-direction:column, justify-content:space-around
<div> // display:flex, flex-direction:row, justify-content:space-around
<div> </div>
<div> </div>
</div>
<div> // display:flex, flex-direction:row, justify-content:space-around
<div> </div>
<div> </div>
</div>
</div>
Grid Layout:
Link here
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
My choice:
There are always different approaches to do a thing, but in the situation, you mention I would prefer to go with display: flex method.
I have an HTML form and I have all the inputs except for the submit button in a table. I centered everything in the table besides except for the submit button, even though I tried numerous things to center it to no avail. Please help me center my submit button under my table with the other inputs!
Here is my HTML page:
<html>
<head>
<link rel="stylesheet" href="Site.css">
<?php include("Header.php"); ?>
</div>
</head>
<body>
<div id="main">
<h1>About</h1>
<form action="Insert.php" method="post">
<table>
<tr>
<td><span>First name:</span></td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<td><span>Last name:</span></td>
<td><input type="text" name="lastname"></td>
</tr>
<tr>
<td><span>Age:</span></td>
<td><input type="number" name="age"></td>
</tr>
</table>
<input type="submit">
</form>
<?php include("Footer.php");?>
</div>
</body>
</html>
And here is my CSS:
body {
font-family: "Trebuchet MS", Verdana, sans-serif;
background-color: #4C875E;
color: #C9C9C9;
}
#main {
padding: 20px;
background-color: #1C404A;
border-radius: 0 4px 4px 4px;
}
h1 {
border-bottom: 3px solid #4C875E;
color: #4C875E;
}
#swag {
left: 0;
line-height: 200px;
margin-top: -100px;
position: absolute;
top: 50%;
width: 100%;
border-bottom: 0;
text-align: center;
color: #BABABA;
}
ul#menu {
padding: 0;
position: relative;
margin: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: #1C404A;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
color: #C9C9C9;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: #e8eef4;
}
#bg {
background: url(assets/banner.jpg) no-repeat center center fixed;
background-size: 100% auto;
}
table {
margin: 0 auto;
}
Try putting it inside your table:
<table>
<tr>
<td><span>First name:</span></td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<td><span>Last name:</span></td>
<td><input type="text" name="lastname"></td>
</tr>
<tr>
<td><span>Age:</span></td>
<td><input type="number" name="age"></td>
</tr>
<tr>
<td colspan='2'><center><input type="submit"></center></td>
</tr>
</table>
FIDDLE
Try this:
<tr>
<td><input type="submit"></td>
</tr>
</table>
Working Example
Try this:
<center><input type="submit"></center>
LIVE DEMO
You should put the input button inside the table in a new rowUse td colspan to merge 2 columns To center the button, use attribute align="center".
Code
<table>
<tr>
<td><span>First name:</span></td>
<td><input type="text" name="firstname"/></td>
</tr>
<tr>
<td><span>Last name:</span></td>
<td><input type="text" name="lastname"/></td>
</tr>
<tr>
<td><span>Age:</span></td>
<td><input type="number" name="age"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit"/></td>
</tr>
</table>
As far as I know there is no exact way to center things in CSS with a single command. However there are some ways that you can do it manually. I would do one of two things. First (forgive me if this seems too simple) I might just add something like & nbsp;& nbsp;& nbsp;& nbsp;& nbsp; in front of the submit button. So that would just add some space in front of it (and it scales pretty nicely if the user zooms in).
The other thing I would do (and probably the better solution) would be to change the width of the parent div (so that it is just wide enough to fit the form) and then get the width of that like so:
parseInt(getComputedStyle(document.getElementById('main')).width)
divide it by two to get the center, then place the button at the center minus half the width of the button:
parseInt(getComputedStyle(getElementById("mySubmitButtonId")).width)
Note: place it using margin-left
In my table I am trying to change the font size. I have tried adding font size in the tag, adding it in the CSS code for the Myposts class, but nothing prevailed. How can I change the font size?
<table width="100%" border="0" class = "Myposts"; align="center" cellpadding="3" cellspacing="1" bgcolor="#686868 " >
<tr>
<td width="6%" align="center" bgcolor="#505050 " ><strong>#</strong></td>
<td width="53%" align="center" bgcolor="#505050 "><strong>Job Description</strong></td>
<td width="15%" align="center" bgcolor="#505050 "><strong>Views</strong></td>
<td width="13%" align="center" bgcolor="#505050 "><strong>Replies</strong></td>
<td width="13%" align="center" bgcolor="#505050 "><strong>Date/Time</strong></td>
</tr>
you can select table cells in CSS
table.Myposts tr td {
font-size: 18px;
}
.Myposts td {
font-size: 20px;
}
example in jsfiddle: http://jsfiddle.net/Wk28Y/
Please don't consider this an answer, just a different way of thinking about the issue. FIDDLE
You could get rid of the "bold" line by making the first row <th> instead of <td>.
Add the css table styling to your Myposts class.
You note in the title that it is php, but I don't see any php tags. So I assume you're passing php to an html page, thus the css styling would still work for you.
HTML
<table class = "Myposts">
<tr>
<td>#</td>
<td>Job Description</td>
<td>Views</td>
<td>Replies</td>
<td>Date/Time</td>
</tr>
</table>
CSS
table {
width: 100%;
border: 0px solid black;
background-color: #686868;
border-spacing: 1px;
}
table td {
background-color: #505050;
color: white;
text-align: center;
font-weight: bold;
padding: 3px;
font-size: 20px;
}
table tr td:nth-child(1) {
width: 6%;
}
table tr td:nth-child(2) {
width: 53%;
}
table tr td:nth-child(3) {
width: 15%;
}
table tr td:nth-child(4) {
width: 13%;
}
table tr td:nth-child(5) {
width: 13%;
}
I'm a self taught coder and usually I can figure out problems for myself but this ones a stubborn one. I'm redesigning a website for my friend and I've successfully coded the mobile version of his site, but the desktop version is proving to be difficult.
The site is a database for a home bar, tracking; Drinkers, Shots, Units and Tabs. The index page is a leaderboard with Drinkers & Last Drink bought. My problem is positioning the Drinkers Ranks on the leaderboard to work across multiple web browsers.
It's meant to look like this: (screenshot)
http://giblets-grave.co.uk/previews/1400x900_GG-desktop_design_final.jpg
The alternating background is something I'm willing to scrap if it makes echoing results easier.
I've tried using tables, divs, ul/li's.. sample of what I used:
<table cellpadding="0" cellspacing="0">
<col width="85px" />
<col width="65px" />
<col width="65px" />
<tr>
<th colspan="3" align="left">Chris Clarkson</th>
</tr>
<tr>
<td>
<div class="crop round-five body-shadow" >
<img src="uploads/1.jpg" class="" />
</div>
</td>
<td>
<ul><h2>382.73</h2><li>units</li></ul><br />
</td>
<td>
<ul><h2>613</h2><li>shots</li></ul><br />
</td>
</tr>
</table>
but its just coming out as a big mess, can anyone help?
Definitely should be using table to do this in my opinion.
As for displaying the alternating colors, you would want to apply a background color to the tr's using nth-child() pseudo-class.
JSFIDDLE: http://jsfiddle.net/XYh7f/
HTML:
<div class="container">
<div class="leaderboard">
<table id="main">
<tr>
<td>Leaderboard</td>
</tr>
<tr>
<td>
<table class="client">
<tr>
<th colspan="3">Chris Clarkson</th>
</tr>
<tr>
<td>IMG</td>
<td>267.26 units</td>
<td>457 shots</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="client">
<tr>
<th colspan="3">Chris Clarkson</th>
</tr>
<tr>
<td>IMG</td>
<td>267.26 units</td>
<td>457 shots</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="drinks">
<table id="main-data">
<tr>
<td class="data-title"><h2>Last Drinks Served</h2></td>
</tr>
<tr>
<table class="data">
<tr>
<td class="data-time">Time</td>
<td class="data-shots">Shots</td>
<td class="data-drink">Drink</td>
<td class="data-drinker">Drinker</td>
<td class="data-date">Date</td>
</tr>
<tr>
<td class="data-time">Time</td>
<td class="data-shots">Shots</td>
<td class="data-drink">Drink</td>
<td class="data-drinker">Drinker</td>
<td class="data-date">Date</td>
</tr>
<tr>
<td class="data-time">Time</td>
<td class="data-shots">Shots</td>
<td class="data-drink">Drink</td>
<td class="data-drinker">Drinker</td>
<td class="data-date">Date</td>
</tr>
</table>
</tr>
</table>
</div>
</div><!-- END CONTAINER -->
CSS:
/* CONTAINER STYLES */
.container {
width: 960px;
}
.leaderboard {
float: left;
}
.drinks {
float: left;
}
/* LEADER BOARD STYLES */
table {
color: #eee;
width: 200px;
background: none;
}
tr { background: none; }
td { background: none; }
#main {
text-align: center;
}
#main tr:nth-child(odd) {
background: #444;
}
#main tr:nth-child(even) {
background: #555;
}
#main tr td .client tr {
background: none;
}
/* LAST DRINKS SERVED STYLES */
#main-data {
width: 740px;
}
#main-data tr:nth-child(odd) {
background: #444;
}
.data {
width: 740px;
}
.data tr:nth-child(odd) {
background: #222;
}
.data td {
border-right: 1px solid #000;
}
.data tr:nth-child(even) {
background: #333;
}
.data-title {
padding: 0 0 0 60px;
}
.data-time {
text-align: right;
width: 120px;
}
.data-shots {
text-align: right;
width: 60px;
}
.data-drink {
text-align: center;
width: 240px;
}
.data-drinker {
text-align: left;
width: 200px;
}
.data-date {
width: 140px;
}
I am working on a web based game. I have made the navigation but the text is not aligned correctly.
HTML
<table width="123" height="253" border="0" align="right" cellpadding="0" cellspacing="2" class="table"> <tr>
<td height="23" class="header">Main Game</td> </tr> <tr>
<td height="65" valign="top" class="cell" align="center"> Homepage Staff Page
</td> </tr> <tr>
<td height="23" class="header">Social</td> </tr> <tr>
<td height="65" valign="top" class="cell">Discussions</td> </tr> <tr>
<td height="23" class="header">LogOut</td> </tr> </table>
CSS
.table {
border:#000000 1px solid; background-color:#363636;
}
.cell {
color:#FFFFFF; padding:3px; background-color:#1C1C1C; align:center;
}
.header {
padding:0px; padding-left:2px; color:#FFFFFF;
background:#3A0D07; font-family:verdana; font-size:10px;
line-height:18px; text-align:left; border-bottom:2px solid;
border-color:#000000; align:center;
}
output
for your code, the anchor tags are displayed inline-block by default
a quick fix for your code is to change the display for the a tags, add the following to your css:
.table .a{
display:block;
}
Instead of tables you should use list item as they render the same in every browser. Also you have better control over if.
HTML
<ul class="nav">
<li>Home</li>
<li>Stuff</li>
<li>About</li>
</ul>
CSS
ul {
list-style-type: none;
}