Solved

Footer at the bottom

Posted on 2010-11-19
11
312 Views
Last Modified: 2012-05-10
I need to create a footer and stick it at the bottom of the page.

I have used a proved coding which works perfectly in a separate page.
But in the following page it doesn't work:
http://dubaimanianet.ipage.com/aiutiamoalessandro/home_tmp_copy.html

The CSS can be viewed at the following link:
http://dubaimanianet.ipage.com/aiutiamoalessandro/styles.css

What am I doing wrong?
Thanks!
0
Comment
Question by:nsiotto
[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
  • 6
  • 4
11 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 34172501
The main problem I'm seeing is that most of your DIVs have a position of absolute.  Therefore, when a relative element, like the footer, is placed, it positions itself at the upper most point. It ignores the absolutely positioned elements.  

You would need to take position:absolute off of the other elements.

Also, do you have a working page you can show us?  I didn't see one with the same footer on it.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 34172528
The other solution, which may serve you better, is to give the #footer a position:fixed and bottom:0px.  
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!

 

Author Comment

by:nsiotto
ID: 34172626
I will then work on removing the ABSOLUTE positions and see if I can manage without.
Will update once done. Thanks!
0
 
LVL 30

Expert Comment

by:LZ1
ID: 34172706
@nsiotto: Did you see my second comment?  If your layout will ONLY work with absolute positioning then my 2nd comment may serve you better.
0
 

Author Comment

by:nsiotto
ID: 34172829
Yes I saw it and already implemented but this solution doesn't make me crazy to be honest.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 34172853
Understandable.  Like I said, it truly depends on your needs.  Start removing the absolute positioning and then let us know where your at.
0
 

Author Comment

by:nsiotto
ID: 34172891
If I move the absolute positioning then I need to remake half of the graphics and page layout.
Some images are positioning on top of other backgrounds. And if I remove the absolute then it messes up all has been done so far. I need to think about it, on whether to have a footer which is not a DIV or a fixed one which as I said it's not the ideal solution I had in mind.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 34172942
I understand. Unfortunately, with all of those elements positioned absolutely, you may be hard pressed to find a proper/semantic/validated solution.

Last resort, could be a Javascript positioning script.  The idea would be to throw the element to the bottom of the page no matter what.  
0
 

Author Comment

by:nsiotto
ID: 34173058
Javascript positioning script seems a good idea.
Any practical suggestion in mind?
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 500 total points
ID: 34173064
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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 Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

719 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