Solved

Footer at the bottom

Posted on 2010-11-19
11
308 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
  • 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 14

Expert Comment

by:leoahmad
ID: 34172522
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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How do i set padding within the sidebar? 2 27
alert before form submission 6 31
WordPress Themes 10 34
remove background quote mark from widget 6 23
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 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…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

920 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now