?
Solved

Footer at the bottom

Posted on 2010-11-19
11
Medium Priority
?
313 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
Independent Software Vendors: 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 2000 total points
ID: 34173064
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.

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
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…
Suggested Courses
Course of the Month11 days, 3 hours left to enroll

770 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