Dafydd Posted February 17, 2009 Share Posted February 17, 2009 So I managed to get my uber-simple html file to pass W3Schools' markup validation service. However, in the process, I changed the way it looked. The word "buffering" is supposed to be in the center of the screen but now it's in the top right corner. In other words, the alignment has no effect. The table width works, but the table height is still just one row. <table style="width:100%; height:100%"> <tr> <td style="align:center; valign:middle">buffering...</td> </tr></table> What do I need to do to get this aligned to the center of the screen? www.dafydd.se I also tried changing for this, but to no effect (vertically): <head><title>Dafydd's home</title><style type="text/css">body {background-color:#246092}table {table-layout:automatic; height:100%; width:100%}tr {color:#FFCC00}</style></head><body><table> <tr> <td>buffering...</td> </tr> <tr> <td> <a href="http://validator.w3.org/check?uri=referer"> <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88"/></a> </td> </tr></table></body> The whole thing displays correctly (vertically) using W3Schools' own "try it yourself editor", but not as a real page. Quote Link to comment Share on other sites More sharing options...
m68030 Posted February 17, 2009 Share Posted February 17, 2009 It seemed like such a simple question... but a few minutes of lazy google searching has produced a slew of horrors over IE's buggy CSS implementation and using javascript as a method to patch around it so it always works. Certainly there is a more obvious way to do this. I'll keep digging.^H^H^H^H^H^H^H^H^H^H^H^H^H^H^H^H^H^H^H^H^H^H^H^H^H^H What about changing the tables to DIVs and setting it as: position: fixed;left: 50%;top: 50% Quote Link to comment Share on other sites More sharing options...
Dafydd Posted February 17, 2009 Author Share Posted February 17, 2009 I should probably read up on divs, because I asked this quesiton at another forums hoping for a faster response, and he said the same thing. Thanks. Quote Link to comment Share on other sites More sharing options...
Dhsu Posted February 17, 2009 Share Posted February 17, 2009 <td style="text-align:center; vertical-align:middle">buffering...</td> works for me. <div style="display:table-cell; text-align:center; vertical-align:middle">buffering...</div> is equivalent. Edit: Correction, display:table-cell is not equivalent; there needs to be at least another populated table-cell div in the same row in order for it to work correctly. Quote Link to comment Share on other sites More sharing options...
SoulinEther Posted February 17, 2009 Share Posted February 17, 2009 I will have to note these suggestions. Vertical alignment was never something I could do well either (and I use divs exclusively too :/). woo, collective learning. Quote Link to comment Share on other sites More sharing options...
Dhsu Posted February 18, 2009 Share Posted February 18, 2009 I was gonna recommend margin-top:50% as yet another solution, but oddly enough when I tested it the div showed up about 4/5 of the way down the page. Hrm. CSS makes no sense sometimes. :/ Quote Link to comment Share on other sites More sharing options...
Dafydd Posted February 18, 2009 Author Share Posted February 18, 2009 I was gonna recommend margin-top:50% as yet another solution, but oddly enough when I tested it the div showed up about 4/5 of the way down the page. Hrm. CSS makes no sense sometimes. :/ Seconded. Web programming is really unpredictable compared to other programming, everything will "work" and without error messages but you never know if the result is going to be what you wanted. And since there are no error messages it's really hard to track down your mistakes. Quote Link to comment Share on other sites More sharing options...
SoulinEther Posted February 19, 2009 Share Posted February 19, 2009 And let's not forget that webkit/KHTML, gecko, Presto, Trident.. and all the other different layout engines available display pages differently. so much for "standards" ... Quote Link to comment Share on other sites More sharing options...
Ramaniscence Posted February 19, 2009 Share Posted February 19, 2009 Here's the way I always do it: body { text-align: center; } But you need to make sure if you're nesting stuff within stuff you change the text-align WITHIN the block elements to left ALSO: div { margin: 0 auto 0 auto } will do the same thing, but I don't THINK works in IE. Usually I do both of these to make sure stuff works right. I'm all about w3 standards for the challenge if nothing else =P Quote Link to comment Share on other sites More sharing options...
Dafydd Posted February 19, 2009 Author Share Posted February 19, 2009 But you need to make sure if you're nesting stuff within stuff you change the text-align WITHIN the block elements to left Wait, what? Quote Link to comment Share on other sites More sharing options...
Ramaniscence Posted February 19, 2009 Share Posted February 19, 2009 Wait, what? <HEAD> <STYLE> body { text-align: center; } DIV.main-content { text-align; left; } </STYLE></HEAD><BODY> <DIV class="main-content">SUP BRO</DIV></BODY> If you use "text-align: center" to make sure DIV.main-Container is centered on the page, you need to make sure you define that the text WITHIN Div.main-cotainer is aligned to the LEFT, otherwise it'll align to the center as well. Quote Link to comment Share on other sites More sharing options...
Dafydd Posted February 19, 2009 Author Share Posted February 19, 2009 Uh... if A is in the center of B which is in the center of C, then A should still be in the center of C. Right? Because right now it sounds like you're telling me that if A is in the center of B which is in the center of C, then A will be to the right of the center of C. HTML makes no sense sometimes. EDIT: I tried both, and as it turns out, if both are center, "SUP BRO" ends up in the center, but if body { text-align: center; } and DIV.main-content { text-align: left; } it ends up on the left side. Which makes sense, I guess. What I really wanted was to put "buffering" at the very middle of the screen and the image in the bottom center. The page would "fill" the whole screen but with no scrolling needed to see the image. Like this: Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.