...

View Full Version : footer / layout problems



tim967
07-29-2011, 06:40 PM
hi all, been trying to create a simple website. here is what i have so far

http://www.tibshelfcomputersolutions.com/2

problem is that the grey footer won't stay at the bottom of the page. Any ideas how I can fix it?

here's my index.php and style.php

index.php

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Layout 2</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="headerbar">
<div id="header">
<div id="logo"><img src="logo.png" align="left" width="210" height="70" alt ="Tibshelf Computer Solutions" /></div>
<div id="call">Call us at</div>
<div id="phone">07790709518</div></div>
<div id="navbar">Home | About | Services | Portfolio | Contact</div></div>
<div id="middlebar">
<div id="middle"><p class="heading">Home</p></div></div>
<div id="contentbar">
<div id="cotent">
<p>1<br />1<br />1<br />1<br />1<br />1<br /></p>
<div class="footerbar2">Content for class "footerbar2" Goes Here</div>
<p><br />
</p>
</div>
</body>
</html>


style.css

@font-face {
font-family: AllerDisplay;
src: url('fonts/Aller_Rg.ttf');
}

@font-face {
font-family: AllerDisplayBold;
src: url('fonts/Aller_Bd.ttf');
}

@font-face {
font-family: AllerDisplayLight;
src: url('fonts/Aller_Lt.ttf');
}

@font-face {
font-family: AllerDisplay2;
src: url('fonts/AllerDisplay.ttf');
}

* {
margin: 0;
}

#headerbar {
width: 100%;
position: fixed;
background-color: #85BAFC;
-webkit-box-shadow: 1px 1px 1px 1px #454545;
-moz-box-shadow: 1px 1px 1px 1px #454545;
box-shadow: 1px 1px 1px 1px #454545;
z-index: 1;
}

#header {
padding-top: 13px;
width: 800px;
margin-left: auto;
margin-right: auto;
}

#logo {

}

#navbar {
padding-top: 35px;
padding-bottom: 15px;
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
}

#call {
font:20px/16px 'AllerDisplayBold', Arial, Helvetica, sans-serif;
text-shadow:2px 2px 0 rgba(0,0,0,.15);
color:#fff;
text-align: right;
margin-right: 235px;
}

#phone {
font:48px/44px 'AllerDisplayBold', Arial, Helvetica, sans-serif;
text-shadow:2px 2px 0 rgba(0,0,0,.15);
color:#000;
text-align: right;
}

#middlebar {
position: fixed;
margin-top: 143px;
width: 100%;
height: 140px;
background-color: #195b8a;
-webkit-box-shadow: 2px 2px 2px 2px #CCC;
-moz-box-shadow: 2px 2px 2px 2px #CCC;
box-shadow: 2px 2px 2px 2px #CCC;
z-index: -1;
}

#middle {
width: 800px;
margin-left: auto;
margin-right: auto;
}

#middle .heading {
font:44px/36px 'AllerDisplay2', Arial, Helvetica, sans-serif;
text-shadow:2px 2px 0 rgba(0,0,0,.15);
color:#fff;
padding-top: 65px;
}

#middle .description {
font:32px/30px 'AllerDisplayLight', Arial, Helvetica, sans-serif;
text-shadow:2px 2px 0 rgba(0,0,0,.15);
color:#fff;
padding-top: 20px;
}

#contentbar {
position: fixed;
margin-top: 288px;
width: 100%;
min-height: 100%;
height: 100%;
background-color: #F00;
-webkit-box-shadow: 2px 2px 2px 2px #CCC;
-moz-box-shadow: 2px 2px 2px 2px #CCC;
box-shadow: 2px 2px 2px 2px #CCC;
z-index: -1;
}

.footerbar2 {
height: 180px;
background-color: #313131;
width: 100%;
float: none;
margin-bottom: 0px;
}

Sammy12
07-29-2011, 06:56 PM
the only way for a footer to stick to the bottom is using a sticky footer. http://ryanfait.com/resources/footer-stick-to-bottom-of-page/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum