Print CSS - Avoid cutting DIV's - html

I am developing an application which generates barcodes, I want to print them but the barcode div is getting cutted in some pages.
CSS:
<style type="text/css">
* {
margin:0px;
}
#cod {
width: 180px;
height: 150px;
padding: 10px;
margin: 10px;
float: left;
border: solid black 1px;
text-align: center;
display: block;
}
</style>
Code:
<? foreach ($this->ouvintes as $ouvinte): ?>
<div id="cod">
<p><?= $ouvinte->nome ?></p>
<p><?= $ouvinte->instituicao ?></p>
<p>Cod. Barras: <?= $ouvinte->codigo_barras ?></p>
<p style="margin-top:5px;"><img src="<?= $this->baseUrl('/index/codigo-barras/code/' . $ouvinte->codigo_barras) ?>" alt="<?= $ouvinte->codigo_barras ?>" /></p>
</div>
<? endforeach; ?>
Does anyone know how could i avoid this cut?
Thanks

How about trying the page-break-after / page-break-before CSS properties?
You could set it up to break after every 9 barcodes like this:
<?
$i = 0;
foreach ($this->ouvintes as $ouvinte):
$i++;
$pageBreakStyle = ($i % 9 == 0) ? ' style="page-break-after:always"' : '';
?>
<div id="cod"<?= $pageBreakStyle ?>>
<p><?= $ouvinte->nome ?></p>
<p><?= $ouvinte->instituicao ?></p>
<p>Cod. Barras: <?= $ouvinte->codigo_barras ?></p>
<p style="margin-top:5px;"><img src="<?= $this->baseUrl('/index/codigo-barras/code/' . $ouvinte->codigo_barras) ?>" alt="<?= $ouvinte->codigo_barras ?>" /></p>
</div>
<? endforeach; ?>

I think the problem is in float:left.. this is a big problem, but you can find some tricks here

I ran into a similar problem... the (only) working solution is to place the barcodes in the table... because multi-paged content really only works (without cutting the content or other problems) with tables.
Try something like this:
<table>
<? foreach ($this->ouvintes as $ouvinte): ?>
<tr id="cod">
<td><?= $ouvinte->nome ?></td>
<td><?= $ouvinte->instituicao ?></td>
<td>Cod. Barras: <?= $ouvinte->codigo_barras ?></td>
<td style="margin-top:5px;"><img src="<?= $this->baseUrl('/index/codigo-barras/code/' . $ouvinte->codigo_barras) ?>" alt="<?= $ouvinte->codigo_barras ?>" /></td>
</tr>
<? endforeach; ?>
</table>

Try setting page-break-inside to avoid:
div {
page-break-inside: avoid;
}

Related

how to select an element in html like <p>

html code
In this html code, I would like to select the element with <p>utilisé 2X</p>
How can I do ?
Thanks a lot
I have tried on the php code to add a class but I don't find it
<?php
while ($query->have_posts())
{
$query->the_post();
?>
<div class="boxannonces">
<h2><?php the_title(); ?></h2>
<p><br /><?php the_excerpt(); ?></p>
<?php
if ( has_post_thumbnail() ) {
echo '<p>';
the_post_thumbnail("small");
echo '</p>';
}
?>
<p><?php the_category(); ?></p>
<p><?php the_tags(); ?></p>
<p class="date"><small><?php the_date(); ?></small></p>
</div>
<hr />
<?php
}
?>
You don't say how you want to select the HTML code. With CSS so you can style it? You also don't say which <p> contains "utilisé 2X".
Just give whichever <p> it is a class and refer to it that way.
<p class="twice">utilisé 2X</p>
.twice {
/* CSS stuff */
}

empty space displaying once we click on button

we have review tab in product page here , please search using CTRL + F for "review"
once we click on "Be the first to review this product", it displaying like this , means complete design is spoiled
<div class="form-add">
<h2><?php echo $this->__('Write Your Own Review') ?></h2>
<?php if ($this->getAllowWriteReviewFlag()): ?>
<form action="<?php echo $this->getAction() ?>" method="post" id="review-form">
<?php echo $this->getBlockHtml('formkey'); ?>
<?php echo $this->getChildHtml('form_fields_before')?>
<h3><?php echo $this->__("You're reviewing:"); ?>
<span><?php echo $this->escapeHtml($this->getProductInfo()->getName()) ?></span>
</h3>
<div class="fieldset">
<?php if( $this->getRatings() && $this->getRatings()->getSize()): ?>
<h4><?php echo $this->__('How do you rate this product?') ?> <em class="required">*</em></h4>
<span id="input-message-box"></span>
<table class="data-table review-summary-table ratings" id="product-review-table">
Because When you click on link you .main-container has .col2-right-layout and default it have .col1-layout.
Your .col-main has float:left and width:75%, so you need to change css or you need to change class name.
Default layout has css:
.col1-layout .col-main {
float: none;
padding: 0;
width: auto;
}
So you need to add css for other page like this:
.review-product-list .col2-right-layout .col-main {
float: none;
padding: 0;
width: auto;
}

