6 replies [Last post]
listerd
Offline
Regular
London
Last seen: 8 years 47 weeks ago
London
Timezone: GMT-5
Joined: 2007-02-08
Posts: 49
Points: 20

#footermainPan{height:85px; background:url(images/footerbg.gif) 0 0 repeat-x #fff; color:#010101; clear:both; padding:72px 0 0;}
 
 
 
#footerPan{width:683px; position:relative; margin:0 auto; font-family:"Trebuchet MS",Arial, Helvetica, sans-serif}
 
 
 
#footerPan ul{width:624px; position:relative; margin:0 auto;}
 
#footerPan li{float:left; }
 
#footerPan ul li a{padding:0 10px 0; color:#010101; background:#F3F3F3; text-decoration:none;}
 
#footerPan ul li a:hover{text-decoration:underline;}
 
 
 
#footerPan p.copyright{width:204px; background:#F3F3F3; color:#04496D; position:absolute; top:23px; left:40px; font-size:12px;}
 
 
 
#footerPan ul.templateworld{width:250px; background:#F3F3F3; color:#444; display:block; position:absolute; top:40px; left:40px; font-size:10px;}
 
#footerPan ul.templateworld li{height:20px;}
 
#footerPan ul.templateworld li a{background:#F3F3F3; display:block; color:#444; text-decoration:none;}
 
#footerPan ul.templateworld li a:hover{text-decoration:underline;}
 
 
 
#footerPanhtml{width:60px; height:13px; display:block; position:absolute; top:26px; left:260px;}
 
#footerPanhtml a{width:48px; height:11px; display:block; background:url(images/blue-arrow.gif) 85% 60% no-repeat #fff; color:#4F4F4F; border:1px solid #DEDEDE; line-height:11px; font-size:11px; font-weight:bold; text-decoration:none; padding:1px 0 0 10px;}
 
#footerPanhtml a:hover{background:url(images/gray-arrow.gif) 85% 60% no-repeat #fff; color:#4F4F4F;}
 
 
 
#footerPancss{width:50px; height:13px; display:block; position:absolute; top:26px; left:320px;}
 
#footerPancss a{width:40px; height:11px; display:block; background:url(images/blue-arrow.gif) 35px 3px no-repeat #fff; color:#4F4F4F; border:1px solid #DEDEDE; line-height:11px; font-size:11px; font-weight:bold; text-decoration:none; padding:1px 0 0 10px; text-transform:uppercase;}
 
#footerPancss a:hover{background:url(images/gray-arrow.gif) 35px 3px no-repeat #fff; color:#4F4F4F;}

------------------------

I am trying to position the footer at the absolute bottom of the page - was wondering if anyone glancing over this might see the best way to do this?

The HTML is also enclosed below....thanks - I really appreciate your help with this Wink

-------------------------

<div id="footermainPan">
 
  <div id="footerPan">
 
  	<ul>
 
		<li><a href="#">Home</a>| </li>
 
		<li><a href="#">About us</a>| </li>
 
		<li><a href="#">Support</a>| </li>
 
		<li><a href="#">Books</a>| </li>
 
		<li><a href="#">University</a>| </li>
 
		<li><a href="#">Blog</a>| </li>
 
		<li><a href="#">Ideas</a>| </li>
 
		<li><a href="#">Contact</a> </li>
 
	</ul>
 
	<p class="copyright">© hello world! All rights reserved.</p>
 
 
 
  <div id="footerPanhtml"><a href="http://validator.w3.org/check?uri=referer" target="_blank">HTML</a></div>
 
    <div id="footerPancss"><a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">css</a></div>
 
  </div>
 
</div>

listerd
Offline
Regular
London
Last seen: 8 years 47 weeks ago
London
Timezone: GMT-5
Joined: 2007-02-08
Posts: 49
Points: 20

ok - or put another way

what would prevent my footer from being stuck to the floor of the browser?

open ended question but typically what is the confict do you think? (as per the above code?)

pixelslut
Offline
newbie
US
Last seen: 11 years 22 weeks ago
US
Joined: 2009-08-23
Posts: 7
Points: 0

Well that depend on how

Well that depend on how youre trying to stick it, which unless im missing something isnt included in the code you posted. The sticking part is going to depend on the structure of the rest of your page, unless youre using fixed positioning which it doesnt seem that you are.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 3 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

See Footer at the Bottom.

See Footer at the Bottom. Is that what you want?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

listerd
Offline
Regular
London
Last seen: 8 years 47 weeks ago
London
Timezone: GMT-5
Joined: 2007-02-08
Posts: 49
Points: 20

Great - thanks for your

Great - thanks for your reply - that would be great....

Is there some code that I can try to get my footer to stick to the bottom - as per your example?

Also, will it be more useful if I post more, (or all) of the html to this thread?

Thanks again for your help!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I'm sure all the code you

I'm sure all the code you could need is provided in Gary's examples. You could have also had a look through the 'How To' section of the forum for a post on the subject along with links to further guides. You now need to try and apply the examples to your markup, at this stage posting more code will not necessarily help, attempt to achieve the positioned footer and post back if you run into issues that you need help with.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 3 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

listerd wrote:Is there some

listerd wrote:

Is there some code that I can try to get my footer to stick to the bottom - as per your example?

As Hugo suggested, it's all there. All you need to do is view the source.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.