Post by Robyn on Feb 4, 2012 11:12:38 GMT -8
So I'm trying to finish a few pages on my website and keep stumbling onto problems with my template.
You see, I designed it and even coded it myself (I think) back in 2011. But there were a few flaws.
The footer is setup so that you have to have content that stretches down below the screen for it to stay at the bottom, else if there isn't enough content, the footer sticks to the bottom of the last bit of content (thus not on the bottom of the page)
I have used <br /> tags to move the content down in certain pages.
However I feel I'm over complicating my template and should have it re-coded to actually have the footer stay at the bottom no matter how large or small the content is.
Can anyone help me fix the template so it's cross browser except for IE6 and below?
robertcity.com/
My main page is an example of not enough content to move the footer to the bottom.
My about page is an example of obviously a lot of content and the footer is okay.
Please ignore the green strip at the bottom with the footer, I overwrote the wrong image and the whole footer should be green.
Index.php example page
Header.php file
footer.php file
style.css file
You see, I designed it and even coded it myself (I think) back in 2011. But there were a few flaws.
The footer is setup so that you have to have content that stretches down below the screen for it to stay at the bottom, else if there isn't enough content, the footer sticks to the bottom of the last bit of content (thus not on the bottom of the page)
I have used <br /> tags to move the content down in certain pages.
However I feel I'm over complicating my template and should have it re-coded to actually have the footer stay at the bottom no matter how large or small the content is.
Can anyone help me fix the template so it's cross browser except for IE6 and below?
robertcity.com/
My main page is an example of not enough content to move the footer to the bottom.
My about page is an example of obviously a lot of content and the footer is okay.
Please ignore the green strip at the bottom with the footer, I overwrote the wrong image and the whole footer should be green.
Index.php example page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link type="text/css" rel="stylesheet" href="./style.css" />
<title>
RobertCity.com
</title>
</head>
<body>
<?php
require_once "./header.php"
?>
<center><font size="6"><b>New year, what's coming?</b></font></center><br /><br />
<div id="left-home">
<font size="3">There's snow, finally!</font><br /><br /><br />
<center><iframe width="560" height="315" src="http://www.youtube.com/embed/WeseMqSAEuk" frameborder="0" allowfullscreen></iframe></center></div>
<div id="right-home">
<?php
include('./rss2html.php?XMLFILE=http://blog.robertcity.com/feed&TEMPLATE=./sample-template.html&MAXITEMS=5 target="_blank">');
?>
<br /><br />An RSS feed <b>should</b> appear above here. If it doesn't, that means it's not working.
<br /><br />Oh and yes, I plan on redoing the main page so it looks a lot nicer and stuff... don't worry!<br /><br />
But how do you like my new theme for my website for this month and even arguably the rest of Winter?</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<center><font size="5"><b>Robert, the Webmaster</b></font></center><br /><br /><br /><br />
<?php
require_once "./footer.php"
?>Header.php file
<div id="container">
<div id="header"><div id="topcontent"><div id="logo"><center><img src="http://robertcity.com/images/logo.png" /></center></div>
<div id="nav">
<center><a href="http://robertcity.com/index.php"><img border="0" src="http://robertcity.com/images/home.png" /></a>
<a href="http://robertcity.com/about.php"><img border="0" src="http://robertcity.com/images/about.png" /></a>
<a href="http://mission.robertcity.com"><img border="0" src="http://robertcity.com/images/mymission.png" /></a>
<a href="http://robertcity.com/mygames.php"><img border="0" src="http://robertcity.com/images/mygames.png" /></a>
<a href="http://robertcity.com/mypicsvids.php"><img border="0" src="http://robertcity.com/images/mypicvid.png" /></a>
<a href="http://blog.robertcity.com"><img border="0" src="http://robertcity.com/images/blog.png" /></a>
<a href="./contact.php"><img border="0" src="http://robertcity.com/images/contact.png" /></a></center>
</div></div></div>
<div id="body"><div id="table"><div id="content">footer.php file
</div></div></div>
<div id="copyright"><div id="cprcontent"><span style="float: left;"><font size="3">Copyright 2011 RobertCity.com</font></span>
<span style="float: right;"><font size="3">
<a href="http://robertcity.com/index.php"><font color="white">Home</font></a> -
<a href="http://robertcity.com/about.php"><font color="white">About</font></a> -
<a href="http://robertcity.com/mygames.php"><font color="white">My Games</font></a> -
<a href="http://robertcity.com/mypictures"><font color="white">My Pictures</font></a> -
<a href="http://robertcity.com/myvideos.php"><font color="white">My Videos</font></a> -
<a href="http://blog.robertcity.com/"><font color="white">Blog</font></a> -
<a href="http://robertcity.com/contact.php"><font color="white">Contact</font></a></font></span>
</div></div></div>
</body>
</html>style.css file
html,
body {
margin:0;
padding:0;
height:100%;
background-repeat:repeat-x;
background-color: #fff;
font-family: "Verdana",sans-serif;
background-image: url("http://www.robertcity.com/images/bg.png");
}
#body {
padding: 5px, 10px;
padding-bottom: 20px;
background-image: url("http://www.robertcity.com/images/footer-bg.png");
background-position: bottom center;
background-repeat: no-repeat;
}
#container {
min-height:100%;
position:relative;
padding-bottom: 19px;
background-image: url("http://www.robertcity.com/images/bottom-bg.png");
background-position: bottom center;
background-repeat: repeat-x;
}
#header {
background-image: url("http://www.robertcity.com/images/header-bg.png");
width: 100%;
height: 165px;
}
#topcontent {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#table {
background-image: url("http://www.robertcity.com/images/middle-bg.png");
width: 1000px;
margin-left: auto;
margin-right: auto;
background-position: top center;
background-repeat:no-repeat;
}
#content {
padding-top: 20px;
width: 950px;
margin-left: auto;
margin-right: auto;
}
#column {
width: 950px;
float: center;
margin: 0 auto;
padding-bottom: 200px;
}
#left {
float: left;
width: 48%;
}
#right {
float: right;
width: 48%;
font-align: right;
}
#left-home {
float: left;
width: 560px;
}
#right-home {
float: right;
width: 360px;
font-align: right;
}
#logo {
/* background-image: url("http://www.robertcity.com/images/logo_bg.png"); */
height:100px;
}
.centeredImage
{
text-align:center;
display:block;
}
.table {
display: table;
}
.photo-cat-container {
display: table-row;
width: 950px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.cat {
display: table-cell;
}
#copyright {
background-color: #26911d;
/* background-color: #57A5F4; */
color: white;
font-weight:bold;
}
#cprcontent {
width: 950px;
margin-left: auto;
margin-right: auto;
height: 18px;
}
#footer {
height: 178px;
width: 1000px;
margin-left: auto;
margin-right: auto;
background-image: url("http://www.robertcity.com/images/bottom-bg.png");
position:absolute;
bottom:0;
}