Sticky footer is not so sticky

I have a site with a sticky footer, which is not so sticky and I am having a hard time figuring it out.
This is the html part: html.tpl.php
<?php
?>
<!DOCTYPE html>
<head>
<?php $head; ?>
<title><?php print $head_title='Vit | Kringvarp Føroya'; ?></title>
<?php if ($default_mobile_metatags): ?>
<?php endif; ?>
<meta http-equiv="cleartype" content="on">
<?php print $styles; ?>
<?php print $scripts; ?>
<?php if ($add_html5_shim and !$add_respond_js): ?>
<?php elseif ($add_html5_shim and $add_respond_js): ?>
<?php elseif ($add_respond_js): ?>
<?php endif; ?>
</head>
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
<div class="container">
<?php if ($skip_link_text && $skip_link_anchor): ?>
<p id="skip-link">
<a href="#<?php print $skip_link_anchor; ?>" class="element-invisible
element-focusable"><?php print $skip_link_text; ?></a>
</p>
<?php endif; ?>
<?php print $page; ?>
</div>
<?php print $page_footer; ?>
</body>
<?php print $page_bottom; ?>
</div>
</html>
And page.tpl.php part
<div id="navigation">
<?php print render($page['navigation']); ?>
</div>
<header class="header" id="header" role="banner">
<?php $front_page='http://kvf.fo/vit';
if ($logo): ?>
<a href="<?php print $front_page; ?>" title="<?php print
t('Heim'); ?>"
rel="home" class="header__logo" id="logo"><img src="<?php print
$logo; ?
>" alt="<?php print t('Heim'); ?>" class="header__logo-image" />
</a>
<?php endif; ?>
<?php if ($site_name || $site_slogan): ?>
<div class="header__name-and-slogan" id="name-and-slogan">
<?php if ($site_name): ?>
<h1 class="header__site-name" id="site-name">
<a href="<?php print $front_page; ?>" title="<?php print t('Heim');
?>" class="header__site-link" rel="home"><span><?php print
$site_name; ?></span></a>
</h1>
<?php endif; ?>
<?php if ($site_slogan): ?>
<div class="header__site-slogan" id="site-slogan"><?php print
$site_slogan; ?></div>
<?php endif; ?>
</div>
<?php endif; ?>
<?php print render($page['header']); ?>
</header>
<div id="main">
<?php print render($page['content']); ?>
</div>
<?php print render($page['footer']); ?>
<?php print render($page['bottom']); ?>
The css part.
html {
position: relative;
min-height: 100%;
}
body {
height: 100%;
}
.container {
margin: 0 0 125px;
}
#footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
The page adress is www.kvf.fo/vit , and it seems to be working ok, but on an Ipad, the footer "sinks" halfway under the bottom of the screen, which is a bummer because the main users to the site, are Ipad users :/
Any help is much obliged!
If you want your footer to be sticky so add this property in its css
footer {
position: fixed;
}
It seems you're closing the body tag to early:
</div>
<?php print $page_footer; ?>
</body>
<?php print $page_bottom; ?>
</div>

Boxes are tripping if I insert text in them

