Positiong a footer at the bottom of a page

vegancoder · 06-06-2005, 12:35

Here is my site so far: http://nanothree.net/layout/

I want to be able to have the div layer "footer" always at the bottom of the screen if the main content isnt big enough to push it that far, im not sure if that is clear enough or not.

Also when viewed in IE there is a strange block of color on the left hand side does anyone know how to fix that?

FrozenDice · 06-06-2005, 20:01

Heres your corrected css peice, just replace this into your file.

#footer{
width:600px;
clear:both;
background-image:url(images/index_28.gif);
background-repeat:repeat-x;
text-align:right;
position:absolute;
bottom: 0px;

Although this will NOT track the bottom of the page if you scroll. If your looking to have the footer actually stay at the bottom of the page as you scroll please reply and I'll send you the code to do that.

FrozenDice · 06-06-2005, 20:09

This just struck me. Why don't you just make a frame thats like 60px and have the footer sit there?

vegancoder · 19-06-2005, 15:30

could you post that code please, sorry for the delay i never recieved an email saying you had replied :S

FrozenDice · 20-06-2005, 05:27

The code for a frameset? Sure. You may want to learn about framesets on google, they are somewhat common.

FrozenDice · 20-06-2005, 05:42

Name this to be index.html. Rename your current index.html to main.html

Code:

<html>
<frameset rows="*,36px" frameborder="no" border="0" bordercolor="#FFFFFF" framespacing="0" >
   <frame name="Main" scrolling="no" src="main.html" frameborder="no" border="0" bordercolor="#FFFFFF" NORESIZE scrolling="auto" marginheight="0" marginwidth="0" >
   <frame name="footer" scrolling="no" src="footer.html" frameborder="no" border="0" bordercolor="#FFFFFF" NORESIZE scrolling="auto" marginheight="0" marginwidth="0" >
</frameset>
</html>

Then create the following file called footer.html using the code below. Download the image http://www.imagehut.org/i/147back.jpg and rename it back.jpg

Code:

<html>
<head>
<style type="text/css">
body
{
margin: 0px;
padding: 0px;
background-image: url(back.jpg);
background-position: center;
}
</style>
<body>

</body>
</head>

I typed all this code by hand so I hope it works for you. If not tell me and I'll fix it.

vegancoder · 20-06-2005, 16:28

i dont really want to use frames id like to use javascript and css can you help with that? sorry for not making that clear earlier, if yopui look at the demo now, opu can see that i have been able to push the footer down but it goes too far any idea why?

FrozenDice · 20-06-2005, 19:19

Yeah, you really have alot of code there. I mean wow. Best to try and keep it simple. I suggest taking this to http://www.webdeveloper.com/forum/fo...e=30&forumid=3

Thats a great javascript coding forum. They should have your solution if I can't find it.

vegancoder · 21-06-2005, 13:45

thanks alot, im gpoing to post there now

**Wistow** · 21-06-2005, 13:56

Why not use css and do a clear:both; in the css code for the footer div?
This should position the footer at the bottom of any other <div> tags above it

Have a look at some example css in the source code of the pages at http://www.kinkamono.com/design/layouts/

Craig

06-06-2005, 12:35	#1 (permalink)
vegancoder Active Member Join Date: May 2005 Location: Doncaster, UK Posts: 58 iTrader: 0 / 0%	Positiong a footer at the bottom of a page Here is my site so far: http://nanothree.net/layout/ I want to be able to have the div layer "footer" always at the bottom of the screen if the main content isnt big enough to push it that far, im not sure if that is clear enough or not. Also when viewed in IE there is a strange block of color on the left hand side does anyone know how to fix that?

21-06-2005, 13:56	#10 (permalink)
Wistow Moderator Join Date: Mar 2005 Location: Barnsley, UK Posts: 1,001 iTrader: 0 / 0%	Why not use css and do a clear:both; in the css code for the footer div? This should position the footer at the bottom of any other <div> tags above it Have a look at some example css in the source code of the pages at http://www.kinkamono.com/design/layouts/ Craig __________________ Webmaster Forum - Online Auctions - Free Traffic

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Footer text link available, just $10.95/mo, 2500+ pages	infoway	Buy and Sell Ad Space	0	29-03-2006 09:46
Centering a page	FrozenDice	Website Development Forum	2	15-07-2005 17:42
Need help to fox a few bugs with my page	vegancoder	HTML, DHTML and CSS	1	25-06-2005 13:48
Google ad's style space at top & bottom of my site	robertall	Buy and Sell Ad Space	6	05-04-2005 11:58
Photo Page	woodflooristcom	Search Engine Optimisation (SEO)	2	24-02-2005 17:36

06-06-2005, 20:01	#2 (permalink)
FrozenDice Senior Member Join Date: Jun 2005 Posts: 389 iTrader: 0 / 0%	Heres your corrected css peice, just replace this into your file. #footer{ width:600px; clear:both; background-image:url(images/index_28.gif); background-repeat:repeat-x; text-align:right; position:absolute; bottom: 0px; Although this will NOT track the bottom of the page if you scroll. If your looking to have the footer actually stay at the bottom of the page as you scroll please reply and I'll send you the code to do that.

06-06-2005, 20:09	#3 (permalink)
FrozenDice Senior Member Join Date: Jun 2005 Posts: 389 iTrader: 0 / 0%	This just struck me. Why don't you just make a frame thats like 60px and have the footer sit there?

19-06-2005, 15:30	#4 (permalink)
vegancoder Active Member Join Date: May 2005 Location: Doncaster, UK Posts: 58 iTrader: 0 / 0%	could you post that code please, sorry for the delay i never recieved an email saying you had replied :S

20-06-2005, 05:27	#5 (permalink)
FrozenDice Senior Member Join Date: Jun 2005 Posts: 389 iTrader: 0 / 0%	The code for a frameset? Sure. You may want to learn about framesets on google, they are somewhat common.

20-06-2005, 16:28	#7 (permalink)
vegancoder Active Member Join Date: May 2005 Location: Doncaster, UK Posts: 58 iTrader: 0 / 0%	i dont really want to use frames id like to use javascript and css can you help with that? sorry for not making that clear earlier, if yopui look at the demo now, opu can see that i have been able to push the footer down but it goes too far any idea why?

20-06-2005, 19:19	#8 (permalink)
FrozenDice Senior Member Join Date: Jun 2005 Posts: 389 iTrader: 0 / 0%	Yeah, you really have alot of code there. I mean wow. Best to try and keep it simple. I suggest taking this to http://www.webdeveloper.com/forum/fo...e=30&forumid=3 Thats a great javascript coding forum. They should have your solution if I can't find it.

21-06-2005, 13:45	#9 (permalink)
vegancoder Active Member Join Date: May 2005 Location: Doncaster, UK Posts: 58 iTrader: 0 / 0%	thanks alot, im gpoing to post there now

Positiong a footer at the bottom of a page

Positiong a footer at the bottom of a page

Similar Threads