Solved

Faux Columns - Getting a Footer

Posted on 2004-09-24
21
211 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
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
 
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

762 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now