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.
Related
want to create same design for invoice footer in mpdf
i have already tried almost hundred of code but not working in mpdf.
Does any other pdf library in php support css for this kind of design? Code example appreciated.
<style>
.content {
width: 100%;
background-color: white;
}
.diagonal {
border-top: 90px solid #243A53;
border-right: 28px solid white;
height: 0;
width: 50%;
display: inline-block;
float: left;
position: fixed;
bottom: 0;
top:-10%;
z-index: -1;
}
.diagonal1 {
border-bottom: 35px solid orange;
border-left: 25px solid white;
height: 0;
width: 43%;
display: inline-block;
float: right;
position: fixed;
bottom: 0%;
margin-top:52px;
z-index: -1;
}
<style>
<body>
<div class="content" style="position: absolute;bottom: 0">
<div class="diagonal" >
</div>
<div class="diagonal1" ></div>
</div>
<body>
This is what I've got but this doesn't solve the problem for different devices and screen sizes.
<html>
<body>
<iframe src="FILE LINK" width="1920" height="1080"></iframe>
</body>
</html>
How do I make it full screen? I've tried width: 100%; height: 100%
For reaching fullscreen in this case you need to use height: 100vh;, width: 100%;
body {
margin: 0;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.landing {
width: 100%;
height: 100vh;
}
.image-list {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
height: 100vh;
border: 6px solid #00f;
overflow: hidden;
}
.image-list .image {
border: 6px solid #f00;
width: 100%;
height: 400px;
background-size: cover;
background-position: center center;
height: 100vh;
}
.centered-element {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: #fff;
padding: 1rem;
width: 280px;
}
.centered-element ul {
margin: 0;
padding: 0;
list-style: none;
}
.centered-element ul span {
opacity: 0.4;
}
<!-- body -->
<section class='landing'>
<ul class='image-list'>
<li class='image'
style='background-image: url(https://unsplash.it/1600/1600)'>
</li>
<li class='image'
style='background-image: url(https://unsplash.it/1600/1800)'>
</li>
<li class='image'
style='background-image: url(https://unsplash.it/1600/1700)'>
</li>
</ul>
</section>
<!-- /body -->
Well, a simple snippet like the following one did the trick for me:
body {
height: 100%;
width: 100%;
margin: 0;
padding: 5px;
box-sizing: border-box;
}
html {
height: 100%;
}
<iframe src="#" width="100%" height="100%"></iframe>
Just play with the containers.
You should of course set your own container sizes to 100% and not html and body.
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; }
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;
}
I am fetching data images from database and wish to place maximum 3 images in a single row and these images also have hover effect on them which is working fine
problem that i am facing is that if i am using this code to display static images then it is working fine but if i fetch the data from database then it is not displaying properly. i want to display images in this form
1st_image 2nd_image 3rd_image
4th_image 5th_image 6th_image
7th_image .. and so on
but i am getting images in this form
1st_image
2nd_image
3rd_image
4th_image
5th_image
6th_image
The code that i have is
code of my front page is
<?php
$sql = "SELECT * FROM category";
$result = mysqli_query($con, $sql);
if (mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_assoc($result))
{
$catname=$row["catname"];
$catdesc=$row["catdesc"];
$catpic=$row["catpic"];
$id=$row["id"];
?>
<div id="effect-2" class="effects clearfix">
<div class="img">
<img src="<? echo $catpic; ?>" alt="">
<div class="overlay">
content
<a class="close-overlay hidden">x</a>
</div>
</div>
</div>
<?}
}?>
code on css page is
nav ul {
list-style-type: none;
margin: 0 0 30px 0;
padding: 0;
text-align: center;
}
nav ul li {
display: inline-block;
margin-bottom: 4px;
}
nav ul li a {
display: block;
padding: 5px 20px;
color: #fff;
background-color: #32c896;
}
nav ul li a:hover {
color: #fff;
background-color: #238b68;
}
nav ul li a.active {
color: #fff;
background-color: #238b68;
}
.effects {
padding-left: 15px;
}
.effects .img {
position: relative;
float: left;
margin-bottom: 5px;
width: 25%;
overflow: hidden;
}
.effects .img:nth-child(n) {
margin-right: 5px;
}
.effects .img:first-child {
margin-left: -15px;
}
.effects .img:last-child {
margin-right: 0;
}
.effects .img img {
display: block;
margin: 0;
padding: 0;
max-width: 100%;
height: auto;
}
.overlay {
display: block;
position: absolute;
z-index: 20;
background: rgba(0, 0, 0, 0.8);
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
a.close-overlay {
display: block;
position: absolute;
top: 0;
right: 0;
z-index: 100;
width: 45px;
height: 45px;
font-size: 20px;
font-weight: 700;
color: #fff;
line-height: 45px;
text-align: center;
background-color: #000;
cursor: pointer;
}
a.close-overlay.hidden {
display: none;
}
a.expand {
display: block;
position: absolute;
z-index: 100;
width: 60px;
height: 60px;
border: solid 5px #fff;
text-align: center;
color: #fff;
line-height: 50px;
font-weight: 700;
font-size: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
}
#effect-2 .overlay {
top: 0;
left: 0;
right: 0;
width: 100%;
height: 0;
}
#effect-2 .overlay a.expand {
left: 0;
right: 0;
top: 50%;
margin: -30px auto 0 auto;
}
#effect-2 .img.hover .overlay {
height: 100%;
}
can anyone tell me how to do so
You should use unique ids in your html. I recommend to always use classes instead of id. You can do something like this in your CSS
div[id^="tocolor-"] {
/* some css rules */
}
div[id^="tocolor-"] .overlay {
/* some css rules */
}
And in your html you can add an id using database table id like this
<div id="effect-<?php echo $id; ?>" class="effects clearfix">
Why not use bootstrap and use col-xs-4 class...which will make sure you always have 3 columns
<div id="effect-2" class="col-xs-4">
<div class="img">
<img src="<? echo $catpic; ?>" alt="">
<div class="overlay"> content
<a class="close-overlay hidden">x</a>
</div>
</div>
</div>