CSS Footer

Tomi-gwc · 06-23-2008, 06:42 AM

Hello, I'm learning to code in XHTML/CSS. So far, (my first coding project) I have this: http://jrcdesigns.co.uk/test/Leafy/index.html
????: NamePros.com http://www.namepros.com/programming/484942-css-footer.html

The problem I am having is getting the footer image (The Leafy thing at the bottom) to be at the bottom. Right now it is set to absolute positioning, however this is just a short term fix that I am not happy with.

How can I have the footer not positioned absolute, with 100% width at the bottom of the page?

I have tried putting it outside the container however doing this makes it appear near the top of the page.

Any ideas?

silverdown · 06-26-2008, 10:49 PM

Looks like you have the image CSS position

Code:

position:absolute;

try

Code:

position:relative;

I am not sure this will work since I cannot test it out myself. However it is worth a try. Then just add

Code:

width:100%;

for the width above or under Position. I hope it works for you!

mholt · 06-27-2008, 11:48 AM

For your div#leaf styles, do:

Code:

position: absolute;
bottom: 0px;
z-index: 10;
width: 100%;

(make z-index value greater than the z-indexes of all other divs)
????: NamePros.com http://www.namepros.com/showthread.php?t=484942

Maybe want to add a padding:0px or margin:0px or both if you still have issues.

EDIT: I know you said you don't want absolute positioning, but I'm assuming you want them to be at the bottom... if you positioned relative, it would be stuck to the bottom of the content and not the frame and it would look kinda bad...

spyke100 · 07-04-2008, 03:04 AM

--- Post Deleted

06-23-2008, 06:42 AM	THREAD STARTER #1 (permalink)
Tomi-gwc NamePros Regular Join Date: Apr 2007 Location: England Posts: 429 Follow @InvincibleFX	CSS Footer Hello, I'm learning to code in XHTML/CSS. So far, (my first coding project) I have this: http://jrcdesigns.co.uk/test/Leafy/index.html ????: NamePros.com http://www.namepros.com/programming/484942-css-footer.html The problem I am having is getting the footer image (The Leafy thing at the bottom) to be at the bottom. Right now it is set to absolute positioning, however this is just a short term fix that I am not happy with. How can I have the footer not positioned absolute, with 100% width at the bottom of the page? I have tried putting it outside the container however doing this makes it appear near the top of the page. Any ideas? __________________ \|Design Portfolio \|LinkedIn \|Twitter

06-26-2008, 10:49 PM	#2 (permalink)
silverdown New Member Join Date: Jun 2008 Posts: 3	Looks like you have the image CSS position Code: position:absolute; try Code: position:relative; I am not sure this will work since I cannot test it out myself. However it is worth a try. Then just add Code: width:100%; for the width above or under Position. I hope it works for you!

06-27-2008, 11:48 AM	#3 (permalink)
mholt DNOA Member Join Date: May 2004 Posts: 5,040	For your div#leaf styles, do: Code: position: absolute; bottom: 0px; z-index: 10; width: 100%; (make z-index value greater than the z-indexes of all other divs) ????: NamePros.com http://www.namepros.com/showthread.php?t=484942 Maybe want to add a padding:0px or margin:0px or both if you still have issues. EDIT: I know you said you don't want absolute positioning, but I'm assuming you want them to be at the bottom... if you positioned relative, it would be stuck to the bottom of the content and not the frame and it would look kinda bad...

07-04-2008, 03:04 AM	#4 (permalink)
spyke100 New Member Join Date: Dec 2006 Location: New Jersey Posts: 12	--- Post Deleted Last edited by spyke100; 07-04-2008 at 08:48 AM.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)