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

CSS: footer too long

I have to tweak this design. I had to make some elements relative and move them to be over the background.

Here is the website. I am using frames to protect the privacy of the client.
http://bcache.com/tmp/long-footer/

Problem: the footer has some white space. do you know how to remove it?
0
svetoslavm
Asked:
svetoslavm
2 Solutions
 
Ess KayEntrapenuerCommented:
you can set the size of the footer and cut off anything that surpasses the size
0
 
Ess KayEntrapenuerCommented:
just set max width and height
0
 
Julian HansenCommented:
The problem is the footer_bg_strip has a style top: -290px. So the document is accomodating this element before moving it up 290px;

I would change the design of your footer.

create a containing div that is the width of the page.
<div id="footer-container">
</div>
Give that a style of
#footer-container {
  background: url("../images/footer_bg_bar.jpg") repeat-x;
}

Open in new window

Now position your actual footer inside this - give it the width 900px and position the other elements in it. So something like this
<div id="footer-container">
  <div id="footer">
    <div id="footer-left"></div>
    <div id="footer-middle"></div>
    <div id="footer-right"></div>
    <div id="copyright"></div>
  </div>
</div>

Open in new window


That is the place to start.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
ChrisCommented:
I think much of your problem here is that you're using the "top" property to position elements on the page. You should consider using "margin-top" instead as this affects the flow of the page in a much more predictable manner.

Take this example. You have Div A which you want positioned 20 pixels higher than it would naturally sit on the page. You then have Div B Below. Setting "top"on Div A to -20px would have the desired affect on Div A. Div B however would still be positioned as it would be had you not changed the value. This leaves a 20px gap between the elements.

Setting "margin-top" to -20px will also have the desired effect on Div A and will also ensure that Div B is in the correct place relative to Div A (IE. no gap) as it works out it's position based on Div A's new position.

Try changing #footer_bg_strip {top: -290px;} to {margin-top: -290px;} You'll notice straight away that much of the whitespace is gone.
0
 
svetoslavmAuthor Commented:
Thank you julian & Demented_Goose for the detailed feedback.

#footer_bg_strip has to be outside of the footer because it has to go horizontally across the whole page. #footer has some width and is centered.
0
 
Ess KayEntrapenuerCommented:
0
 
Julian HansenCommented:
@svetsolavm - that is why I suggested in my post you make it the full width and then use the margin: 0 auto of the footer element to make sure it is positioned properly. The  way you have done it is a hack.

Here are some files that demonstrate how to do it the right way . you might need to edit the image refs in the main.css

Here I have removed the footer_bg_strip and put a container around the footer - I used the style from footer_bg_style for the container with a few mods.

The footer-middle and right I positioned absolutely to avoid the doc making provision for them.

HTH

ps. the files were from a browser save so the path to css files and images were changed to relative paths. The only code that changed though is all in <div id="footer-container"> copy that out and remove <div id="footer_bg_strip"> - that's all you need from a.htm.
a.htm
main.css
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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