Opius Posted November 12, 2005 Share Posted November 12, 2005 Alright, so I've got this website I'm working on. Standard three column design, navigation on left, content in the middle, comments on the right, and copyright/random crap at the bottom. Seen full-screen, there's no problems at all with it. However, once I make my browser window small enough to warrant scrolling, the two sidebars stop at the height of the viewpoint. You can also see the bottom text is happily sitting over the content text. I know there are quite a few issues with 100% height and viewports, but none of the solutions I've tried have work. Since the forums strip any formatting you may prefer to have the raw files, so click here. HTML <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head> <style type="text/css"> <!-- @import "/bruce/resources/css/bim.css"; --> </style> <title>Header</title></head><body> <div class="left"> <div class="topspacer"> </div> <a href="/bruce/">Home</a><br /> <a href="/bruce/airport/">Airport Transfers</a><br /> <a href="/bruce/general/">General Travel</a><br /> <a href="/bruce/tours/">Tours</a><br /> <a href="/bruce/weddings/">Weddings</a><br /> <a href="/bruce/corporate/">Corporate Travel</a><br /> </div> <div class="right"> <div class="testname">Example Name</div> <div class="testmess">Example Text</div> <div class="testname">aD34</div> <div class="testmess">asfsdf</div> <br /> <a href="/bruce/add/">Add your testimony</a> </div> <div class="center"> <div class="mheader">HEADER</div> <div class="centered"> <img src="/bruce/resources/images/newfront.jpg" alt="Placeholder Image" /> <br /> <div class="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer odio. In dictum est non quam. Phasellus viverra pharetra ipsum. Phasellus laoreet. Duis vel risus. Pellentesque nec lorem. Pellentesque nisi leo, mollis et, cursus sed, mattis aliquam, purus. Etiam eu felis. Praesent laoreet nunc non neque. Cras urna dui, dictum vel, auctor et, egestas et, nibh. Mauris egestas, magna in volutpat fermentum, metus sem tincidunt erat, quis consectetuer magna massa sit amet pede. Aliquam sollicitudin nulla placerat urna. Morbi ipsum. Fusce vitae pede. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur accumsan. Phasellus nec libero. Aliquam neque mi, imperdiet eget, consectetuer eget, tincidunt vel, quam. Vestibulum turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nullam at nulla sit amet neque tempus auctor. Quisque tellus purus, porttitor scelerisque, aliquam eget, rutrum nec, lorem. Proin gravida, nibh et blandit varius, elit nunc semper nisi, quis scelerisque sem nisi at turpis. Cras feugiat purus vitae libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer at neque. Praesent viverra risus. Nunc porta vehicula leo. Mauris mattis nunc a sem. Quisque neque. Aliquam consequat dui ut enim. Nunc auctor. Pellentesque dapibus hendrerit nisl. Phasellus in pede. </div> </div> </div> <div class="footer"> <a href="/bruce/admin/">Admin login</a> :: <a href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.0 Strict</a> </div></body></html> CSS html,body {padding: 0px;margin: 0px;background-color: #000000;min-height: 100%;height: 100%;color: #FFFFFF;}a{color: #FFFFFF;font-size: 10pt;}a:hover{color: #FFB911;font-size: 10pt;} .left{float: left;width: 110px;height: 100%;background-color: #112F5C;border-right: #FFFFFF 2px solid;padding-right: 5px;color: #FFFFFF;font-weight: bold;text-align: right;}.center{padding-top: 3px;padding-bottom: 3px;margin-left: 120px;margin-right: 120px;}.right{float: right;width: 110px;height: 100%;background-color: #112F5C;border-left: #FFFFFF 2px solid;padding-left: 5px;color: #FFFFFF;font-weight: bold;text-align: left;}.topspacer{height: 15px;font-size: 1px;}.testname{padding-top: 10px;font-weight: bold;font-size: 12pt;}.testmess{font-size: 10pt;}.mheader{font-weight: bold;font-size: 36pt;color: #FFB911;text-align: center;}.centered{text-align: center;}.content{/*THIS NEEDS FIXING FOR IE */position: relative;left: 10%;right: 10%;width: 80%;color: #FFFFFF;}.footer{position: absolute;bottom: 0px; width: 100%;height: 20px;text-align: center;} Anyone who gets this working gets a karma reward. I've been pulling my hair out for the past six hours trying to get this to work. Link to comment Share on other sites More sharing options...
Cojawfee Posted November 12, 2005 Share Posted November 12, 2005 (edited) Ok, here we go. I added another div to hold your three middle divs called container. Then changed this in the CSS, I'll upload something quickly to show you what it looks like. .container{background-color: #112F5C;height:100%}.left{float: left;width: 110px;height: 100%;background-color: #112F5C;border-right: #FFFFFF 2px solid;padding-right: 5px;color: #FFFFFF;font-weight: bold;text-align: right;}.center{padding-top: 3px;padding-bottom: 3px;margin-left: 120px;margin-right: 120px;background-color: #000000;height:100%;}.right{float: right;width: 110px;height: 100%;background-color: #112F5C;border-left: #FFFFFF 2px solid;padding-left: 5px;color: #FFFFFF;font-weight: bold;text-align: left;} In action. Doesn't work too great in IE. But then again, neither did your original version. ARGH! Foiled again. It works in IE but looks like crap. It looks good in Firefox but doesn't work. I hate browsers not all using the same standards. Edited November 12, 2005 by Cojawfee Link to comment Share on other sites More sharing options...
vALKYR Posted November 12, 2005 Share Posted November 12, 2005 mmkay, I uploaded the whole thing to my site and I changed the css only a lil bit. Clicky. With .footer{position: relative;bottom: 0px;width: 100%;height: 20px;text-align: center;} I changed position to relative so that it will "go with the flow" while minimizing the browser. The Admin CP etc does not overlap the writing (.content) anymore. However, as seen here: ... the class left, center and right still stop where they're supposed to stop. I guess you can fix that by using <table (...)> So: <table width="100%" border="0"<tr> <td> text here and so on. Good luck. Link to comment Share on other sites More sharing options...
Cojawfee Posted November 12, 2005 Share Posted November 12, 2005 (edited) I was going to suggest having a table, but that defeats the purpose of the DIV. Why didn't I think of this before? Use mine, but put the borders on the center. Fixed and done. I'll have it uploaded in a second. Link. Just keep what you have for the source. CSS file (slightly changed from what I have above). So this is what I did: I changed the background color of the entire site (You don't need the container div I put in then). This makes it so everything is the blue color. I changed the background color of the center DIV to black and made its height to 100%. I put the borders on the black so no matter what, the borders go all the way down. I also got rid of the background colors of the two side DIVs as you wouldn't need it anymore. Edited November 12, 2005 by Cojawfee Link to comment Share on other sites More sharing options...
vALKYR Posted November 12, 2005 Share Posted November 12, 2005 Good work. I think if you then change the .footer from absolute to relative the whole problem is fixed, I guess. Link to comment Share on other sites More sharing options...
Opius Posted November 13, 2005 Author Share Posted November 13, 2005 Works great Cojawfee! The only thing I had to change was .footer to relative (like Valk said) and .center's height to 100%. Thanks a lot! Link to comment Share on other sites More sharing options...
Svip Posted November 13, 2005 Share Posted November 13, 2005 Works great Cojawfee! The only thing I had to change was .footer to relative (like Valk said) and .center's height to 100%. Thanks a lot! CSS is most puzzling work, where you just have to tweak the smallest bits. But any programming language has those issues; human error. Link to comment Share on other sites More sharing options...
BenMillard Posted November 14, 2005 Share Posted November 14, 2005 Putting the XML prolog at the top will put IE6 into the "quirks mode" for rendering. This means it will operate like the broken browsers from the mid 1990's. If you know PHP, I can show you a neat way to only include it in devices which are XHTML compliant and server the content as application/xhtml+xml to them at the same time. <div class="content"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer odio. In dictum est non quam. Phasellus viverra pharetra ipsum. Phasellus laoreet. Duis vel risus. Pellentesque nec lorem. Pellentesque nisi leo, mollis et, cursus sed, mattis aliquam, purus. Etiam eu felis. Praesent laoreet nunc non neque. Cras urna dui, dictum vel, auctor et, egestas et, nibh. Mauris egestas, magna in volutpat fermentum, metus sem tincidunt erat, quis consectetuer magna massa sit amet pede. Aliquam sollicitudin nulla placerat urna. Morbi ipsum. Fusce vitae pede. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur accumsan. Phasellus nec libero. Aliquam neque mi, imperdiet eget, consectetuer eget, tincidunt vel, quam. Vestibulum turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nullam at nulla sit amet neque tempus auctor. Quisque tellus purus, porttitor scelerisque, aliquam eget, rutrum nec, lorem. Proin gravida, nibh et blandit varius, elit nunc semper nisi, quis scelerisque sem nisi at turpis. Cras feugiat purus vitae libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer at neque. Praesent viverra risus. Nunc porta vehicula leo. Mauris mattis nunc a sem. Quisque neque. Aliquam consequat dui ut enim. Nunc auctor. Pellentesque dapibus hendrerit nisl. Phasellus in pede.</p></div> Using the paragraph tag means you can use CSS to change how these blocks of text are seperated, how they are presented and so on. For example, you could give them a bottom margin of 1em and no top margin so they appear immediatly below any heading elements (as long as you remove bottom margins of the heading elements). You could also use p {text-align: justify} to make main content fit nicely onto lines without causing content in the sidebars from becoming weird. Additionally, paragraph tags have a semantic meaning, as defined in the HTML specification. This allows devices to understand the structure of the pages more easily, so they can perform more reliable processing on them. For example, when you use paragraph elements, search engines can locate the content of your pages more easily. If you use heading elements correctly (<h1> to <h6>) then they can get a better idea about what subjects covered and helps them understand the structure of the document. I would suggest using smaller images, though. About 400 pixels is the widest which can be reliably accomodated on common screen sizes. There is a slight case of "DIV-itis" where lots of generic containers are used. Your <div class="mheader"> element would have more structural meaning (and be more efficient) as the top-level heading (<h1>) element. Headings for sections within the document would be <h2>, sections within those would be <h3> and so on. Still, it's a great start. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now