Solved

Footer at the bottom

Posted on 2010-11-19
11
309 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
FIx alignment of two texts 1 32
Applying an inline style that applies to child elements 2 48
Error on link 14 46
CSS Logo Problem. 2 20
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…
This article discusses four methods for overlaying images in a container on a web page
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 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 …

813 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

17 Experts available now in Live!

Get 1:1 Help Now