Solved

Faux Columns - Getting a Footer

Posted on 2004-09-24
21
217 Views
Last Modified: 2006-11-17
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
Comment
Question by:cLFlaVA
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
21 Comments
 
LVL 14

Expert Comment

by:boonleng
ID: 12149171
Add another div after the #wrapper.

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


<div id="wrapper">
....
</div>
<div id="footer">
....
</div>
0
 
LVL 11

Expert Comment

by:neester
ID: 12149904
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
 
LVL 13

Author Comment

by:cLFlaVA
ID: 12150540
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 11

Expert Comment

by:neester
ID: 12150660
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
 
LVL 13

Author Comment

by:cLFlaVA
ID: 12150842
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
 
LVL 11

Expert Comment

by:neester
ID: 12150855
yeah try that.
im not sure.
see when i use their method i modify it quite a bit
:S

hope it still works
0
 
LVL 13

Author Comment

by:cLFlaVA
ID: 12150871
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
 
LVL 13

Author Comment

by:cLFlaVA
ID: 12150877
When the background image is in the body, it looks correct, except for the bottom.
0
 
LVL 11

Expert Comment

by:neester
ID: 12152610
Ahh..

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

then have the footer div at the bottom.
0
 
LVL 13

Author Comment

by:cLFlaVA
ID: 12155084
Still, no dice.  It looked the same...
0
 
LVL 11

Expert Comment

by:neester
ID: 12253609
Let me have another shot at it later today.
Post a message so I get the email to remind me :)


Cheers,
Chris~!
0
 
LVL 13

Author Comment

by:cLFlaVA
ID: 12261054
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
 
LVL 11

Expert Comment

by:neester
ID: 12417022
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
 
LVL 13

Author Comment

by:cLFlaVA
ID: 12421430
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
 
LVL 13

Author Comment

by:cLFlaVA
ID: 12421446
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
 
LVL 11

Expert Comment

by:neester
ID: 12421583
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
 
LVL 13

Author Comment

by:cLFlaVA
ID: 12447867
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
 
LVL 13

Author Comment

by:cLFlaVA
ID: 12462907
award my own question to myself?
0
 

Accepted Solution

by:
ee_ai_construct earned 0 total points
ID: 12485000
Question answered by asker or dialog valuable.
Closed, 500 points refunded.
ee_ai_construct (replacement part #xm34)
Community Support Admin
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

695 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question