Post by Robyn on Apr 15, 2012 7:38:03 GMT -8
(For those wondering I will be getting to the archive thread on this board shortly)
MAJOR EDIT BELOW!!!
My website's footer is okay so far but I've made it so that I need to add <br /> tags after the content to get the footer to the bottom. For whatever reason no matter what codes I use, the footer never hits the bottom.
My goal is basically to, no matter how little or how much content I have on a page, to have the footer always be at the bottom. If there's little content (like my contact page) then have the middle content background just stretch to the point where the footer can then fit below with no spaces or problems.
And of course for the pages with tons of content that require scrolling, having the footer way at the bottom is what i hope for.
But for whatever reason, the way I coded the footer and my website in general at the moment requires me to add <br /> after the content (this is only needed on pages that don't fill to the bottom with content, like my main page or my contact page).
Seeing my code below and looking at my website, how do you think I could achieve this? I've looked through countless websites and tried multiple attempts to get the footer to stay down no matter what, but no matter what i try it never cooperates.
Thanks for the help in advance.
robertcity.com
Index page example:
Notice how many <br /> I have in order to get the footer image to stay at the bottom.
To show the example with and without the <br /> I have a second page I made.
Without the <br />s at the bottom
With the <br />s at the bottom
Style.css below
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: 1050px;
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;
}
hr {
height: 1;
color: #DFDFDF;
}
#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 {
color: white;
font-weight:bold;
}
#cprcontent {
margin-left: auto;
margin-right: auto;
width: 1025px;
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;
}
What I believe is the problem or could help solve the problem is blue.
Footer image:
Do you need any additional information or have I provided enough?
EDIT
Upon looking at my website I think the problem is actually that there are two "footer images" and the problem I have is one of them, which the content is still in, is the "bottom" part of the background, and then there's the actual background which it fits.
Let me visually demonstrate.
Here's a video showing the problem and below I explain it.
Here's the image that the content fits and ends with. This is basically the footer image background:
![]()
Of course on widescreen monitors the image would be centered and there would be white space at the bottom with just the tiny image in the middle. So to make up for that, I created a background image that would be under the footer image:
![]()
So the first image goes on top of the second on widescreen monitors, thus there is no awkward white space.
So the real problem is, how do you think I could make it so that the footer image I created stays at the bottom, yet the background blue part stretches to fit wider monitors yet won't do so if you have a smaller monitor?
And <br /> actually makes the footer image, the one the content is in, move down to the bottom so that it APPEARS to actually stay at the bottom.
MAJOR EDIT BELOW!!!
My website's footer is okay so far but I've made it so that I need to add <br /> tags after the content to get the footer to the bottom. For whatever reason no matter what codes I use, the footer never hits the bottom.
My goal is basically to, no matter how little or how much content I have on a page, to have the footer always be at the bottom. If there's little content (like my contact page) then have the middle content background just stretch to the point where the footer can then fit below with no spaces or problems.
And of course for the pages with tons of content that require scrolling, having the footer way at the bottom is what i hope for.
But for whatever reason, the way I coded the footer and my website in general at the moment requires me to add <br /> after the content (this is only needed on pages that don't fill to the bottom with content, like my main page or my contact page).
Seeing my code below and looking at my website, how do you think I could achieve this? I've looked through countless websites and tried multiple attempts to get the footer to stay down no matter what, but no matter what i try it never cooperates.
Thanks for the help in advance.
robertcity.com
Index page example:
<!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>
<-Random stuff here, codes, content etc->
<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"
?>Notice how many <br /> I have in order to get the footer image to stay at the bottom.
To show the example with and without the <br /> I have a second page I made.
Without the <br />s at the bottom
With the <br />s at the bottom
Style.css below
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: 1050px;
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;
}
hr {
height: 1;
color: #DFDFDF;
}
#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 {
color: white;
font-weight:bold;
}
#cprcontent {
margin-left: auto;
margin-right: auto;
width: 1025px;
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;
}
What I believe is the problem or could help solve the problem is blue.
Footer image:
Do you need any additional information or have I provided enough?
EDIT
Upon looking at my website I think the problem is actually that there are two "footer images" and the problem I have is one of them, which the content is still in, is the "bottom" part of the background, and then there's the actual background which it fits.
Let me visually demonstrate.
Here's a video showing the problem and below I explain it.
Here's the image that the content fits and ends with. This is basically the footer image background:
Of course on widescreen monitors the image would be centered and there would be white space at the bottom with just the tiny image in the middle. So to make up for that, I created a background image that would be under the footer image:
So the first image goes on top of the second on widescreen monitors, thus there is no awkward white space.
So the real problem is, how do you think I could make it so that the footer image I created stays at the bottom, yet the background blue part stretches to fit wider monitors yet won't do so if you have a smaller monitor?
And <br /> actually makes the footer image, the one the content is in, move down to the bottom so that it APPEARS to actually stay at the bottom.
how to restore the contents of the header and footer before after changed within a few days? too complicated ... before I get a source code but has changes in the admin panel 