My apologies, first time I’ve posted to a forum, and I wasn’t sure how to post code. I didn’t post the whole code of the page, but I’ll do that below. Thank you for your reply. You can view one of the pages I’m working on at: http://www.fespauk.com/services/training.php here it shows the white footer is at the top behind the “Text to go here” section, and its should be at the bottom of the page.
CSS Code
@charset "utf-8";
/* CSS Document */
/* FRONT PAGE START */
.logo {
position: fixed;
top: 40px;
left: 40px;
width: 387px;
height: 131px;
display: block;
Padding: 10px;
background-color: white;
text-align: center;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* Navigation Start */
.navigation {
position: fixed;
top: 50%;
width: 100%;
height: 200px;
text-align: center;
opacity: 0.75;
background-image: url("website_union_jack_blurred.png");
background-repeat: no-repeat;
}
.navbox {
float: left;
width: 20%;
text-align: center;
display: inline-block;
color: white;
font-weight: bold;
padding-top: 15px;
opacity: 1;
}
.navboxedge {
float: left;
width: 10%;
text-align: center;
display: inline-block;
}
.navboxtitle {
font-size: 22px;
}
.navtitle1 {
position: absolute;
top: -300px;
right: 100px;
opacity: 0;
transition: opacity 0.2s ease-in-out;
align-z: 20;
font-size: 60px;
color: red;
}
.logoWrap1:hover .navtitle1 {
opacity: 1;
}
.navtitle2 {
position: absolute;
top: -300px;
right: 100px;
opacity: 0;
transition: opacity 0.2s ease-in-out;
align-z: 20;
font-size: 60px;
color: red;
}
.logoWrap2:hover .navtitle2 {
opacity: 1;
}
.navtitle3 {
position: absolute;
top: -300px;
right: 100px;
opacity: 0;
transition: opacity 0.2s ease-in-out;
align-z: 20;
font-size: 60px;
color: red;
}
.logoWrap3:hover .navtitle3 {
opacity: 1;
}
.navtitle4 {
position: absolute;
top: -300px;
right: 100px;
opacity: 0;
transition: opacity 0.2s ease-in-out;
align-z: 20;
font-size: 60px;
color: red;
}
.logoWrap4:hover .navtitle4 {
opacity: 1;
}
/* Navigation End */
/* Special Effects Start */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:0.75; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:0.75; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:0.75; } }
.fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.fade-in.two {
-webkit-animation-delay: 1.3s;
-moz-animation-delay: 1.3s;
animation-delay: 1.3s;
}
/* Special Effects End */
/* Strapline Start */
#frontstrap {
position: fixed;
bottom: 30px;
width: 100%;
display: block;
text-align: center;
color: white;
font-weight: bold;
font-size: 30px;
}
/* Strapline End */
/* FRONT PAGE END */
/* OTHER PAGES */
/* Top Navigation start */
*, *:before, *:after{
padding: 0;
margin: 0;
z-index: 10;
}
nav{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: fixed;
font-family: 'Lato', sans-serif;
top: 0;
left: 0;
width: 100%;
background: #fff;
box-shadow: 0 3px 10px -2px rgba(0,0,0,.5);
border: 1px solid rgba(0,0,0,.5);
z-index: 15;
}
nav ul{
list-style: none;
position: relative;
float: right;
margin-right: 100px;
display: inline-table;
z-index: 15;
}
nav ul li{
float: left;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
nav ul li:hover{background: rgba(201, 225, 242,.75);}
nav ul li:hover > ul{display: block;}
nav ul li{
float: left;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
nav ul li a{
display: block;
position: relative;
padding: 30px 10px;
color: #222;
font-size: .9em;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
z-index: 15;
}
nav ul ul{
display: none;
background: #fff;
position: absolute;
top: 100%;
box-shadow: -3px 3px 10px -2px rgba(0,0,0,.1);
border: 1px solid rgba(0,0,0,.1);
z-index: 15;
}
nav ul ul li{float: none; position: relative;}
nav ul ul li a {
padding: 15px 10px;
border-bottom: 1px solid rgba(0,0,0,.05);
z-index: 15;
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
z-index: 15;
}
/*| Top Image |*/
.topofpage {
display: block;
position: relative;
width: 100%;
height: 100px;
z-index: 15;
}
/* Top Navigation end */
/* Page Body Start */
.topimage {
position: relative;
top: -25px;
Width: 100%;
height: 90px;
background-image: url("website_union_jack_blurred.png");
background-repeat: no-repeat;
padding:0;
margin:0;
border: 1px solid rgba(0,0,0,.5);
overflow: hidden;
z-index: 5;
}
.toptext {
display: table;
position: relative;
top: 10px;
margin: 0 auto;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
font-size: 400%;
font-weight: 700;
color: white;
/* text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15); */
}
.pagecontent {
display: block;
position: relative;
width: 100%;
height: auto;
z-align: 5;
}
.pageleft {
position: absolute;
top: 10px;
left: 10px;
background:white;
text-align: left;
font-size: 24px;
width:35%;
padding: 10px;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-align: 5;
}
.pageright {
position: absolute;
bottom: 10px;
right: 24px;
border-radius: 20px;
width: 450px;
background: rgba(0, 0, 0, 0.7);
color: white;
text-align: left;
padding: 10px;
font-size: 20px;
font-weight: bold;
z-align: 5;
}
/* Page Body Ends */
/* Page Footer Start */
.fa {
padding: 10px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
.fa-instagram {
background: #125688;
color: white;
}
.footer {
width:100%;
height: 150px;
background-color: white;
display: block;
}
.leftfooter {
float: left;
display: inline-block;
background: white;
}
.fespaltd {width: 150px; text-align: left;}
.address {width: 475px; text-align: left;}
.social {width: 275px; text-align: left;}
.emailfooter {font-size: 30px; text-decoration: none; color: black;}
.links {width: 200px; height: 100px; position: inline-block;}
/* Page Footer Ends */
/* OTHER PAGES END */
HTML CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
<!--
body {
padding:0;
margin:0;
background: url(background_taxcredits.jpg) no-repeat center center fixed;
}
-->
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<link href="../fespauk2019.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php include('../include/2019_header.php'); ?>
<div class="topimage">
<span class="toptext" align="center">Training</span>
</div>
<div class="pagecontent">
<div class="pageleft">
<p>Text to go here.</p>
</div>
<div class="pageright">
"Quote." - Company
</div>
</div>
<div class="footer">
<div class="leftfooter fespaltd"><img src="http://www.fespauk.com/app/images/fespa-member-19.png" width="120" height="150" align="left" alt=""/></div>
<div class="leftfooter address"><br><br>
FESPA UK Association, Innovation Way, Barnsley, S75 1JL
<br />
Copyright 2019 FESPA UK Association (unless otherwise stated)
<br />
Company number: 00475170 | VAT number: GB 232 5947 58
<br />
Click to read our: Cookie Policy & Privacy Policy
</div>
<div class="leftfooter social"><br>
<a href="mailto:info@fespauk.com" class="emailfooter">info@fespauk.com</a><br><br>
<a href="https://twitter.com/fespauk" class="fa fa-twitter"></a>
<a href="https://www.youtube.com/user/fespaukassociation" class="fa fa-youtube"></a>
<a href="https://www.instagram.com/fespauk/" class="fa fa-instagram"></a>
<a href="https://www.linkedin.com/company/fespa-uk-association" class="fa fa-linkedin"></a>
</div>
<div class="leftfooter links"><br><br>
<img src="http://www.fespauk.com/images-adverts/advert_augustus.gif" width="190" height="100" boarder="0" alt="Augustus Martin">
</div>
<div class="leftfooter links"><br><br>
<img src="http://www.fespauk.com/images-adverts/advert_theprintingcharity.png" width="190" height="38" boarder="0" alt="The Printing Charity" style="padding-top: 31px;">
</div>
</div>
</body>
</html>