Milque
-
Posts
2 -
Joined
-
Last visited
Milque's Achievements
Newbie (1/7)
0
Reputation
-
Thanks for the link, it made my footer visible now, but it still won't go to the bottom of the page. Instead, it messes up my layout. Here's what I mean:Another test pageAnd here's my styles for "container" and "footer": #container{ position: relative; width: 780px; background-image: url(images/containerbg.jpg); background-repeat: repeat-y; background-attachment: scroll; margin: 0px auto; text-align: left; overflow: auto; min-height: 100%; height: auto !important; height: 100%; z-index: 0}#footer{ width: 100%; position: absolute; bottom: 0 !important; bottom: -1px; background-image: url(images/footer.jpg); text-align: center; font: 7pt/11pt "Trebuchet MS", Arial, Verdana, sans-serif; color: #666666; float: right; height: 55px} Can you tell me where I went wrong? Thanks.
-
Hello.When I put absolute positioning in my div layers (except for the "footer" layer), my footer automatically disappears. Then I tried absolute positioning the "footer", but it appears without the text and is positioned all wrongly (somewhere in the middle of the layout).Also, my layout looks (almost) perfect in Firefox, but in IE, the header is 'off', as in it's placed a little to the left.Here's an example:Test PageHere's the stylesheet: body { background-color: #d2d2d2; background-image: url(images/containerbg.jpg); background-position: center; background-repeat: repeat-y; background-attachment: scroll; cursor: default; padding: 0; margin: 0; text-align: center; height: 100%}#container{ width: 780px; background-image: url(images/containerbg.jpg); background-repeat: repeat-y; background-attachment: scroll; margin: 0px auto; text-align: left; overflow: auto; z-index: 0}#header{ position: absolute; top: 0px; width: 780px; background-image: url(cow/cheader.jpg); float: left; z-index: 0}#left{ position: absolute; top: 274px; width: 584px; background: none; font: 8pt/14pt "Trebuchet MS", Arial, Verdana, sans-serif; color: #666666; float: left; text-align: left; margin-left: 2px;}#leftcontent{ position: absolute; top: 200px; left: 20px; width: 564px; background-color: #ffffff; font: 8pt/14pt "Trebuchet MS", Arial, Verdana, sans-serif; color: #666666; text-align: left; float: right; margin-right:11.5px;} #right{ position: absolute; top: 130px; left: 830px; width: 160px; background: none; font: 8pt/14pt "Trebuchet MS", Arial, Verdana, sans-serif; color: #666666; text-align: left; float: right; margin-right: 6px; z-index: 1}#footer{ width: 780px; height: 55px; background-image: url(images/footer.jpg); text-align: center; font: 7pt/11pt "Trebuchet MS", Arial, Verdana, sans-serif; color: #666666; float: right; overflow: auto} And here's the HTML: <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title> Yours Truly, Qis</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="styles.css" /></head><body><div id="container"><!-- BEGIN HEADER --><div id="header"><img src="images/cheader.jpg" width="780" height="474" alt="banner" /> </div><!-- END HEADER --><!-- BEGIN CONTENT --><div id="left"><div id="leftcontent">Welcome message! This is where I post! </div></div><!-- END CONTENT --><!-- BEGIN NAVIGATION --><div id="right"><h1>About Me</h1><p>Basic things about me. </a><h1>Navigate</h1>+ <a href="http://">Link</a><br><!-- END NAVIGATION --></div><!-- BEGIN FOOTER --><div id="footer"><b>Site</b> © <a href="mailto:YOU@DOMAIN.COM">Qis</a> | All Rights Reserved |<b>Design</b> © Qis</div><!-- END FOOTER --></div></body></html> So how can I make my footer appear and placed at the bottom of the page properly? And how do I make the header be aligned properly in IE like it does in Firefox?Thanks in advance.