CSS Footer

Tomi-gwc · 06-23-2008, 05: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

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, 09: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, 10: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)

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, 02:04 AM

--- Post Deleted

06-23-2008, 05:42 AM	#1 (permalink)
Tomi-gwc NamePros Regular Join Date: Apr 2007 Posts: 423 30.85 NP$ (Donate)	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 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? __________________ \|Article Directory everything for everyone

06-26-2008, 09:49 PM	#2 (permalink)
silverdown New Member Join Date: Jun 2008 Posts: 3 0.00 NP$ (Donate)	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, 10:48 AM	#3 (permalink)
mholt DNOA Member Join Date: May 2004 Location: Utah Posts: 5,041 18.01 NP$ (Donate)	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) 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... __________________ codeboards A high-quality community of programmers -- Join today and post! We want new members!

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

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