cLFlaVA
asked on
Faux Columns - Getting a Footer
Hi.
I'm continuing my conversion to table-less layouts. Oh, it's been a blast...
I've followed alistapart's faux columns article (http://alistapart.com/articles/fauxcolumns/). However, something they don't discuss is how to get the footer at the bottom. Currently my website has the image background repeating all the way to the bottom.
How can I get, say, a 30-pixel area with just the background color (of the page) to appear after the content of my #wrapper div?
Let me know if you need more info / code.
Thanks,
Cory
I'm continuing my conversion to table-less layouts. Oh, it's been a blast...
I've followed alistapart's faux columns article (http://alistapart.com/articles/fauxcolumns/). However, something they don't discuss is how to get the footer at the bottom. Currently my website has the image background repeating all the way to the bottom.
How can I get, say, a 30-pixel area with just the background color (of the page) to appear after the content of my #wrapper div?
Let me know if you need more info / code.
Thanks,
Cory
boonleng has hte answer there for you!
make sure you set the backgroundcolour of the footer anyway because some browsers might render it incorrect.
make sure you set the backgroundcolour of the footer anyway because some browsers might render it incorrect.
ASKER
The solution didn't really work. Rather, it placed a 30-pixel tall strip across the screen right after the last div. Then, after the 30-pixel div, I continue to see the background image...
I want to, basically, after the content in the webpage, show the footer from that point to the bottom, like on alistapart.com.
So, if the content does not even fill the page, I'd need the footer to extend all the way to the bottom.
I want to, basically, after the content in the webpage, show the footer from that point to the bottom, like on alistapart.com.
So, if the content does not even fill the page, I'd need the footer to extend all the way to the bottom.
Did you put the footer OUTSIDE of the main wrapper?
if so, then you have done somethign wrong and applied the background image to the BODY not the wrapper
if so, then you have done somethign wrong and applied the background image to the BODY not the wrapper
ASKER
Ahh i see... I did apply the bgimage to the body, cause that's what it said to do in the tutorial. You're saying I should apply it to the wrapper, huh?
I'll try that, then post back...
I'll try that, then post back...
yeah try that.
im not sure.
see when i use their method i modify it quite a bit
:S
hope it still works
im not sure.
see when i use their method i modify it quite a bit
:S
hope it still works
ASKER
Nah, that didn't work either. Now I see no background.
Below is my HTML and then my CSS. Maybe you'll be able to see better what's going on...
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>my music scene</title>
<style type="text/css" media="all">@import "includes/css/main.css";</ style>
</head>
<body>
<div id="nav-banner"></div>
<div id="banner">
<div id="logo"><img src="images/logo.gif" width="84" height="97" alt="" border="0"></div>
<div id="logotext"><img src="images/nav_artists_of f.gif" width="70" height="21" alt="" border="0"><img src="images/nav_scenes_off .gif" width="75" height="21" alt="" border="0"><img src="images/nav_news_off.g if" width="65" height="21" alt="" border="0"><img src="images/nav_join_off.g if" width="58" height="21" alt="" border="0"><img src="images/nav_aboutmms_o ff.gif" width="108" height="21" alt="" border="0"></div>
</div>
<div id="frame">
<div id="contentleft">
<div id="featuredartistpic"><im g src="images/feat_artists/l arge/defau lt.jpg" width="444" height="198" alt="" border="0"></div>
<div class="whitespace"></div>
<div class="sectiontitle"><h1>i nside the artist</h1></div>
<div class="bodytext">left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here.<br><br>
<a href="" class="whitelink">FIND OUT MORE »</a></div>
<div class="whitespacewithtop"> </div>
<div class="sectiontitle"><h1>m y music scene</h1></div>
</div>
<div id="contentright">
<div class="whitespace"></div>
<div id="usersonline"><span>&ra quo;» ; currently 1 user online ««</span></div >
<div class="whitespace"></div>
<div class="sectiontitle"><h1 class="right">featured artists</h1></div>
<div class="whitespace"></div>
<div class="sectiontitle"><h1 class="right">find artists</h1></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
CSS:
body
{
margin: 0px;
text-align: center;
font-family: Tahoma, Verdana, Sans-Serif;
font-size: 11px;
padding: 0px;
padding-bottom: 25px;
}
/* this is not dependent on anything else on the page */
#nav-banner
{
background-color: #960018;
border-bottom: 2px solid black;
border-top: 2px solid black;
width: 100%;
position: absolute;
top: 69px;
left: 0px;
height: 21px;
text-align: left;
}
/* this is going to hold the logo and text, centered on the screen */
/* position:relative means the absolutely positioned logo and text are relative to "this" box, not the page */
#banner
{
text-align: left;
width: 804px;
margin:0 auto;
position: relative;
}
/* set the logo position */
#logo
{
position: absolute;
top: 51px;
left: 20px;
z-index: 2;
}
/* set the text position, the left gives us room for the logo */
#logotext
{
position: absolute;
top: 71px;
left: 104px;
}
#frame
{
background: #F0F0D8 url(../../images/mmsbckgrd .gif) repeat-y 50%;
width: 704px;
margin-left: auto;
margin-right: auto;
border-top: 94px solid #F0F0D8;
padding: 0px;
text-align: left;
}
#contentleft
{
width:444px;
padding:0px;
float:left;
background:none;
border: none;
margin-left: 2px;
font-family: Tahoma, Verdana, Sans-Serif;
font-size: 11px;
line-height: 14px;
}
#contentright
{
width:254px;
padding:0px;
float:left;
background:none;
border: none;
height: 100%;
margin-left: 2px;
font-family: Tahoma, Verdana, Sans-Serif;
font-size: 11px;
line-height: 14px;
}
#featuredartistpic
{
border: none;
margin: none;
padding: none;
border-bottom: 2px solid black;
}
#headeradv
{
width: 704px;
margin-left: auto;
margin-right: auto;
height: 88px;
text-align: right;
}
#footeradv img, #headeradv img
{
border: 1px solid black;
}
#footeradv
{
width: 704px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#footer
{
clear: both;
height: 100%;
background-color: #000;
bottom: 0;
}
#usersonline
{
text-align: center;
color: black;
font-weight: bold;
font-family: Tahoma, Verdana, Sans-Serif;
font-size: 11px;
margin-top: 3px;
height: 20px;
width: 100%;
border-bottom: 2px solid black;
}
#usersonline span
{
padding-top: auto;
padding-bottom: auto;
}
div.bodytext
{
margin: 10px;
border: none;
}
div.sectiontitle
{
border: none;
border-bottom: 2px solid black;
background-color: #ABABAB;
height: 20px;
width: 100%;
}
div.whitespace
{
border: none;
border-bottom: 2px solid black;
background-color: #fff;
height: 3px;
width: 100%;
padding: 0;
margin: 0;
}
div.whitespacewithtop
{
border: none;
border-top: 2px solid black;
border-bottom: 2px solid black;
background-color: #fff;
height: 3px;
width: 100%;
}
a.whitelink
{
font-family: Tahoma, Verdana, Sans-Serif;
font-size: 11px;
line-height: 14px;
text-decoration: none;
color: #fff;
font-weight: bold;
}
h1
{
font-family: 'Trebuchet MS';
font-size: 18px;
color: #fff;
margin: 0;
padding: 2px;
padding-top: auto;
padding-bottom: auto;
padding-left: 4px;
position: relative;
font-weight: normal;
letter-spacing: 1px;
line-height: 14px;
}
h1.right
{
text-align: right;
}
Below is my HTML and then my CSS. Maybe you'll be able to see better what's going on...
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>my music scene</title>
<style type="text/css" media="all">@import "includes/css/main.css";</
</head>
<body>
<div id="nav-banner"></div>
<div id="banner">
<div id="logo"><img src="images/logo.gif" width="84" height="97" alt="" border="0"></div>
<div id="logotext"><img src="images/nav_artists_of
</div>
<div id="frame">
<div id="contentleft">
<div id="featuredartistpic"><im
<div class="whitespace"></div>
<div class="sectiontitle"><h1>i
<div class="bodytext">left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here. left content goes here.<br><br>
<a href="" class="whitelink">FIND OUT MORE »</a></div>
<div class="whitespacewithtop">
<div class="sectiontitle"><h1>m
</div>
<div id="contentright">
<div class="whitespace"></div>
<div id="usersonline"><span>&ra
<div class="whitespace"></div>
<div class="sectiontitle"><h1 class="right">featured artists</h1></div>
<div class="whitespace"></div>
<div class="sectiontitle"><h1 class="right">find artists</h1></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
CSS:
body
{
margin: 0px;
text-align: center;
font-family: Tahoma, Verdana, Sans-Serif;
font-size: 11px;
padding: 0px;
padding-bottom: 25px;
}
/* this is not dependent on anything else on the page */
#nav-banner
{
background-color: #960018;
border-bottom: 2px solid black;
border-top: 2px solid black;
width: 100%;
position: absolute;
top: 69px;
left: 0px;
height: 21px;
text-align: left;
}
/* this is going to hold the logo and text, centered on the screen */
/* position:relative means the absolutely positioned logo and text are relative to "this" box, not the page */
#banner
{
text-align: left;
width: 804px;
margin:0 auto;
position: relative;
}
/* set the logo position */
#logo
{
position: absolute;
top: 51px;
left: 20px;
z-index: 2;
}
/* set the text position, the left gives us room for the logo */
#logotext
{
position: absolute;
top: 71px;
left: 104px;
}
#frame
{
background: #F0F0D8 url(../../images/mmsbckgrd
width: 704px;
margin-left: auto;
margin-right: auto;
border-top: 94px solid #F0F0D8;
padding: 0px;
text-align: left;
}
#contentleft
{
width:444px;
padding:0px;
float:left;
background:none;
border: none;
margin-left: 2px;
font-family: Tahoma, Verdana, Sans-Serif;
font-size: 11px;
line-height: 14px;
}
#contentright
{
width:254px;
padding:0px;
float:left;
background:none;
border: none;
height: 100%;
margin-left: 2px;
font-family: Tahoma, Verdana, Sans-Serif;
font-size: 11px;
line-height: 14px;
}
#featuredartistpic
{
border: none;
margin: none;
padding: none;
border-bottom: 2px solid black;
}
#headeradv
{
width: 704px;
margin-left: auto;
margin-right: auto;
height: 88px;
text-align: right;
}
#footeradv img, #headeradv img
{
border: 1px solid black;
}
#footeradv
{
width: 704px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#footer
{
clear: both;
height: 100%;
background-color: #000;
bottom: 0;
}
#usersonline
{
text-align: center;
color: black;
font-weight: bold;
font-family: Tahoma, Verdana, Sans-Serif;
font-size: 11px;
margin-top: 3px;
height: 20px;
width: 100%;
border-bottom: 2px solid black;
}
#usersonline span
{
padding-top: auto;
padding-bottom: auto;
}
div.bodytext
{
margin: 10px;
border: none;
}
div.sectiontitle
{
border: none;
border-bottom: 2px solid black;
background-color: #ABABAB;
height: 20px;
width: 100%;
}
div.whitespace
{
border: none;
border-bottom: 2px solid black;
background-color: #fff;
height: 3px;
width: 100%;
padding: 0;
margin: 0;
}
div.whitespacewithtop
{
border: none;
border-top: 2px solid black;
border-bottom: 2px solid black;
background-color: #fff;
height: 3px;
width: 100%;
}
a.whitelink
{
font-family: Tahoma, Verdana, Sans-Serif;
font-size: 11px;
line-height: 14px;
text-decoration: none;
color: #fff;
font-weight: bold;
}
h1
{
font-family: 'Trebuchet MS';
font-size: 18px;
color: #fff;
margin: 0;
padding: 2px;
padding-top: auto;
padding-bottom: auto;
padding-left: 4px;
position: relative;
font-weight: normal;
letter-spacing: 1px;
line-height: 14px;
}
h1.right
{
text-align: right;
}
ASKER
When the background image is in the body, it looks correct, except for the bottom.
Ahh..
REMOVE THE padding-bottom: 25px;
from BODY.
Just leave the padding: 0;
then have the footer div at the bottom.
REMOVE THE padding-bottom: 25px;
from BODY.
Just leave the padding: 0;
then have the footer div at the bottom.
ASKER
Still, no dice. It looked the same...
Let me have another shot at it later today.
Post a message so I get the email to remind me :)
Cheers,
Chris~!
Post a message so I get the email to remind me :)
Cheers,
Chris~!
ASKER
Hi neester.
Thanks for your continuing help.
I won't have access to the site this weekend, but maybe the code above is enough.
I'll check in with you soon.
Thanks.
cory
Thanks for your continuing help.
I won't have access to the site this weekend, but maybe the code above is enough.
I'll check in with you soon.
Thanks.
cory
Sorry I didn't get back to the question.
I am assuming since cory didn't return he found my code to be enough.
Quote:
>> but maybe the code above is enough
I am assuming since cory didn't return he found my code to be enough.
Quote:
>> but maybe the code above is enough
ASKER
neester-
My statement, "maybe the code above is enough", was meant to say that if you were going to help me more, the code above was the code to help me with. The way I said it, however, was not clear at all.
The solution has not been found as of yet, and I have put that project to the side to work on others. If you think that the solution you provided will be helpful to other people, I have absolutely no problem accepting your answer - I don't pay for these points, I've earned them.
My only concern with accepting the question was the possibility that someone may come across this question in the future and not get the answer they were expecting.
Let me know.
Cory
My statement, "maybe the code above is enough", was meant to say that if you were going to help me more, the code above was the code to help me with. The way I said it, however, was not clear at all.
The solution has not been found as of yet, and I have put that project to the side to work on others. If you think that the solution you provided will be helpful to other people, I have absolutely no problem accepting your answer - I don't pay for these points, I've earned them.
My only concern with accepting the question was the possibility that someone may come across this question in the future and not get the answer they were expecting.
Let me know.
Cory
ASKER
And your original statement was,
>> Post a message so I get the email to remind me :)
Which I did, so I did return.
Again, let me know how you think the question should be handled, and maybe I'll reconsider.
>> Post a message so I get the email to remind me :)
Which I did, so I did return.
Again, let me know how you think the question should be handled, and maybe I'll reconsider.
Ahh ok.
understood!
I will have another look into this later.
I am just really busy with uni work at the moment.
It would make life a lot easier if you posted what code you have now, after all the modifications. (css and html would be perfect)
So i can simply throw it into my editor and run a few tests and code checks....
thanks mate :)
understood!
I will have another look into this later.
I am just really busy with uni work at the moment.
It would make life a lot easier if you posted what code you have now, after all the modifications. (css and html would be perfect)
So i can simply throw it into my editor and run a few tests and code checks....
thanks mate :)
ASKER
I was able to solve this, after a few weeks of learning css, and following a lot of tutorials. The following basic layout was used to solve my problem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>new document</title>
<script language="javascript" type="text/javascript">
<!--
-->
</script>
<style type="text/css">
body {
margin: 50px auto;
text-align: center;
background: goldenrod;
}
#frame {
margin: 0 auto;
width: 543px;
text-align: left;
background: white url(background.jpg) repeat-y top right;
}
#contentleft
{
width:340px;
float:left;
padding: 10px;
}
#contentright
{
width:163px;
float:left;
margin: 0;
padding: 10px;
}
#header {
width: 543px;
clear: both;
background-color: lime;
height: 100px;
}
#footer {
width: 543px;
clear: both;
background-color: maroon;
height: 50px;
}
</style>
</head>
<body>
<div id="frame">
<div id="header"></div>
<div id="contentleft">Here is the left content.</div>
<div id="contentright">Here is the right content. Here is the right content.</div>
<div id="footer"></div>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>new document</title>
<script language="javascript" type="text/javascript">
<!--
-->
</script>
<style type="text/css">
body {
margin: 50px auto;
text-align: center;
background: goldenrod;
}
#frame {
margin: 0 auto;
width: 543px;
text-align: left;
background: white url(background.jpg) repeat-y top right;
}
#contentleft
{
width:340px;
float:left;
padding: 10px;
}
#contentright
{
width:163px;
float:left;
margin: 0;
padding: 10px;
}
#header {
width: 543px;
clear: both;
background-color: lime;
height: 100px;
}
#footer {
width: 543px;
clear: both;
background-color: maroon;
height: 50px;
}
</style>
</head>
<body>
<div id="frame">
<div id="header"></div>
<div id="contentleft">Here is the left content.</div>
<div id="contentright">Here is the right content. Here is the right content.</div>
<div id="footer"></div>
</div>
</body>
</html>
ASKER
award my own question to myself?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
<style>
...
#footer {
clear: both;
height: 30px;
}
</style>
<div id="wrapper">
....
</div>
<div id="footer">
....
</div>