#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
-------------------------
<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>
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?)
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.
See Footer at the Bottom.
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!
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.
listerd wrote:Is there some
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