xboxrulz1405241485 0 Report post Posted March 12, 2009 Hey guys,I'm trying to have a logo at the very bottom of the screen, but I don't know how to do this in CSS. It's part of my project and it's just ridiculous to constantly inserting <br/>'s.Is there a way to always have it at the bottom no matter of screen resolution?Thanks,xboxrulz Share this post Link to post Share on other sites
iGuest 3 Report post Posted March 12, 2009 Can you show your page code, would make it easier to understand where you want your logo to be positioned and yes I do believe it to be ridiculous to use <br /> in your code, in fact, I have not found a use for using <br /> for anything I've designed.If your design is suppose to be fluid, it may also require some javascript. Otherwise if it just needs to come after your content or a fixed height/width, we could position it where you want it.Cheers,MC Share this post Link to post Share on other sites
xboxrulz1405241485 0 Report post Posted March 13, 2009 It's on a password protected server so I can only give you the code: <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd xmlns="http://www.w3.org/1999/xhtml/; <title/> <style type = "text/css"> body{font-family:"Calibri", "Bitstream Vera Sans", "Arial"; color: #FFFFFF; background-color:#2B3856} a:link{color:#ffffff} a:visited{color:#ffffff} </style></head><body> <h2><em><strong><u>Assignment 2</u></strong></em></h2> <h3><strong><u>Contents</u></strong></h3> <ul> <li><a href="index2.html" target="cframe">Index</a></li> <li><a href="medianet.html" target="cframe">MediaNet</a></li> <li><a href="pjharvey.html" target="cframe">P.J. Harvey</a></li> <li><a href="../" target = "_vblank">Home</a></li> </ul> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <p> <a href="http://validator.w3.org/check?uri=referer" target = "_vblank"><img src="http://www.w3.org/Icons/valid-xhtml10&%2334; alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a> </p></body></html> Thanks, xboxrulz Share this post Link to post Share on other sites
iGuest 3 Report post Posted March 13, 2009 OK, well I didn't want to spend too much time on this but there are plenty of alternatives.Only tested on Firefox, so not sure if my IE6 hack even works, or if it even works on IE7 or any other browser.I use XHTML 1.1 which only comes in strict, so you may need to revert back to XHTML 1.0 Transitional, I've also styled it differently to match what you were showing with your markup. I hope it matches it closely, visually.Just play around with it. <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/; xml:lang="en"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title>Logo at bottom</title> <style type="text/css"> html, body { height: 100%; } body { font-family: "Calibri", "Bitstream Vera Sans", Arial, sans-serif; color: white; background-color: #2B3856; } h1 { font-size: 1.5em; text-decoration: underline; font-style: italic; } #nav p { font-size: 1.2em; font-weight: bold; text-decoration: underline; } a, a:link, a:visited, a:hover, a:active, a:focus { color: white; background-color: inherit; } a img { border: none; } div#wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -31px auto; } div#footer { height: 31px; clear: both; position: relative; } .clear { height: 31px; clear: both; } </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>Assignment 2</h1> </div> <div id="nav"> <p>Content</p> <ul> <li><a href="index2.html">Index</a></li> <li><a href="medianet.html">MediaNet</a></li> <li><a href="pjharvey.html">P.J. Harvey</a></li> <li><a href="../">Home</a></li> </ul> </div> <div class="clear"></div> </div> <div id="footer"> <p><a href="http://validator.w3.org/check?uri=referer"><img src="http://forums.xisto.com/no_longer_exists/; alt="Valid XHTML 1.1" height="31" width="88" /></a></p> </div> </body></html> Cheers,MCP.S. position:fixed has it's problems in IE6 Share this post Link to post Share on other sites
xboxrulz1405241485 0 Report post Posted March 14, 2009 Thanks,I did find an alternative. p.footer{position:fixed; bottom:1px;} That forces it to the bottom.xboxrulz Share this post Link to post Share on other sites
iGuest 3 Report post Posted January 27, 2010 Unfortunately, not in Google ChromeCss & Putting Logos At The BottomP.Footer{position:fixed; bottom:1px;}While a wonderful solution for Firefox or IE, does not work in Chrome, and I have not been able to figure out why. -reply by Jim Selleck Share this post Link to post Share on other sites
