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;
}
Related
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.
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.
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; }
So I created a wordpress and on that wordpress I made a custom template.
The custom template shows up fine, But when I try to add plugins or text to my custom template via the wordpress dashboard nothing shows up. Its not adding it to the code or adding it to the page.
Below are some pic of what I mean.
This is the wordpress dashboard where I am adding at, As you can see my template is MainTest which I made myself and works perfect
SS of the Wordpress Dashboard
Now this is the SS of the page, As you can see the words test test test are not showing up anywhere.
This is the SS of the page
Here is the code for the MaintTest template page
<?php
/*
Template Name: MainTest
*/
?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="wp-content/themes/iribbon/newaddons/animate.css">
<link rel="stylesheet" type="text/css" href="wp-content/themes/iribbon/newaddons/newstyle.css">
<script type='text/javascript' src='rotate.js'></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="Fancy/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="Fancy/source/jquery.fancybox.pack.js?v=2.1.5"></script>
</head>
<body>
<div class='container-fill'>
<?php include 'wp-content/themes/iribbon/newaddons/header.php'; ?>
<?php include 'wp-content/themes/iribbon/newaddons/footer.php'; ?>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</body>
</html>
And here is the CSS that controls it. Yes I understand my CSS looks sloppy.
#midbar {
background-color: #FFFFFF;
height: 115px;
margin: 0 auto;
opacity: 0.9;
position: relative;
top: 0px;
width: 1200px;
z-index: 1111;
}
#midbar img {
position: absolute;
top: -20px;
left:50%;
margin-left: -160px;
width: 300px;
height: 200px;
min-height: 50px;
min-width: 250px;
vertical-align: middle;
z-index: 2222;
opacity:4.0;
}
.top {
position: relative;
top: -20px;
width: 100%;
height: 115px;
background-color: #FFFFFF;
z-index: 3333;
opacity: 0.9;
margin: 0 auto;
width: 100%;
}
#navigation {
border-bottom-style: dotted;
border-top-style: dotted;
border-width: 2px;
left: 0;
position: absolute;
top: 45px;
}
#navigation ul li {
position: relative;
display:inline-block;
margin:0 23px 0 0;
z-index: 3333;
}
#navigation ul li a {
padding-left:15px;
text-decoration: none;
text-align: center;
padding-right:15px;
color:#000000;
display:block;
font-family: 'Gentium Book Basic', serif;
font-size:18px;
}
#navi {
border-bottom-style: dotted;
border-top-style: dotted;
border-width: 2px;
position: absolute;
right: 0;
top: 45px;
}
#navi ul li {
position: relative;
display:inline-block;
margin:0 23px 0 0;
z-index: 3333;
}
#navi ul li a {
padding-left:15px;
text-decoration: none;
text-align: center;
padding-right:15px;
color:#000000;
display:block;
font-family: 'Gentium Book Basic', serif;
font-size:18px;
}
#slideshow{
width: 100%;
height: 100%;
}
#slideshow{
-webkit-animation: cssAnimation 8s 16 ease-in-out;
-moz-animation: cssAnimation 8s 16 ease-in-out;
-o-animation: cssAnimation 8s 16 ease-in-out;
}
#-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(0deg) scale(1.1) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(0deg) scale(1.3) skew(1deg) translate(0px); }
}
#-moz-keyframes cssAnimation {
from { -moz-transform: rotate(0deg) scale(1.1) skew(1deg) translate(0px); }
to { -moz-transform: rotate(0deg) scale(1.3) skew(1deg) translate(0px); }
}
#-o-keyframes cssAnimation {
from { -o-transform: rotate(0deg) scale(1.1) skew(1deg) translate(0px); }
to { -o-transform: rotate(0deg) scale(1.3) skew(1deg) translate(0px); }
}
#imgholder {
position: relative;
top: -150px;
width: 100%;
height: 500px;
overflow: hidden;
}
#social {
position: relative;
width: 20%;
top: 30px;
margin-left: auto;
margin-right: auto;
}
#social .fb {
position: relative;
left: -5%;
}
#social .pin {
position: relative;
left: 0%;
}
#social .tweet{
position: relative;
left: 5%;
}
#foot {
width: 100%;
height: 200px;
position: absolute;
margin-right: auto;
margin-left: auto;
bottom: 0;
background-color: #FFFFFF;
margin:0;
text-align: center;
font-size: 12px;
}
#pics {
width: 100%;
height: 300px;
position: relative;
top: -100px;
margin-right: auto;
margin-left: auto;
}
#pics .ball {
position: relative;
vertical-align: middle;
left: 140px;
border: 2px solid #03acfb;
box-shadow: 0 8px 6px -4px #000000;
}
#pics .light {
position: relative;
left:165px;
vertical-align: middle;
border: 2px solid #03acfb;
box-shadow: 0 8px 6px -4px #000000;
}
#pics .car {
position: relative;
left: 190px;
vertical-align: middle;
border: 2px solid #03acfb;
box-shadow: 0 8px 6px -4px #000000;
}
#piccon {
width: 1400px;
height: 300px;
position: relative;
margin-right: auto;
margin-left: auto;
min-width: 800px;
}
#rotating-item-wrapper {
position: absolute;
width: 1940px;
height: 347px;
top: 60px;
z-index: 8888;
left: 0;
}
.rotating-item {
display: none;
position: absolute;
top: 0;
left: 0;
}
body {
overflow: hidden;
}
#mainabout img {
width: 100%;
height: 100%;
}
#maintext {
width: 800px;
min-width: 300px;
height: 600px;
min-height: 300px;
position: absolute;
top: 175px;
left: 40%;
margin-right: -250px;
text-align: center;
font-size: 18px;
}
#mainabout {
background-color: green;
position: absolute;
left: 40%;
margin-left: -650px;
top: 155px;
width: 600px;
height: 500px;
min-height: 600px;
}
.hidden {
display: none;
}
.images {
width: 50%;
position: relative;
top: 300px;
height: 300px;
display: block;
}
.images img {
width: 30%;
height: 60%;
}
Please note, The css controls more then just this page thats why there is so much in it.
The reason for no content showing up is because you are not including the loop in your html body. See the codex for further details: http://codex.wordpress.org/The_Loop
Here is an example with the presentation separated from the logic which will allow you to have more control over the DOM.
<body>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- This will output the title of your page-->
<div class="page-header">
<h1><?php the_title(); ?></h1>
</div>
<!-- the_content() function is required to output "test test test" -->
<?php the_content(); ?>
<?php endwhile; else: ?>
<!-- If there is an error, this 404 message will be displayed-->
<div class="page-header">
<h1>Oh no!</h1>
</div>
<p>No content is appearing for this page!</p>
<?php endif; ?>
</body>
Also, you should be calling your header and footer with the following functions:
Header: http://codex.wordpress.org/Function_Reference/get_header
<?php get_header(); ?>
Footer: http://codex.wordpress.org/Function_Reference/get_footer
<?php get_footer(); ?>
You should add the loop to get the things that should be on the page. It's also reffered to as The Loop. Below the easiest example: show the content or say the page couldn't be found.
Insert that between your header and footer and you should be fine.
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
the_content();
endwhile; else:
print('<p>Sorry, this page couldn`t be found.</p>');
endif;
?>
I have the following CSS
.jScrollPaneContainer {
position: relative;
overflow: hidden;
z-index: 1;
}
.jScrollPaneTrack {
position: absolute;
right: 50%;
top: 0;
height: 100%;
}
.jScrollPaneDrag {
position: absolute;
overflow: hidden;
}
.jScrollPaneDragTop {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.jScrollPaneDragBottom {
position: absolute;
bottom: 0;
left: 0;
overflow: hidden;
}
.scroll-pane {
width: 100%;
height: 100%;
display:block;
overflow: auto;
}
a.jScrollArrowUp {
display: block;
position: absolute;
z-index: 1;
top: 0;
right: 50%;
text-indent: -2000px;
overflow: hidden;
height: 9px;
}
a.jScrollArrowDown {
display: block;
position: absolute;
z-index: 1;
bottom: 0;
right: 50%;
text-indent: -2000px;
overflow: hidden;
height: 9px;
}
.jScrollPaneTrack {
background: url(/images/track.gif) repeat-y;
}
.jScrollPaneDrag {
background: url(/images/drag_middle.gif) no-repeat 0 50%;
}
.jScrollPaneDragTop {
background: url(/images/drag_top.gif) no-repeat 0 0;
height: 4px;
}
.jScrollPaneDragBottom {
background: url(/images/drag_bottom.gif) no-repeat 0 0;
height: 4px;
}
a.jScrollArrowUp {
height: 11px;
background: url(/images/arrow_up.gif) no-repeat 0 0;
cursor:default;
}
a.jScrollArrowUp:hover {
background-position: 0 -11px;
}
a.jScrollArrowDown {
height: 11px;
background: url(/images/arrow_down.gif) no-repeat 0 0;
cursor:default;
}
a.jScrollArrowDown:hover {
background-position: 0 -11px;
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
background-position: 0 -22px;
}
This is where I load the css stylesheet in my classic asp code which is in the head of the html:
<link href="/css/jScrollPane.css" type="text/css" rel="stylesheet" media="all" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.mousewheel.js"></script>
<script type="text/javascript" src="/scripts/jScrollPane.js"></script>
<script type="text/javascript">
$(function()
{
// this initialises the demo scollpanes on the page.
$('#pane1').jScrollPane({showArrows:true, scrollbarWidth:11, scrollbarMargin:0});
$('#pane2').jScrollPane({showArrows:true, scrollbarWidth:11, scrollbarMargin:0});
$('#pane3').jScrollPane({showArrows:true, scrollbarWidth:11, scrollbarMargin:0});
$('#pane4').jScrollPane({showArrows:true, scrollbarWidth:11, scrollbarMargin:0});
$('#pane5').jScrollPane({showArrows:true, scrollbarWidth:11, scrollbarMargin:0});
$('#pane6').jScrollPane({showArrows:true, scrollbarWidth:11, scrollbarMargin:0});
});
</script>
<script>
Can someone explain to me why it takes about 50 secs to load the drag-*.gifs and the arrow up and down gifs. Im really confused on why it takes so long to load simple images. Could this be a cache issue? Here is an image for the results I got from my webpage.
Multiple HTTP requests can really slow down a web page loading time. Have a look at this CSS sprites tutorial for an idea of how you can get dramatic speed improvements.