Ok so first things first. I have searched about this topic and did manage to find this:
Prevent floating DIVs from overlapping footer
However this did not solve my issue. I have also attempted other forms of rewriting the css code I have set but the results would in turn mess up my body content.
My index.php code:
<?php
session_start();
?>
<html>
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>
Shadey Process
</title>
<body>
<?php
include 'includes/header.php';
include 'includes/navigation.php';
?>
<div class="body">
This is the body.
Due to errors beyond my control everything I had worked so hard to do is gone.
</div>
<?php
include 'includes/footer.php';
?>
</body>
</html>My main.css code:
@font-face {
font-family: Kingdom; src: url('../addons/font/Kingdom.ttf');
}
.header {
padding: 20px;
color: red;
text-align: center;
border-bottom-style: solid;
border-bottom-color: green;
font-family: Kingdom;
font-size: 98px;
}
body {
background-color: black;
}
.body {
color: red;
margin-right: 34%;
}
.navlinks {
float: left;
width: 250px;
length: 100%;
background: black;
}
.footer {
float: left;
border-top-style: solid;
border-top-color: green;
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 20px;
color: red;
text-align: center;
clear: both;
}My navigation.php code:
<style>
.btn-group {
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
width: 150px;
display: block;
height: 100%;
border-right-style: solid;
border-right-color: green;
}
.button {
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
width: 80%;
display: block;
}
.btn-group .button:not(:last-child) {
border-bottom: none; /* Prevent double borders */
}
.home {
background-color: black;
border: 1px solid red;
color: red;
}
.home:hover {
background-color: #800000;
border: 1px solid black;
color: white;
}
.forum {
background-color: black; /* Green */
border: 1px solid green;
color: green;
}
.forum:hover {
background-color: #7CFC00; /* Green */
border: 1px solid black;
color: white;
}
.alpha {
background-color: black; /* Green */
border: 1px solid blue;
color: blue;
}
.alpha:hover {
background-color: #0000FF; /* Green */
border: 1px solid black;
color: white;
}
.games {
background-color: black; /* Green */
border: 1px solid yellow;
color: yellow;
}
.games:hover {
background-color: #FFFF00; /* Green */
border: 1px solid black;
color: black;
}
</style>
<div class="btn-group navlinks">
<?php
if($_SESSION['user']==false)
{
echo '
<a href="index.php" class="button home">Home</a>
<a href="forum.php" class="button forum">Forum</a>
<a href="alpha.php" class="button alpha">Alpha</a>
<a href="games.php" class="button games">Games</a>
<a href="includes/login/index.php" class="button home">Login</a>';
}
else{
echo "<font color= 'red'>Glad to have you {$_SESSION["user"]}</font>";
echo '
<a href="index.php" class="button home">Home</a>
<a href="forum.php" class="button forum">Forum</a>
<a href="alpha.php" class="button alpha">Alpha</a>
<a href="games.php" class="button games">Games</a>
<a href="includes/logout/logout.php" class="button forum">Logout</a>';
}
?>
</div>My footer.php
<div class="footer", "container-fluid" style="bottom:0; position:fixed;">
<img style="-webkit-user-select: none;
background-position: 0px 0px, 10px 10px;
background-size: 20px 20px;
background-image:linear-gradient
(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),
linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);"
src="https://multicraft.mcprohosting.com/index.php?r=status/606439.png">
</div>This is the rendered Html after using view source:
<html>
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>
Shadey Process
</title>
<body>
<div class="header">
Shadey Process
</div><style>
.btn-group {
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
width: 150px;
display: block;
height: 100%;
border-right-style: solid;
border-right-color: green;
}
.button {
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
width: 80%;
display: block;
}
.btn-group .button:not(:last-child) {
border-bottom: none; /* Prevent double borders */
}
.home {
background-color: black;
border: 1px solid red;
color: red;
}
.home:hover {
background-color: #800000;
border: 1px solid black;
color: white;
}
.forum {
background-color: black; /* Green */
border: 1px solid green;
color: green;
}
.forum:hover {
background-color: #7CFC00; /* Green */
border: 1px solid black;
color: white;
}
.alpha {
background-color: black; /* Green */
border: 1px solid blue;
color: blue;
}
.alpha:hover {
background-color: #0000FF; /* Green */
border: 1px solid black;
color: white;
}
.games {
background-color: black; /* Green */
border: 1px solid yellow;
color: yellow;
}
.games:hover {
background-color: #FFFF00; /* Green */
border: 1px solid black;
color: black;
}
</style>
<div class="btn-group navlinks">
<a href="index.php" class="button home">Home</a>
<a href="forum.php" class="button forum">Forum</a>
<a href="alpha.php" class="button alpha">Alpha</a>
<a href="games.php" class="button games">Games</a>
<a href="includes/login/index.php" class="button home">Login</a>
</div>
<div class="body">
This is the body.
Due to errors beyond my control everything I had worked so hard to do is gone.
</div>
<div class="footer", "container-fluid" style="bottom:0; position:fixed;">
<img style="-webkit-user-select: none;
background-position: 0px 0px, 10px 10px;
background-size: 20px 20px;
background-image:linear-gradient
(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),
linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);"
src="https://multicraft.mcprohosting.com/index.php?r=status/606439.png">
</div></body>
</html>Any help and/or criticism would be greatly appreciated.
You are trying to include your header file after </body> tag. include the <?php include 'includes/footer.php'; ?> footer withing your <body> tags
<?php
session_start();
?>
<html>
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>
Shadey Process
</title>
<body>
<?php
include 'includes/header.php';
include 'includes/navigation.php';
?>
<div class="body">
This is the body.
Due to errors beyond my control everything I had worked so hard to do is gone.
</div>
<?php
include 'includes/footer.php';
?>
</body>
</html>
Updated (after read Mike's comment)
if still doesn't work this.i think problem is in your footer.php please post your footer.php here or put this code line to your footers div
<div class="container-fluid" style="bottom:0; position:fixed;">
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments