Footer doesn't fill page

  • jerryscs
  • Novice
  • Novice
  • User avatar
  • Posts: 27
  • Loc: Okinawa, Japan

Post 3+ Months Ago

http://www.jerryscs.com/csstest.php

Ok, I have made a few changes to the site that I am working on. One of the problems that I am having right now is getting the footer to fill the page from where it is located to the bottom. I can put a height: 50% entry into the .css file, but that will only work on smaller resolutions. For example, one of my screens is set to 1280x1024, and the other is set to 1600x1200. On the first screen, the footer will overfill the page and on the other screen, there will be white space below the footer (that is with height: 50%).

Is there a way to get the footer to completely fill the page?


Also, the image at the top of the page...is there a way to position that image so that the edge of it appears behind the leftnav bar instead of having that whitespace between the leftnav and the image?

Thanks,
Jerry
  • JrzyCrim
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2062

Post 3+ Months Ago

Hello jerry,

You could give this a try. Not sure how it will work across all browsers and all resolutions:

Remove the height from .footer and add these:

Code: [ Select ]
position: absolute;
width: 100%;
bottom: 0;
  1. position: absolute;
  2. width: 100%;
  3. bottom: 0;


Like I said, not sure if this will meet your needs but you can give it a try.

Still thinking about the image...
  • JrzyCrim
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2062

Post 3+ Months Ago

Actually, just ignore my CSS. It's a bad idea. It doesn't work well for smaller resolutions. The footer doesn't scroll with the page and ends up overlapping the main content.

What was I thinkin'??
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

So you want a footer, that remains below the content, and will fill all the space below the content, regardless of the screen res and the amount of content? The <b>best</b> advie I can give you is don't try. The only solutions that I have seen for stuff similar use a huge chunck of javascript to do detection and mess around with stuff, and I never really looked at these in depth.

How do you want the footer to look? If it is a repeating background or a solid color then there may be a solution:

1) Apply a background colour/image to the body
2) Wrap all content in a div, make it backgound-color:white;
3) Make sure that the container meets the edges of the screen

The white background will appear behind all of your content, covering the background of the body, but the body bg will show through underneath the footer.


As for the image, just use position:absolute; and set the z-index to put it behind the nav.
  • jerryscs
  • Novice
  • Novice
  • User avatar
  • Posts: 27
  • Loc: Okinawa, Japan

Post 3+ Months Ago

Well, I searched around and found a solution. Not exactly what I was looking for earlier, but it works, and may look better than what I was trying. Thank you for the help with the footer. I'm still trying to figure out if I can move that image at the top.

Jerry
  • jerryscs
  • Novice
  • Novice
  • User avatar
  • Posts: 27
  • Loc: Okinawa, Japan

Post 3+ Months Ago

Sorry...should have read better rtm223. I'll try that position:absolute for the image. Thanks.

Jerry
  • s15199d
  • Expert
  • Expert
  • User avatar
  • Posts: 524
  • Loc: NC, USA

Post 3+ Months Ago

not to be the kill joy, but I figured i'd throw this out their for the readers of this post...as I'm aware you're trying to accomplish with CSS

But, a frameset is always an option...
  • jerryscs
  • Novice
  • Novice
  • User avatar
  • Posts: 27
  • Loc: Okinawa, Japan

Post 3+ Months Ago

Current problems solved. Thank you everybody for the help.

Code: [ Select ]

/* In .css file */
.content img#img1
{
   position: relative;
   left: -17px;
   z-index: 0;
}

.leftnav
{
   z-index: 2;
}


/* in index.php file */

<div class='content'><img id='img1' src='src to file'>
  1. /* In .css file */
  2. .content img#img1
  3. {
  4.    position: relative;
  5.    left: -17px;
  6.    z-index: 0;
  7. }
  8. .leftnav
  9. {
  10.    z-index: 2;
  11. }
  12. /* in index.php file */
  13. <div class='content'><img id='img1' src='src to file'>


Thanks again everybody.

Jerry

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 37 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.