• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 224
  • Last Modified:

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
0
cLFlaVA
Asked:
cLFlaVA
1 Solution
 
boonlengCommented:
Add another div after the #wrapper.

<style>
...
#footer {
  clear: both;
  height: 30px;
}
</style>


<div id="wrapper">
....
</div>
<div id="footer">
....
</div>
0
 
neesterCommented:
boonleng has hte answer there for you!
make sure you set the backgroundcolour of the footer anyway because some browsers might render it incorrect.
0
 
cLFlaVAAuthor Commented:
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.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
neesterCommented:
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
0
 
cLFlaVAAuthor Commented:
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...
0
 
neesterCommented:
yeah try that.
im not sure.
see when i use their method i modify it quite a bit
:S

hope it still works
0
 
cLFlaVAAuthor Commented:
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_off.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.gif" width="65" height="21" alt="" border="0"><img src="images/nav_join_off.gif" width="58" height="21" alt="" border="0"><img src="images/nav_aboutmms_off.gif" width="108" height="21" alt="" border="0"></div>
</div>

<div id="frame">
      <div id="contentleft">
            <div id="featuredartistpic"><img src="images/feat_artists/large/default.jpg" width="444" height="198" alt="" border="0"></div>
            <div class="whitespace"></div>
            <div class="sectiontitle"><h1>inside 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 &raquo;</a></div>
            <div class="whitespacewithtop"></div>
            <div class="sectiontitle"><h1>my music scene</h1></div>
      </div>
      <div id="contentright">
            <div class="whitespace"></div>
            <div id="usersonline"><span>&raquo;&raquo; currently 1 user online &laquo;&laquo;</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;
}
0
 
cLFlaVAAuthor Commented:
When the background image is in the body, it looks correct, except for the bottom.
0
 
neesterCommented:
Ahh..

REMOVE THE padding-bottom: 25px;
from BODY.
Just leave the padding: 0;

then have the footer div at the bottom.
0
 
cLFlaVAAuthor Commented:
Still, no dice.  It looked the same...
0
 
neesterCommented:
Let me have another shot at it later today.
Post a message so I get the email to remind me :)


Cheers,
Chris~!
0
 
cLFlaVAAuthor Commented:
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
0
 
neesterCommented:
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
0
 
cLFlaVAAuthor Commented:
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
0
 
cLFlaVAAuthor Commented:
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.
0
 
neesterCommented:
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 :)
0
 
cLFlaVAAuthor Commented:
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>
0
 
cLFlaVAAuthor Commented:
award my own question to myself?
0
 
ee_ai_constructCommented:
Question answered by asker or dialog valuable.
Closed, 500 points refunded.
ee_ai_construct (replacement part #xm34)
Community Support Admin
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now