Jump to content

Moving Footer


0perator

Recommended Posts

Website is made for a charity, but I can't seem to get the footer to stay at the bottom of the page. I don't want it so it stays at the bottom of the frame because then it just stays static when you scroll, but at the moment it is suspended in the middle of the page, but in my 800 x 600 resolution it looks fine! Just doesn't in anything else :( major frustration, can anyone help please?

 

Footer HTML:

 

</div>
	</div>
	<div class="clearfooter">
	<div id="footer">
	<p><a href="http://www.cqc.org.uk/guidanceforprofessionals/socialcare/careproviders/inspection/ratingsandreports/qualityratings/ratingsrules.cfm#2">CQC Regulatory Body</a>  • 
		<a href="http://62.73.173.233/CSCI/DCA/20/ES0000072120.V2000008163.R01.S.pdf">View Our Report</a>  • 
		<a href="cons.html">Newsletter</a>  • 
		<a href="contact.html">Contact</a><br>
		Company Registration Number: 6490650   •  VAT Number Issued: 724545240</p>
	</div>

</body>
</html>

 

CSS:

 

* {
border:0;
margin:0;
padding:0;
}
.left {
float:left;
padding:0 10px 0 0;
}
.right {
float:right;
padding:0 0 0 10px;
}
a {
color:#01a5ec;
text-decoration:none;
}
a:hover {
color:#666;
text-decoration:underline;
}
p {
padding:0 0 10px;
}
.clearer
{
clear: both;
display: block;
height: 1px;
margin-bottom: -1px;
font-size: 1px;
height: 100%;
line-height: 1px;
}

html
{
	height: 100%;
}

body
{
	min-height: 100%;
}

#content, main
{
	position: relative;
	min-height: 100%;
}

* html #page
{
	height: 100%;
}

#footer
{
	position: absolute;
	bottom: 0;
}
/* body */
html, body {
background:#0070b8 url('images/background_body.jpg') center repeat-y;
color:#666;
height: auto;
font:12px "Trebuchet ms", Helvetica, sans-serif;
}

/* header */
#header {
background:#0070b8 url('images/background_header.jpg') center no-repeat;
height:100px;
margin:0 auto;
width:548px;
}
#header h1 {
color:#fff;
display:block;
font:32px "Trebuchet MS",Verdana,sans-serif;
padding:50px 0 0 25px;
}
.clearfooter {
   height: 4em;
   clear: both;
}
.dent{
padding-left: 25px;
}
#header h1 span {
color:orange;
}

/* content */
#content {
margin:0 auto;
width: 550px;
        height: auto !important;
        height: 100%;
        margin-bottom: -50px;
        position: relative;
}
#content h1 {
color:#01a5ec;
font:18px Verdana,sans-serif;
margin:15px 0 5px 0;
}
#main {
float:left;
padding:10px 10px 0 10px;
/*width:335px;*/
height: 100%;
position:relative;
}
#sidebar {
width:160px;
float:right;
padding:15px;
}
#sidebar .navigation {
list-style:none;
}
#sidebar .navigation li {
list-style:none;
}

/* footer */
#block{
height: auto;
}
#footer {
background:url('images/background_footer.jpg') center no-repeat;
clear:both;
        position: relative;
bottom:0;
height:50px;
margin:0 auto;
text-align:center;
width:100%;
}
#footer p {
color:#666;
line-height:18px;
padding:7px 0 0
}

/* form elements */
form {
margin: -6px 0px; 
padding: 0;
background: #;	
}
label {
display:block;
font-weight:bold;
margin:5px 0;
}
input {
padding: 2px;
border:2px solid lightblue;
font:12px "Trebuchet ms", Helvetica, sans-serif;
color:#777;
}
textarea {
width: 400px;
padding:2px;
font:12px "Trebuchet ms", Helvetica, sans-serif;
border:2px solid lightblue;
height:100px;
display:block;
color:#777;
}
input.button { 
margin: 0; 
font:12px "Trebuchet ms", Helvetica, sans-serif;
border: 2px solid lightgrey;
background: #FFF; 
padding: 2px 3px; 
color: #333;	
}

Link to comment
https://forums.phpfreaks.com/topic/179994-moving-footer/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.