I was wondering how I could make my footer stick to the bottom of the page, no matter how long the page is. I'd include my footer.php file by using include('footer.php') at the bottom of every page. I have already searched for a good answer but nothing I found works because every tutorial assumes you make your footer on every single page instead of including it. Does anyone know what CSS i'd have to use to be able to do this?
Footer HTML:
<html>
<body>
<footer>This is my footer</footer>
</body>
</html>
Index.php example:
<html>
<head>
<?php
include('nav.php');
?>
</head>
<body>
<p>Blah blah blah</p>
<?php
include('footer.php')
?>
</body>
</html>
Thank you
I think your footer.php file should contain only footer element and its content:
<footer>...</footer>
then add to your css:
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; // or any suitable height
display: block;
}
html {
position: relative;
min-height: 100%;
}
I'm not sure, but you may also need to include white space at the bottom of your page content to avoid some of it being blocked by your footer.
I don't think you can close and open the body and the html twice, when you do it like this that's how the html page look like:
<html>
<head>
<?php
include('nav.php');
?>
</head>
<body>
<p>Blah blah blah</p>
<html>
<body>
<footer>This is my footer</footer>
</body>
</html>
</body>
</html>
so you should make the footer like this:
<footer>This is my footer</footer>
</body>
</html>
and your html page like this:
<html>
<head>
<?php
include('nav.php');
?>
</head>
<body>
<p>Blah blah blah</p>
<?php
include('footer.php')
?>
And if I understood you correctly your css should contain position:fixed as you can read here: https://www.w3schools.com/cssref/pr_class_position.asp
Related
I am using a basic html structure for my PDF template together with <htmlpagefooter> according to the mPDF docs.
A sample implementation can be found here
<html>
<head>
<style>
.mydiv {
color: red;
}
</style>
</head>
<htmlpagefooter name="myfooter">
Page {PAGENO} of {nb}
</htmlpagefooter>
<sethtmlpagefooter name="myfooter" value="on" />
<body>
<div class="mydiv">
This is my PDF file
</div>
</body>
</html>
When I generate my PDF it will refuse to show the footer on any page. When I put PHP code inside it will throw an appropriate error proving that it is parsed into the mPDF.
Because you are using a <body> tag inside an <html> tag, you have to make sure your footer is included in code that will be rendered on a page.
When you include the footer outside of the body, it will not be shown in the PDF.
When you include the footer inside the body, it will render as expected.
So a succesfull implementation of a footer in mPDF would look like this;
<html>
<head>
<style>
.mydiv {
color: red;
}
</style>
</head>
<body>
<htmlpagefooter name="myfooter">
Page {PAGENO} of {nb}
</htmlpagefooter>
<sethtmlpagefooter name="myfooter" value="on" />
<div class="mydiv">
This is my PDF file
</div>
</body>
</html>
I am developing a website in php. I have a navigation.php page, a design.php page and a footer.php page. All the three pages have their own internal CSS. I am adding all the three pages in index.php using include command.
Something like this:
index.php :
<?php
include 'navigation.php';
include 'design.php';
include 'footer.php';
?>
But as some of the html elements in navigation.php and footer.php are identical like unordered lists ul or li but their CSS is different in both the files. But when I open index.php page some of the parts of footer.php get messed up due to different CSS for same html elements in navigation.php. But when I open them separately no problem is there.
Pages are like this:
navigation.php:
<style>
....css...
</style>
<body>
<ul>
<li>Home</li>
<li>Sign Up</li>
<li>Log In</li>
</ul>
</body>
footer.php
<style>
...css...
</style>
<body>
<ul>
<li>Privacy Policy</li>
<li>Report Bug</li>
</ul>
</body>
This is just sample code. How can I solve this problem?
I dnt know what is inside your design.php but for index.php try this
<?php include_once( 'header.php');?>
<html lang="en">
<head>
<title>index.php</title>
</head>
<body>
..something....
</body>
<?php include_once('footer.php');?>
</html>
It looks like you are redefining the same styles in your various php files. Try to set a class on the ul element and define your styles for ul, e.g. likle this
header.php
<style>
.header {
color: red;
}
</style>
<ul class="header">
<li>blabla</li>
<li>bla</li>
</ul>
footer.php
<style>
.footer {
color: blue;
}
</style>
<ul class="footer">
<li>aaa</li>
<li>bbb</li>
</ul>
You should also remove the <body> tags from the includes. You can have only one body tag in the html page.
I have created PHP files which accept data from $_GET method.
After that I use all the data I get to create HTML pages. Nothing is wrong with the data but in CSS I cannot style HTML elements. Except when it comes to inline styling, that works but it is not good to maintain.
I try to use like this but it doesn't work , Please Help
THANK IN ADVANCE
Example.php
<?php
$dataCover = $_GET['dataCover'];
$dataTitle = $_GET['dataTitle'];
$dataTag = $_GET['dataTag'];
$dataDir = $_GET['dataDir'];
$dataYear = $_GET['dataYear'];
$dataCreated = $_GET['dataCreated'];
$dataModified = $_GET['dataModified'];
$userAUID = $_GET['userAUID'];
$galleryID = $_GET['galleryID'];
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css" media="all">
#container img{
height: 230px;
width: 200px;
}
#container .center{
display: block;
margin: 0 auto;
}
</style>
<script src="../lib/jquery-1.10.2.min.js"></script>
<script src="../lib/jquery.mobile-1.3.1.min.js"></script>
<script src="../lib/se.js"></script>
</head>
<body>
<div data-role ="page" id ="page1">
<div data-role ="header">
<h1> header </h1>
</div>
<div data-role="content">
<div id="container">
<img class="center" src="<?echo $dataCover?>" alt=""/>
<p id="title"><?echo $dataTitle;?></p>
<p id="tag"><?echo $dataTag;?></p>
<p id="created">Created : <?echo $dataCreated?></p>
<p id="modified">modified : <?echo $dataModified?></p>
View Ebook-Gallery
Bookmark
</div>
</div>
</div>
</body>
</html>
When you move your css from inline to style sheet file, you have to refresh your page with Ctrl+F5. Maybe it's coming from the cache.
Also you can assign your css to the image by jquery.
I dont see any reference to any external stylesheet, so it seems like you have forgotten to do this.
Put this line
<link rel="stylesheet" type="text/css" href="/css/style.css" />
Somewhere in the head. Maybe before the script tags.
Make sure you adjust the path to your stylesheet.
Yes When you want to apply external css you have to give the path after the <title> tags within the <head> tags .just follow the html code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--Here css is the folder name where you have keep the style.css file -->
<script src="../lib/jquery-1.10.2.min.js"></script>
<script src="../lib/jquery.mobile-1.3.1.min.js"></script>
<script src="../lib/se.js"></script>
</head>
I have looked at other posts here regarding similar questions but cannot find an answer.
Edit I have been playing with this and I want to alter my question somewhat.
I am having a problem placing the output that is echoed from an external php file.
Here is some example code to demonstrate my problem - this is my main file writephp.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Php </title>
<link rel="stylesheet" href="writephp.css">
</head>
<body>
<div class="allContent">
<?php for($i=0; $i<3; $i++): ?>
<div class="commentBox">
<p> Just a box</p>
</div>
<?php endfor; ?>
Php output
</div>
</body>
</html>
Now I can center this with css:
.allContent {
width: 400px;
margin-left: auto;
margin-right: auto;
font-family: Arial;
}
.commentBox {
border: 1px solid black;
width: 400px;
padding: 0px 5px 5px 5px;
margin-top: 5px;
}
So in the html file the php writes out boxes which are centered in the page since the php loop is within the "allConent" div.
The anchor envokes an external php file which will echo some more boxes.
That file looks like this and is called write.php (writephp.php is the main file this is called from):
<?php
if (isset($_GET['outputHtml']))
{
echo "<p class='allContent commentBox'>" . "This is from external PHP" . "</p>";
echo "<p class='allContent commentBox'>" . "This is also from external PHP" . "</p>";
include 'writephp.php';
}
But the echoed output from the external php is above the output from the main file -in fact it is placed before the <!doctype html> tag , obviously not good.
the page source looks like this:
<p class='commentBox allContent'>This is from external PHP</p
><p class='allContent commentBox'>This is also from external PHP</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Php </title>
<link rel="stylesheet" href="writephp.css">
</head>
<body>
<div class="allContent">
<div class="commentBox">
<p> Just a box</p>
</div>
<div class="commentBox">
<p> Just a box</p>
</div>
<div class="commentBox">
<p> Just a box</p>
</div>
Php output
</div>
</body>
In general my question would be "how do I place html coming from an external php file anywhere I want on the page? "
<?php
if (isset($_GET['outputHtml']))
{
echo "<p class='commentBox'>" . "This is from external PHP" . "</p>";
echo "<p class='commentBox'>" . "This is also from external PHP" . "</p>";
include 'writephp.php';
}
This in your write.php is not correct, see writephp.php is a complete HTML page with <html> <head> and <body> tags and you are including it after echoing some <p> tags, that won't make your new boxes appear magically inside the body of the page, you would be creating some invalid markup with the two <p> at the beginning of the file followed by the <!DOCTYPE><html> etc...
EDIT
Regarding the update to your question that now reads "How place output from an external php file to a specific place on the page"
As #Robert Seddon-Smith correctly noted in his answer, using include will make the content appear exactly at the point when the call is made, so if you wanted to include your new boxes in your main file then the call to include should be backwards, that is, you should include the content inside the main file, you can use this example to test it:
Modify write.php to just echo the boxes when the $_GET variable is present
<?php
if (isset($_GET['outputHtml']))
{
echo "<div class='commentBox'>" . "This is from external PHP" . "</div>";
echo "<div class='commentBox'>" . "This is also from external PHP" . "</div>";
}
?>
And make the include call in your main file writephp.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Php </title>
<link rel="stylesheet" href="writephp.css">
</head>
<body>
<div id="allContent">
<?php for($i=0; $i<3; $i++): ?>
<div class="commentBox">
<p> Just a box</p>
</div>
<?php endfor; ?>
<?php include 'write.php'?>
Php output
</div>
</body>
</html>
This will include your two new boxes inside the container when you click in the link.
Also you will note that there is nothing special about styling content from an included file, that is because in the end all the markup is rendered as a single HTML page, it doesn't matter if the content is echoed from the main page or the included file, it will obey any rules in your CSS
The problem is that you are not producing the correct content with write.php, probably due to a misunderstanding of what includes actually do.
All the include() function does is take the contents of the included file and parse it as PHP at the point in the file you include it. It has almost the same effect as cutting and pasting the file contents in the same place. Only put in your included file what you might type where it is to be put.
I would rewrite the lot properly so that write.php contains only a function that generates a string of html for your commment boxes:
<?PHP
function commentbox()
{
$output="";
for($i=0; $i<3; $i++)
$output.="<div class='commentBox' id='cb_$i'><p> Just a box</p></div>";
return $output;
}
?>
you include() this at the top of your php file then call its output wherever required by:
echo commentbox();
or, better:
create a footer.php file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Php </title>
<link rel="stylesheet" href="writephp.css">
</head>
<body>
<div id="allContent">
<?PHP echo $content;?>
</div>
</body>
</html>
which you can use with all your projects very easily.
This is used this way:
<?PHP
include("write.php");
$content="whatever";
$content.=commentbox();
$content.="whateverelse";
include("footer.php");
?>
Even though I have deliberately gone to no trouble to format the above code, it is very easy to find where the content is being created and to debug it. Mixed PHP and HTML code is a nightmare to debug even with code-context-colouring. It is also very difficult to find the bit you want to borrow and put somewhere else later.
Firstly, you shouldn't be using the ID "allContent" on two separate elements. IDs are supposed to be unique. Classes can be used for styling multiple elements.
Why not change it to the code below? Is there a reason you want them to be different?
echo '<div class="commentBox"><p>' . 'This is from external PHP' . '</p></div>';
echo '<div class="commentBox"><p>' . 'This is also from external PHP' . '</p></div>';
I'm actually working on a PHP project using MVC structure, including DOCTYPE & HEAD tag via a single file during an output buffering using ob°start().
The problem comes when i wanna declare a min-height property for may page container, in order to stick the footer at the bottem of the page. ob_start() -- ob_get_clean() use seems to forbid browsers to access these properties in time so they can't evaluate height value.
This is my index.php file:
<?php
include_once('global/init.php');
ob_start();
if(isset($_GET['module'])){
$module = dirname(__FILE__).'/modules/'.htmlspecialchars($_GET['module']).'/';
$action = (isset($_GET['action'])) ? htmlspecialchars($_GET['action']).'.php' : 'index.php';
if(!file_exists($module.$action)){
include('global/home.php');
}else{
include($module.$action);
}
}else{
include('global/home.php');
}
$content = ob_get_clean();
include_once('global/header.php');
echo $content;
include_once('global/footer.php');
the header.php file contains the doctype, and the first basics of html:
<html>
<head>
<meta charset='UTF-8' />
<title><?php echo "LiveSession".' '.DOMAIN_INFOS;?></title>
<meta name='description' content='<?php echo $_SESSION['currentDesc'];?>' />
<meta name='keywords' content='<?php echo $_SESSION['currentKWds'];?>' />
<link rel='stylesheet' media='screen and (max-width:480px)' href='css/smartphones.css' />
<!-- TABLETS -->
<script type='text/javascript' src='scripts/jquery.1.7.js'></script>
<script type='text/javascript' src='scripts/poll_edit.js'></script>
<script type='text/javascript' src='scripts/smartphones.js'></script>
</head>
<body>
<div id='page'>
<div id='header'>
<h1><a href='index.php'>InteractivePollSession</a></h1>
<?php
if(is_connected_user()){
echo "<span id='disconnector'><a href='index.php?module=members&action=dscnx' title='disconnect'>Disconnect</a></span>";
}
?>
</div>
<div id='contentWrap'>
the footer:
</div>
<div id='footer'>
<span id='central-footer'>© <a href='http://www.jsteitgen.com'>JSTeitgen</a></span>
</div>
</div>
</body>
And a basic css exemple:
body{height:100%;}
#page{min-height:100%; position:relative;}
#footer{position:absolute; bottom:0; width:100%;}
Does any one know how to fix this using ob_start() ?
Of course, every other CSS rules work fine except this ...
Thank's
JS
The ob_start() is not the problem. The problem is only a html/css problem. You can only use a height in percentage if the parent of the element has a fixed height.
In your case, #page parent is body and the body's height is 100%, so you can't use a height in percentage for #page. But you can try this for example :
body{height: 1000px;}
#page{min-height:100%; position:relative;}
#footer{position:absolute; bottom:0; width:100%;}
I think the problem is with the css; you are setting the body element's height to 100% of its parent, the html element, which does not necessarily have a height of 100%.
You should be able to solve your problem using:
html, body {
height: 100%;
}