HTML - Centering Page!? Help!
Ive had this problem where when i create a page and I view it on my computer, it looks fine and centered. But when i access my site from another computer with a different sized monitor, it looks a lot different and uncentered. How do I get my page to look the same on every computer no matter the size? Thank You.
Similar TutorialsHello, I've put the Code: <div align="center"> below the Code: <body> tag and closed it with the Code: </div> before the Code: </body> tag. The page doesn't center at all. Is looking fine in 1024x768 but in any bigger resolution, the page is aligned to the left. The page that I am talking for is this. Any idea? I know some HTML but not a lot. I'm working on an HTML version of my companies website (it's currently in flash.) I'm happy with the design right now but I can'ty seem to find a way to center all of the contents of the page. Any help would be very much appreciated. http://www.ars-guardian.com/htmlhome.html Okay, so me andd my friend are making a website, http://bitememanga.com/, and she designed a template for uor site that we can't center. I've tried putting <center> tags around the entire body, and around every div, but it won't work for some reason. I really need to center this whole page so it looks decent on any computer resolution. Thanks! The code is: <html> <title>Bite Me - The online shonen-ai manga novel/book - gay vampires, fantasy, anime and so much more.</title> <center> <body> <div class="bg" style="position: absolute; left:300px top:0px; width:800px; height:750px; overflow: hidden;"> <img src="http://i41.tinypic.com/nyfe3s.jpg"> </div> <div class="content" style="position: absolute; top:250px; width:500px; height:200px; overflow: auto;"><font color=white> Welcome to Bite Me, the online shonen ai manga about Aku the vampire, and his love, Haru.<br> At the moment, we do not have any manga posted.<br> A few things need to happen before anythings posted.<br> If you have any questions,suggestions,or comments, you can contact us at bitememanga@hotmail.com<br> And remember to keep checking back every few days to see if we have any updates! </font> </div> </body> </center> </html> I just noticed that the site I coded is not centered but is aligned to the left on resolutions larger than 1024x768. Is there a way to fix this? Here is the css for the main div which has all the content. #container { position:absolute; left:0px; top:0px; width:1002px; height:auto; margin:0px auto; border:0; padding:0; Nevermind....... Hi, I have a webpage which is 1740px long however, i would like it so the amount of background on both sides the viewer sees depends on the viewers resolution. Here is the address to the site: http://luminaskincare.ca/new/luminarightsize.html how can I make the site centered with no horizontal scroll? thanks in advance I have this question, I am under the impression(?) that browser settings change with various pc and different browsers, but the most simple question of all cannot be found anywhere and the tech support of my domain hosting cannot assist, as their product for developing webpages is currently in beta testing. IS there a code..any code, that centers the ENTIRE website after it is placed? using <center>mywebsitehere</center> does not work, and tables were not used at all in setting this up, in fact I have no idea how to use tables. When you are working in your files and setting up your page for publishing, there is no area for margins, page indents, size of viewing area, nothing. I have manually recoding the existing files and they all default "left" after saving/publishing. Any ideas or help appreciated. The web url is www.yourock24.com. I view it as alot of black area to the right and cannot correct this by myself. Thanks in advance for assistance! Hi All, I have a problem with centering a page to the screen on a new site. The page is 945px wide, and is fine in IE. But in both Firefox and Safari the page is moved to the left of the screen. Does anyone have an idea of what I have done wrong here? Here is a link to the page:- Website Hi all, I'm a totally new user to HTML and CSS. I hope i could get some simple and clear advices from you guys. I create this website using manual positioning. Here's the link ---> www.danielgohdesign.com I would like my site to be in the center for all browser. What should i do? Thanks, Dan I believe the problem is that the fact that the pictures are using an absolute position. Not sure though. I have tried about 4 or 5 different thing to fix this to no avail. I will copy in the code for you to see. I do not have this running on a server for everyone to load but it is not much code. Any help would be greatly appreciated. Thansk, Dano HTML Code: <html> <head> <title>Official Site of Premier Security Group, Inc.</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> .centerContainer { margin: 0 auto; } body { background-image:url(images/bkgd2.png) } #Table_01 { position:absolute; left:0px; top:0px; width:800px; height:1200px; } #PSindex-01 { position:absolute; left:0px; top:0px; width:800px; height:69px; } #PSindex-02 { position:absolute; left:0px; top:69px; width:20px; height:174px; } #PSindex-03 { position:absolute; left:20px; top:69px; width:760px; height:174px; } #PSindex-04 { position:absolute; left:780px; top:69px; width:20px; height:174px; } #PSindex-05 { position:absolute; left:0px; top:243px; width:800px; height:13px; } #PSindex-06 { position:absolute; left:0px; top:256px; width:20px; height:35px; } #PSindex-07 { position:absolute; left:20px; top:256px; width:126px; height:35px; } #PSindex-08 { position:absolute; left:146px; top:256px; width:129px; height:35px; } #PSindex-09 { position:absolute; left:275px; top:256px; width:125px; height:35px; } #PSindex-10 { position:absolute; left:400px; top:256px; width:1px; height:944px; } #PSindex-11 { position:absolute; left:401px; top:256px; width:123px; height:35px; } #PSindex-12 { position:absolute; left:524px; top:256px; width:130px; height:35px; } #PSindex-13 { position:absolute; left:654px; top:256px; width:126px; height:35px; } #PSindex-14 { position:absolute; left:780px; top:256px; width:20px; height:35px; } #PSindex-15 { position:absolute; left:0px; top:291px; width:400px; height:909px; } #PSindex-16 { position:absolute; left:401px; top:291px; width:399px; height:909px; } </style> </head> <body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;"> <div class="centerContainer"> <div> <div id="Table_01"> <div id="PSindex-01"> <img src="images/PSindex_01.png" width="800" height="69" alt=""> </div> <div id="PSindex-02"> <img src="images/PSindex_02.png" width="20" height="174" alt=""> </div> <div id="PSindex-03"> <img src="images/PSindex_03.png" width="760" height="174" alt=""> </div> <div id="PSindex-04"> <img src="images/PSindex_04.png" width="20" height="174" alt=""> </div> <div id="PSindex-05"> <img src="images/PSindex_05.png" width="800" height="13" alt=""> </div> <div id="PSindex-06"> <img src="images/PSindex_06.png" width="20" height="35" alt=""> </div> <div id="PSindex-07"> <img src="images/PSindex_07.png" width="126" height="35" alt=""> </div> <div id="PSindex-08"> <img src="images/PSindex_08.png" width="129" height="35" alt=""> </div> <div id="PSindex-09"> <img src="images/PSindex_09.png" width="125" height="35" alt=""> </div> <div id="PSindex-10"> <img src="images/PSindex_10.png" width="1" height="944" alt=""> </div> <div id="PSindex-11"> <img src="images/PSindex_11.png" width="123" height="35" alt=""> </div> <div id="PSindex-12"> <img src="images/PSindex_12.png" width="130" height="35" alt=""> </div> <div id="PSindex-13"> <img src="images/PSindex_13.png" width="126" height="35" alt=""> </div> <div id="PSindex-14"> <img src="images/PSindex_14.png" width="20" height="35" alt=""> </div> <div id="PSindex-15"> <img src="images/PSindex_15.png" width="400" height="909" alt=""> </div> <div id="PSindex-16"> <img src="images/PSindex_16.png" width="399" height="909" alt=""> </div> </div> </div> </div> </body> </html> Hi. I can't figure out how to have all the tables on my site aligned to the centre yet have the text in them aligned to the left. In other words I want 2 margins either side of the central body of my site. How can I do this? Thanks. Hey Every one im new on this so i really need help i designed a website but i cant figure out how to center the page when its minimized and when it becomes maximized if no one understands what im talkin about take a look at this website and you will understand im using Dreamweaver Mx 2004 i need help how to make it so it is centerd when the window is minimized and then it becomes centerd when the window is maximized!!!! this is the website im talking about www.parikiaki.net please some help me it will be very much appreciated Thank You Pavzz so what is the easiest and best way to center a div within a div? or a div within anything else for that matter. How do you center vertically? and How do you venter horizontally? how can i center the nav on this page? http://fantasyfootball.pzproductions.com/testing I have a website and I used css to make my Div tags set to absolute. The only problem is that when you open it in a browser, the browser won't open big enough and wil block out some of my content (forcing me to scroll to the left or maximize the borswer to see the whole page) . How do i make the divs always appear in the center of the page always. Also how do i make it so when you change the siz of the browser my divs will change with it to remain in the center. I tried doing the margin auto trick but it still doesn't work. Here is my stle sheet code and the web page html code... any help would be appreciated. /* CSS Document */ #wrapper {margin-right: auto; margin-left: auto; margin-top: 20px; margin-bottom: 0;;} body { margin : 0px 0px 0px 0px; background-color: #E1AE5A; background-repeat: repeat; } #top { position: absolute; height: 48px; width: 900px; left: 250px; top:3px; border:0px none; z-index:1; color: #000033; } #main { position: absolute; top: 542px; left: 328px; z-index:5; width: 745px; color: #FFFFFF; height: 28px; } #flash { position: absolute; top: 130px; left: 299px; z-index:4; width: 803px; color: #FFFFFF; height: 419px; } .style1 { font-family: Eurostile; color: #FFFFFF; } .style2 { font-family: Helvetica; } #Layer1 { position:absolute; left:300px; top:121px; width:804px; height:540px; z-index:3; background-color: #000033; border: medium solid #FFFFFF; } .style3 { font-family: Eurostile; } #Layer2 { position:absolute; left:111px; top:170px; width:71px; height:124px; z-index:4; } .style4 {color: #000000} #Layer3 { position:absolute; left:482px; top:72px; width:37px; height:56px; z-index:2; } #Layer4 { position:absolute; left:652px; top:72px; width:24px; height:31px; z-index:2; } #Layer5 { position:absolute; left:822px; top:72px; width:84px; height:58px; z-index:2; } #Layer6 { position:absolute; left:992px; top:72px; width:95px; height:50px; z-index:2; } #Layer7 { position:absolute; left:331px; top:139px; width:750px; height:446px; z-index:9; } #Layer11 { position:absolute; left:319px; top:72px; width:12px; height:10px; z-index: 2; } #Layer8 { position:absolute; left:302px; top:98px; width:791px; height:48px; z-index:10; } #Layer9 { position:absolute; left:299px; top:40px; width:32px; height:20px; z-index:0; } #Layer10 { position:absolute; left:1016px; top:595px; width:24px; height:26px; z-index:10; } and the html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" land="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="styles.css" rel="stylesheet" type="text/css"> </head> <body> <div id="top"> <h1 align="center" class="style3 style4">on The side, Inc. </h1> <p align="center" class="style3"> </p> </div> <div class="style2 style3" id="main">on The side is a value added promotional marketing organization focused on working with companies to make them more market-facing. We take time to learn about our clients' business model, industry and previous marketing agendas before taking a next step OR leap - if necessary.</div> <div id="Layer1"></div> <div id="flash" align="center"> <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="425" height="400"> <param name="movie" value="main.swf"> <param name="quality" value="high"> <embed src="main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="425" height="400"></embed> </object> </div> <div id="Layer3"><a href="who.html"><img src="who.jpg" width="100" height="70" border="0"></a></div> <div id="Layer4"><a href="what.html"><img src="what.jpg" width="100" height="70" border="0"></a></div> <div id="Layer5"><a href="ideas.html"><img src="ideas.jpg" width="100" height="70" border="0"></a></div> <div id="Layer6"><a href="why.html"><img src="why.jpg" width="100" height="70" border="0"></a></div> </body> </html> I am working on a website, and I have been trying to center the homepage so that it looks the same on every computer/ browser. It's sort of set up as a juvenile div layout. I've been using other layouts as an example so I don't really know how to fix what I don't want from theirs. I'd like the main image to be centered but I can't figure it out. It's positioned absolutely which might be part of the problem but I don't know what else to set it as. Also, on top of centering the image horizontally, I was wondering if there was any way that I could position it in the very center of the page. The link is http://appleseatmoregrass.webs.com/index.htm I have a page laid out, but its not centering the main table? All the contents should be centered on the page but its shoved to the left. Take a look he www.puliz.com/default2.htm Also, there is a gap in the graphics just below the image map that I have placed there. Any ideas? Thanks in advance! Scott http://insomnia.eternal-glory.org/2.0/index.php I'm trying to imitate a Mac computer, Tiger. Looks great in FF/Safari, but in IE7, the dock refuses to center. I have: Code: body { text-align:center;} in my CSS, that's supposed to fix the margin-left/-right:auto; bug for IE. But... it's not? Help, please? Doctype is Strict, and I have margin-left/-right set to auto. Thanks in advance, Michele Hi, I'm new to the site and I'm just here to ask a question. I've been having trouble with my webpage trying to center everything. The problem is that at home my webpage is centered (When you zoom out everything stays centered) but as for school I zoom out and everything stays to the left and I'm pretty sure I left all the code the same from computer to computer. I don't think it is the resolution because I had changed my resolution to the same as at school. This is my coding (I'm an amateur at Html and don't know CSS): <title>Home - WebBanners</title> </head> <p align="center"> <div style="position:absolute;top:0px; left:0px; right:0px; bottom:0px;" align="center"> <body topmargin="0" leftmargin="0" bgcolor="#0099FF"> <img src="Banner.gif" width="1280" height="290" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="140,233,302,285" href="Home.html" /> <area shape="rect" coords="330,233,543,286" href="Samples.html" /> <area shape="rect" coords="565,240,722,287" href="Prices.html" /> <area shape="rect" coords="752,229,905,286" href="About.html" /> <area shape="rect" coords="945,235,1122,284" href="Contact.html" /> </map> <font face="Georgia, Times New Roman, Times, serif" size="+4" color="white"><p align="center"> <u> Welcome To WebBanners!</u></p></font> </p> <table align="center"> <tr> <td><font face="Georgia, Times New Roman, Times, serif" color="black" size="7"><strong>H</strong></font> <font face="Georgia, Times New Roman, Times, serif" size="+2" color="white">ere we make special just-for-you banner. <br /> <br> <font face="Georgia, Times New Roman, Times, serif">Every banner is unique to the person who have ordered them.<br /> <br><font face="Georgia, Times New Roman, Times, serif">They are sold at a reasonable price and if you don't <br>like them then we offer full money back guaranteed. <br /> <br /> We also have an interactive department where you can <br />talk to one of 'us' through the microphone so we can help you. <br />All you have to do is ask through the E-mail. <br /> <br /> We can make tons of banners for your website such as the one above <br />or see more <a href="Samples.html">Here</a> <br /> <br /> We have prices for your special needs. <br />All of the banners we offer are your ideas. <br />Ask and we can do it for you! Click <a href="Prices.html"> Here </a> for prices. <br /> <br /> Want to learn more about us? Click <a href="About.html"> Here </a> for more information. <br /> <br /> Going to buy one of our offers? Need help in finding something? <br />Click <a href="Contact.html"> Here </a> to contact us! For your design! </font> </td> <td align="center"> <font face="Georgia, Times New Roman, Times, serif" color="Green" size="+3"><u><strong>So Why Pick Us? </font> </u> </strong> <br /> <br /> <font face="Georgia, Times New Roman, Times, serif" color="Green" size="+2"> <li>We have 100% Money Back Guarantee <br /> <li>Satisfaction Guarantee<br /> <li>Our Prices beat the Competitors<br /> <li>24 Hour Service <br /> <li>Interactive Department <br /> <br /> <br /> <br /> <img src="Ordernow!.gif" /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </body> </html> Hi all i have been trying to center a group of four images using html. the code is: PHP Code: <img src="tennis.jpeg"align="center"width="100" height="100" title="Equipment needed for playing tennis." > <img src="snooker.jpeg"align="center" width="100" height="100" title="Snooker table within a snooker club where you play the sport "> <img src="Golf.jpeg" "align="center"width="100" height="100 title="The Famous last hole on the old corse St Andrews"> <img src="Badminton.jpeg"align="center" width="100" height="100" title="Equipment needed for playing Badminton"> some how its not quite right any ideas where im going wrong? TI AV. Gaz. |