* RESOLVED BY INTENSE RESEARCHING *
[DOWNLOAD CODE, NO COPYRIGHT =)] .rar file ( always scan before opening .rar - F4LLCON
Problem is that without text the boxes are placed 2 on each row, but with text the boxes
appear under each other with spacing. To get the text in the boxes I used <style> in <head>.
How can I FIX this annoying problem?
IMAGE:
Without the p and h3, both echo text will appear under the box and not in the box
Code:
<style>
p {
position:relative;
top:-240px;
left:180px;
}
h3 {
position:relative;
top:-270px;
left:30px;
}
</style>
and
<div class="offers">
<div class="content_box">
<?php
while($products = mysql_fetch_array($result)) {
echo '<img src="includes/images/content_box.png" border=0/>';
// echo "<h3>" . $products['products'] . "</h3>";
// echo "<p>" . $products['description'] . "</p>";
}
?>
</div>
</div>
RESOLVED BY DOING:
<STYLE TYPE="text/css">
#title{color:red; padding-bottom: 240px; padding-left: 25px;}
#desc{color:blue; padding-bottom: 135px; padding-left: 5px;}
</STYLE>
</head>
and
<div>
<?php while($products = mysql_fetch_array($result)) {?>
<table align="left" background="includes/images/box.gif" width="473" height="285">
<tr>
<td width="35%" height="100%" id="title">
<?php echo $products['products'] . "&nbsp"; ?>
</td>
<td width="70%" height="100%" id="desc">
<?php echo $products['description'];?>
</td>
</tr>
</table>
<?php
}
?>
</div>
</body>
This might be easy for some, but I'm new to this.
Now working correctly.
Thank you for giving me directions and Thank you Google and Stackoverflow for so much help =)
I am asuming that content_box.png is the background for the box right?
instead of including it in a create it in the background of a div with a class like this
CSS:
.product_box {
bacground:url(includes/images/content_box.png);
width:xxxpx; /* the width of conrent_box.png */
height:xxxpx; /* the height of conrent_box.png */
position:relative;
float:left;
}
php:
<?php
while($products = mysql_fetch_array($result)) {
echo '<div class="product_box">';
// echo '<img src="includes/images/content_box.png" border=0/>';
echo "<h3>" . $products['products'] . "</h3>";
echo "<p>" . $products['description'] . "</p>";
echo '</div>';
}
?>
Hope it helps!

Why is this PHP loop rendering every row twice?

