Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Footer at the bottom

Posted on 2010-11-19
11
Medium Priority
?
316 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:Nicola Siotto
  • 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:Nicola Siotto
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:Nicola Siotto
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:Nicola Siotto
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:Nicola Siotto
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

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Question has a verified solution.

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

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
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…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses
Course of the Month11 days, 8 hours left to enroll

564 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