FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Help with FOOTERS!!

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


Satori
Anyone have any xhtml and css experience? Maybe you can help me.

I am currently designing my own website:

www.satoriglass.com

I want to put a footer on all of my pages. I want the footer to be of course at the bottom of the page. I have the following CSS relevant to the footer:

Code:

#footer {
  height: 100px;
  padding: 28px 3px 0 5px;
  margin: 20px 0 20px 0; 
  background: url(http://www.satoriglass.com/images/footer.gif) no-repeat top center;
  width: 100%;
}

p#footer:first-letter {
  font-size: 1.0em;
}

#footer img.right {
  padding: 5px 2px 0 2px;
  border: 0px;
}


I also have this html associated with my footer (irrelevant code has been cut out):

Code:

<body>

<div id="siteBox">

   <div id="content">

      <div id="right">
         Lots of code, etc....
      </div>

      <div id="left">
         Lots more code, etc....
      </div>

   </div>
   
   <div id="footer" class="center">
      <p>
         test test test!  This is my footer text...not quite right eh?
      </p>
   </div>

</div>

</body>

</html>


When I try and place a footer in my html, it ends up smushing up between the right and left column content instead of staying at the bottom where I want it. You can see what's going wrong here:

www.satoriglass.com/test.html

Anyone have any ideas what's wrong??
mariohs
Add the following statement into your #footer css:
Code:
clear:both;

It'll be like this:
Code:
#footer {
  height: 100px;
  padding: 28px 3px 0 5px;
  margin: 20px 0 20px 0;
  background: url(http://www.satoriglass.com/images/footer.gif) no-repeat top center;
  width: 100%;
  clear:both;
}

More information about clear property
Satori
mariohs wrote:
Add the following statement into your #footer css:
Code:
clear:both;

More information about clear property

Wow, thanks SOO much! I had no idea it was that easy Smile And w3schools is where I learned css...so I should've figured it out on my own I suppose!

Thanks again!
mariohs
No problem! Always glad to help Very Happy
Satori
Ok, so here's my next question:

I now have the footer at the bottom of the home page. How do I get the footer to be the same distance from the top of each page regardless of the content in between?

For example, the home page has more content than say the gallery page...so how do I make the footer appear in the same location on every page no matter what the content?

www.satoriglass.com
www.satoriglass.com/gallery.html

See?

And on a side note...why is there all that white space underneath the footer on both pages??
mariohs
I don't know if it's gonna help you so much... but try a read to the Exploring Footers article from A List Apart.
Satori
Nope...not so much help Smile

I only have a very basic understanding of javascript...and really don't think I should get into using it to reposition my footers. You would think it would be an easy thing to do with just css...but I suppose that it's not quite there yet. Alas, until then my footers will vary in distance from the top of the page.

But what about that white space underneath them?? It's driving me nuts Smile
Satori
So I have figured out and applied a very GHETTO fix. I just added a ton of <br /> tags to each page to position the footer in the general vicinity of the bottom of the page...so I suppose it works, though it's not a very good solution.

Hopefully I will be able to figure out a much nicer, cleaner CSS solution in the not too distant future.

And if anyone has an answer for me, please feel free to respond!!
mariohs
Well, I can't really think of a nice solution... but if I have some ideas I'll post them here Very Happy
simplyw00x
The best way is probably to set a height manually for the content div, so it will always be a fixed size, then the footer will always be a fixed height from the top.

Code:
#content {
height:200px;
}
Satori
simplyw00x wrote:
The best way is probably to set a height manually for the content div, so it will always be a fixed size, then the footer will always be a fixed height from the top.

Code:
#content {
height:200px;
}

If I were to set a fixed height for the content box, how would I ensure that the footer stayed at the very bottom of the content box?
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.