I'm working on a real frankensite here not of my own design. There's a rudimentary CMS and one of the pages shows customer records from a MySQL DB.
For some reason, it has no probs picking up the data from the DB - there's no duplicate records - but it renders each row twice.
<?php
$limit = 500;
$area = 'customers_list';
$prc = 'customer_list.php';
if($_GET['page'])
{
include('inc/functions.php');
$page = $_GET['page'];
}
else
{
$page = 1;
}
$limitvalue = $page * $limit - ($limit);
$customers_check = get_customers();
$customers = get_customers($limitvalue, $limit);
$totalrows = count($customers_check);
?>
<!-- pid: customer_list -->
<table border="0" width="100%" cellpadding="0" cellspacing="0" style="float: left; margin-bottom: 20px;">
<tr>
<td class="col_title" width="200">Name</td>
<td></td>
<td class="col_title" width="200">Town/City</td>
<td></td>
<td class="col_title">Telephone</td>
<td></td>
</tr>
<?php
for ($i = 0; $i < count($customers); $i++)
{
?>
<tr>
<td colspan="2" class="cus_col_1"><?php echo $customers[$i]['surname'].', '.$customers[$i]['first_name']; ?></td>
<td colspan="2" class="cus_col_2"><?php echo $customers[$i]['town']; ?></td>
<td class="cus_col_1"><?php echo $customers[$i]['telephone']; ?></td>
<td class="cus_col_2">
<a href="javascript: single_execute('prc/customers.prc.php?delete=yes&id=<?php echo $customers[$i]['customer_id']; ?>')" onClick="return confirmdel();" class="btn_maroon_small" style="margin: 0px; float: right; margin-right: 10px;"><div class="btn_maroon_small_left">
<div class="btn_maroon_small_right">Delete Account</div>
</div></a>
<a href="customer_edit.php?id=<?php echo $customers[$i]['customer_id']; ?>" class="btn_black" style="margin: 0px; float: right; margin-right: 10px;"><div class="btn_black_left">
<div class="btn_black_right">Edit Account</div>
</div></a>
<a href="mailto: <?php echo $customers[$i]['email']; ?>" class="btn_black" style="margin: 0px; float: right; margin-right: 10px;"><div class="btn_black_left">
<div class="btn_black_right">Email Customer</div>
</div></a>
</td>
</tr>
<tr><td class="col_divider" colspan="6"></td></tr>
<?php
};
?>
</table>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--// PAGINATION-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="pagination_holder">
<?php
if($page != 1)
{
$pageprev = $page-1;
?>
Previous
<?php
}
else
{
?>
<div class="pagination_left, page_grey">Previous</div>
<?php
}
?>
<div class="pagination_middle">
<?php
$numofpages = $totalrows / $limit;
for($i = 1; $i <= $numofpages; $i++)
{
if($i == $page)
{
?>
<div class="page_number_selected"><?php echo $i; ?></div>
<?php
}
else
{
?>
<?php echo $i; ?>
<?php
}
}
if(($totalrows % $limit) != 0)
{
if($i == $page)
{
?>
<div class="page_number_selected"><?php echo $i; ?></div>
<?php
}
else
{
?>
<?php echo $i; ?>
<?php
}
}
?>
</div>
<?php
if(($totalrows - ($limit * $page)) > 0)
{
$pagenext = $page+1;
?>
Next
<?php
}
else
{
?>
<div class="pagination_right, page_grey">Next</div>
<?php
}
?>
</div>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--// END PAGINATION-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
I'm not the world's best PHP expert but I think I can see an error in a for loop when there is one... But everything looks ok to me. You'll notice that the customer name is clickable; clicking takes you to another page where you can view their full info as held in the DB - and for both rows, the customer ID is identical, and manually checking the DB shows there's no duplicate entries. The code is definitely rendering each row twice, but for what reason I have no idea.
All pointers / advice appreciated.
Like jayrub wrote, StackOverflow is probably more appropriate for this.
But since you've already asked it, I'll make these recommendations:
1.) Use foreach() to look through arrays like this:
foreach ($customers as $i => $customer) {
echo $customer['name'];
...
}
2.) Use var_dump() as Zoredache suggests, on $customers and $customers_check.
3.) Use semantic markup; so, for tables, you'll want something like:
<table>
<thead>
<tr>
<th>Name</th>
<th>Town</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<!-- your php code here -->
</tbody>
</table>
This will make it easier for screen readers and also make it easier to use certain scripts to generate rich web interfaces. See this page for more info: http://www.ferg.org/section508/accessible_tables.html
4.) Oh, and avoid inline CSS as much as possible. It's just bad form.
Try the following, this is an updated version of your code.
Please read the comments that I made in it, this is just a sample of some good practices.
<?php
$limit = 500;
$area = 'customers_list';
$prc = 'customer_list.php';
if($_GET['page'])
{
include('inc/functions.php');
$page = (int)$_GET['page']; // safety (page always needs to be an integer
}
else
{
$page = 1;
}
$limitvalue = $page * $limit - ($limit);
$customers_check = get_customers();
$customers = get_customers($limitvalue, $limit);
$totalrows = count($customers_check);
?>
<!-- pid: customer_list -->
<table border="0" width="100%" cellpadding="0" cellspacing="0" style="float: left; margin-bottom: 20px;">
<tr>
<td class="col_title" width="200">Name</td>
<td></td>
<td class="col_title" width="200">Town/City</td>
<td></td>
<td class="col_title">Telephone</td>
<td></td>
</tr>
<?php
foreach($customers as $i => $customer) // foreach is easier to use, manage and troubleshoot
{
?>
<tr>
<td colspan="2" class="cus_col_1"><?php echo $customer['surname'].', '.$customer['first_name']; ?></td>
<td colspan="2" class="cus_col_2"><?php echo $customer['town']; ?></td>
<td class="cus_col_1"><?php echo $customer['telephone']; ?></td>
<td class="cus_col_2">
<a href="javascript: single_execute('prc/customers.prc.php?delete=yes&id=<?php echo $customer['customer_id']; ?>')" onClick="return confirmdel();" class="btn_maroon_small" style="margin: 0px; float: right; margin-right: 10px;"><div class="btn_maroon_small_left">
<div class="btn_maroon_small_right">Delete Account</div>
</div></a>
<a href="customer_edit.php?id=<?php echo $customer['customer_id']; ?>" class="btn_black" style="margin: 0px; float: right; margin-right: 10px;"><div class="btn_black_left">
<div class="btn_black_right">Edit Account</div>
</div></a>
<a href="mailto: <?php echo $customer['email']; ?>" class="btn_black" style="margin: 0px; float: right; margin-right: 10px;"><div class="btn_black_left">
<div class="btn_black_right">Email Customer</div>
</div></a>
</td>
</tr>
<tr><td class="col_divider" colspan="6"></td></tr>
<?php
}
?>
</table>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--// PAGINATION-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="pagination_holder">
<?php
if($page != 1)
{
$pageprev = $page-1;
?>
Previous
<?php
}
else
{
?>
<div class="pagination_left, page_grey">Previous</div>
<?php
}
?>
<div class="pagination_middle">
<?php
$numofpages = $totalrows / $limit;
if(($totalrows % $limit) != 0) // using this avoids the second for-loop (avoids redundant code)
$numofpages++;
for($i = 1; $i <= $numofpages; $i++)
{
if($i == $page)
{
?>
<div class="page_number_selected"><?php echo $i; ?></div>
<?php
}
else
{
?>
<?php echo $i; ?>
<?php
}
}
?>
</div>
<?php
if(($totalrows - ($limit * $page)) > 0)
{
$pagenext = $page+1;
?>
Next
<?php
}
else
{
?>
<div class="pagination_right, page_grey">Next</div>
<?php
}
?>
</div>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--// END PAGINATION-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->