cs1h Posted July 17, 2008 Share Posted July 17, 2008 Hi, I am having trouble getting my web page to center in browsers. I have tried doing using css and div tags but I can't get it to work. The code is, <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link href="css_cinema.css" rel="stylesheet" type="text/css" /> <style type="text/css" media="screen"> body { text-align:center; } #container { margin: 0 auto; } </style> </head> <body> <div id="container"> <div id="top_banner" style="z-index: 2; position: absolute; left: 0px; top: 0px; width: 900px; background-image: url(top_background_image.png); height: 170px; border-right-color: #000000; border-right-style: solid; border-right-width: 1px;"></div> <div id="top_side" style="z-index: 2; position: absolute; left: 0px; top: 0px; width: 300px; height:300px; background-image: url(top_corner.png);"></div> <div id="side_menu" style="z-index: 2; position: absolute; left: 0px; top: 300px; width: 150px; height:700px; background-image: url(side_background.png); border-bottom-color: #000000; border-bottom-style: solid; border-bottom-width: 1px;"></div> <div id="main_box" style="z-index: 2; position: absolute; left: 150px; top: 170px; width: 750px; height:830px; border-bottom-color: #000000; border-bottom-style: solid; border-bottom-width: 1px; border-right-color: #000000; border-right-style: solid; border-right-width: 1px;">content goes here</div> </div> </body> </html> Can anyone help? Thanks, Colin Quote Link to comment https://forums.phpfreaks.com/topic/115213-help-to-center-my-web-pages/ Share on other sites More sharing options...
haku Posted July 17, 2008 Share Posted July 17, 2008 When you position something absolutely, it gets positioned on the page exactly where you tell it, and doesn't move. That's the basic source of your problems, but I can see that overall you must just be starting out with CSS, in which case it would be worth spending some time learning how it works. Spend some time on the following tutorials, and it will give you a good start to CSS. If you don't spend some time learning at the start, it will lead to HUGE headaches in the future, as CSS is hard enough to use effectively even when you do understand the basics. HTML dog CSS tutorials Quote Link to comment https://forums.phpfreaks.com/topic/115213-help-to-center-my-web-pages/#findComment-592914 Share on other sites More sharing options...
TheFilmGod Posted July 18, 2008 Share Posted July 18, 2008 Here do this: <div style="width: 800px; margin: 10px auto 0 auto; position: relative;"> all other content </div> This creates a div that is 800px wide and that is centered. All the other elements will be positioned according to this div, since it has "position: relative" attached to it. Quote Link to comment https://forums.phpfreaks.com/topic/115213-help-to-center-my-web-pages/#findComment-593018 Share on other sites More sharing options...
corbin Posted July 18, 2008 Share Posted July 18, 2008 Uh, doesn't that mean that the div will be positioned relative to where it normally would've been? (But no top/left were supplied, so it would just be normal I guess.) Then again, I suck at CSS. Quote Link to comment https://forums.phpfreaks.com/topic/115213-help-to-center-my-web-pages/#findComment-593100 Share on other sites More sharing options...
haku Posted July 18, 2008 Share Posted July 18, 2008 Everything inside an element with position:relative will be positioned relative to that containing element. Quote Link to comment https://forums.phpfreaks.com/topic/115213-help-to-center-my-web-pages/#findComment-593106 Share on other sites More sharing options...
corbin Posted July 18, 2008 Share Posted July 18, 2008 I thought the actual element was positioned relatively to where it normally would've been. Weird. Guess it's lucky that I don't use relative positioning frequently. Quote Link to comment https://forums.phpfreaks.com/topic/115213-help-to-center-my-web-pages/#findComment-593111 Share on other sites More sharing options...
haku Posted July 18, 2008 Share Posted July 18, 2008 Well now you can! To give an example, if I have the following structure: <div id="container"> <img id="img1" src="path1.jpg" /> <img id="img2" src="path2.jpg" /> <img id="img3" src="path3.jpg" /> <img id="img4" src="path4.jpg" /> </div> And the following CSS: #container { width: 50%; margin: 0 auto; position: relative; } #img1 { position: absolute; top: 0; left: 0; } #img2 { position: absolute; top: 0; right: 0; } #img3 { position: absolute; bottom: 0; left: 0; } #img4 { position: absolute; bottom: 0; right: 0; } Then the containing div will be centered in the screen, and the four images will be positioned in the four corners of that div. Quote Link to comment https://forums.phpfreaks.com/topic/115213-help-to-center-my-web-pages/#findComment-593121 Share on other sites More sharing options...
micmania1 Posted July 18, 2008 Share Posted July 18, 2008 <body> <center> <div class="content"> blah blah blah </div> </center> </body> Quote Link to comment https://forums.phpfreaks.com/topic/115213-help-to-center-my-web-pages/#findComment-593280 Share on other sites More sharing options...
KevinM1 Posted July 18, 2008 Share Posted July 18, 2008 I thought the actual element was positioned relatively to where it normally would've been. Weird. Guess it's lucky that I don't use relative positioning frequently. Actually, you're right: http://www.w3.org/TR/REC-CSS2/visuren.html#positioning-scheme And, no, you don't need position: relative to center something on the screen. Merely putting margin: 0 auto will suffice. Quote Link to comment https://forums.phpfreaks.com/topic/115213-help-to-center-my-web-pages/#findComment-593340 Share on other sites More sharing options...
haku Posted July 18, 2008 Share Posted July 18, 2008 micmania1: The center tag is deprecated and as such shouldn't be used. It may or may not be supported in future browsers, and from one thread that was started in on this site, it appears that it may not be supported in firefox 3 - which has a hefty market share right now. And, no, you don't need position: relative to center something on the screen. Merely putting margin: 0 auto will suffice. If you had looked at the original posters post, you would see: A) they already did that, and B) it doesn't work. And if you know about CSS, you would be able to tell: C) why D) that you do in fact need position: relative to center the code as the user has posted it In this case margin: 0 auto doesn't suffice. Quote Link to comment https://forums.phpfreaks.com/topic/115213-help-to-center-my-web-pages/#findComment-593458 Share on other sites More sharing options...
KevinM1 Posted July 18, 2008 Share Posted July 18, 2008 Ah, didn't see the absolutely positioned divs in the OP's code. Quote Link to comment https://forums.phpfreaks.com/topic/115213-help-to-center-my-web-pages/#findComment-593515 Share on other sites More sharing options...
corbin Posted July 18, 2008 Share Posted July 18, 2008 Well now you can! To give an example, if I have the following structure: .......... I probably would've done that a bit differently x.x. I didn't learn the magic of auto margins until about a week ago, and never thought about em much. I would consider my self good at PHP, but when it comes to CSS, I'm terrible. Quote Link to comment https://forums.phpfreaks.com/topic/115213-help-to-center-my-web-pages/#findComment-593705 Share on other sites More sharing options...
siwelis Posted July 23, 2008 Share Posted July 23, 2008 I'm old school, but this can easily be done without CSS... Put all of your content inside a table and just center the table... <div align="center"> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="80%"> <tr> <td width="100%"> <!--Start content--> HERES ALL YOUR CONTENT! ALL NEATLY DISPLAYED IN THE CENTER OF PAGE! <!--End content--> </td> </tr> </table> </div> Play with the "width" attribute to see how you want it... (don't forget to check it in multiple resolutions (control panel>display>resolution...) - pretty much all browsers interpret the ol' school table stuff the same, but you can test it in different browsers too) Quote Link to comment https://forums.phpfreaks.com/topic/115213-help-to-center-my-web-pages/#findComment-597057 Share on other sites More sharing options...
TheFilmGod Posted July 23, 2008 Share Posted July 23, 2008 I'm old school, but this can easily be done without CSS... Put all of your content inside a table and just center the table... <div align="center"> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="80%"> <tr> <td width="100%"> <!--Start content--> HERES ALL YOUR CONTENT! ALL NEATLY DISPLAYED IN THE CENTER OF PAGE! <!--End content--> </td> </tr> </table> </div> Play with the "width" attribute to see how you want it... (don't forget to check it in multiple resolutions (control panel>display>resolution...) - pretty much all browsers interpret the ol' school table stuff the same, but you can test it in different browsers too) This is exactly why you don't use table. You see all the clutter just one table has created? - But that isn't all. To just center a table with 80% width, requires 4 tags. While css requires 1. <div style="margin: 0 auto; width: 80%;"> Content goes here. </div> Quote Link to comment https://forums.phpfreaks.com/topic/115213-help-to-center-my-web-pages/#findComment-597076 Share on other sites More sharing options...
haku Posted July 23, 2008 Share Posted July 23, 2008 Not only that, tables are outdated, non-semantic, and combine content and presentation, which goes against current day standards. You are correct in that you are old-school, but in this case I'm sorry to tell you, that is not a good thing. Quote Link to comment https://forums.phpfreaks.com/topic/115213-help-to-center-my-web-pages/#findComment-597104 Share on other sites More sharing options...
siwelis Posted July 27, 2008 Share Posted July 27, 2008 Please correct me if I'm wrong, but it seems that tables will never cease being supported and are currently interpreted correctly and supported more than CSS (think mobile devices!). I say they'll never ceased being supported because that would render a lot of information presentation across the internet useless... While it may not be the latest style (pun intended) of presentation, it's still a major backbone. Take a look at this page, even it uses tables! Some things just need the solidity of tables IMO... I guess that's why major companies like Yahoo and Google haven't switched completely to CSS yet. It's also like a mullet, it's coming back!!! My code and my hair may look like hell, but it's functionality I seek. I've probably been missing out a lot without exploring CSS completely, but I've never been motivated working with something that works and when testing out CSS having cross-OS and cross-browser issues issues. I don't even own an iPhone or a cellphone with a browser in general, so I'd just be guessing and crossing my fingers that my CSS would be interpreted right. Oh well! lol I don't want to argue about it anyway, the bottom line is I was just providing an another solution. You can do it without divs too... <center> <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="87%"> <tr> <td width="100%">CONTENT</td> </tr> </table> </center> <!--OR--> <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="87%" align="center"> <tr> <td width="100%">CONTENT</td> </tr> </table> Quote Link to comment https://forums.phpfreaks.com/topic/115213-help-to-center-my-web-pages/#findComment-601059 Share on other sites More sharing options...
TheFilmGod Posted July 27, 2008 Share Posted July 27, 2008 ^^^ Response to previous post: Of course tables will always be supported and rendered more correctly than css - tables are needed for tabular data and even css gurus like to style their tabular data nicely. Tables are also much easier for computers to deduce. On the other hand, the box model is extremely complex, but worthwhile for computers to render them and people to learn. The reason google and yahoo still use tables is NOT because tables are more efficient and better - during production it costs more to develop and upkeep them. The reason they use them is because tables are the best supported technique to position things on the screen. Even IE4 would be able to position it correctly. Tables are not coming back - it just seems like it because there are millions of newbies (possibly like yourself) who try to develop websites without first reading a good book about html/css and proper web design. To me, they are just wasting their time. Quote Link to comment https://forums.phpfreaks.com/topic/115213-help-to-center-my-web-pages/#findComment-601102 Share on other sites More sharing options...
siwelis Posted July 28, 2008 Share Posted July 28, 2008 lol i was just joking about it coming back... maybe the mullet is coming back stronger than i anticipated. Quote Link to comment https://forums.phpfreaks.com/topic/115213-help-to-center-my-web-pages/#findComment-601706 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.