DonSailieri
03-14-2008, 07:01 PM
Hey, it's me again!
Thanks to abduraooft I've made some great progress with my site. (saugi.pointclark.net/newHaase)
It now works great as a layout but still isn't a 100% what i want.
I want the footer to to always be at the BOTTOM of the page (as you can see, it comes right after the content of the content div instead) although all heights are set to 100%, this doesn't apply for some reason.
CSS and XHTML are valid, and I've tried everything I can imagine to make the footer work... Would be great if someone here could help me.
My sourcecode:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="description" content="#" />
<meta name="keywords" content="#" />
<title>HEADS - Haase Electronics and Digital Systems</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body>
<div id="wrap">
<div id="header">
<?php include('header.php')?>
</div>
<div id="content">
<?php include('content/home.php')?>
</div>
<div id="footer">
<?php include('footer.php')?>
</div>
</div>
</body>
</html>
and my CSS:
/*Div tags follow below*/
#wrap {
height: 100%;
width: 750px;
text-align: left;
margin: auto;
border-left: 1px solid #2f2f2f;
border-right: 1px solid #2f2f2f;
background: url(img/background.png) repeat-y center bottom;
}
#header {
height: 200px;
background: url(img/header.png);
}
#content {
height: 100%;
padding: 5px;
}
#footer {
width: 750px;
height: 50px;
background: url(img/footer.png) no-repeat;
clear: both;
}
/*HTML tags follow below*/
html, body {
margin:0px;
padding:0px;
text-align:center;
background: #FFFFFF;
font-family: arial, verdana;
}
p img {
display: inline;
}
a img {
border: none;
}
a {
font: 12px arial;
text-decoration: none;
color: #4e4e4e;
font-weight: bold;
}
a:hover {
text-decoration: none;
color: #000000;
}
ul {
list-style: none;
}
li {
display: inline;
color: #4e4e4e;
}
/*classes follow below*/
.navigation {
float: right;
text-align: right;
margin: 0 5px 0 0;
}
.footer_right{
float: right;
text-align: right;
margin: .1em .2em;
}
.footer_left{
float: left;
text-align: left;
margin: .5em .2em;
}
.clearfooter {
clear:both;
height: 100%;
}
http://saugi.pointclark.net/screene.png
Thanks to abduraooft I've made some great progress with my site. (saugi.pointclark.net/newHaase)
It now works great as a layout but still isn't a 100% what i want.
I want the footer to to always be at the BOTTOM of the page (as you can see, it comes right after the content of the content div instead) although all heights are set to 100%, this doesn't apply for some reason.
CSS and XHTML are valid, and I've tried everything I can imagine to make the footer work... Would be great if someone here could help me.
My sourcecode:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="description" content="#" />
<meta name="keywords" content="#" />
<title>HEADS - Haase Electronics and Digital Systems</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body>
<div id="wrap">
<div id="header">
<?php include('header.php')?>
</div>
<div id="content">
<?php include('content/home.php')?>
</div>
<div id="footer">
<?php include('footer.php')?>
</div>
</div>
</body>
</html>
and my CSS:
/*Div tags follow below*/
#wrap {
height: 100%;
width: 750px;
text-align: left;
margin: auto;
border-left: 1px solid #2f2f2f;
border-right: 1px solid #2f2f2f;
background: url(img/background.png) repeat-y center bottom;
}
#header {
height: 200px;
background: url(img/header.png);
}
#content {
height: 100%;
padding: 5px;
}
#footer {
width: 750px;
height: 50px;
background: url(img/footer.png) no-repeat;
clear: both;
}
/*HTML tags follow below*/
html, body {
margin:0px;
padding:0px;
text-align:center;
background: #FFFFFF;
font-family: arial, verdana;
}
p img {
display: inline;
}
a img {
border: none;
}
a {
font: 12px arial;
text-decoration: none;
color: #4e4e4e;
font-weight: bold;
}
a:hover {
text-decoration: none;
color: #000000;
}
ul {
list-style: none;
}
li {
display: inline;
color: #4e4e4e;
}
/*classes follow below*/
.navigation {
float: right;
text-align: right;
margin: 0 5px 0 0;
}
.footer_right{
float: right;
text-align: right;
margin: .1em .2em;
}
.footer_left{
float: left;
text-align: left;
margin: .5em .2em;
}
.clearfooter {
clear:both;
height: 100%;
}
http://saugi.pointclark.net/screene.png