|
HTML - Centering A Page To The Screen
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 Similar TutorialsHi All, I started doing a website that had a picture, then flash overlaid on top of the picture, then some text centered on the flash... the size of the picture and flash is 990px in width and 792px high, the reason i put a picture on screen 1st is the flash take a few minutes to load, so it looks good till the flash kicks in. Anyway it looks good on my 1024 x 768 monitor, some of my friends have widescreen and say they is a huge gap to the right.. so how can i center width only an image of 900 x 792 and then in the exact postion of the centered image place the flash, and then add some text on top of the flash once again centered on top of the flash... this if it can be done will leave a even gap to the left and right if on widescreen and be virtually full screen on a normal 1024 x 768 monitor. I tried absolute Code: <center><div style="position: absolute; top: 0px; "> the image </div></center> <center><div style="position: absolute; top: 0px; "> the flash </div></center> <center><div style="position: absolute; top: 100px; "> the text </div></center the image and flash and text had the right html to show, just used the above code to show what i tried... anyway it did not work right for some reason, im sure im going down the wrong path and they is a much better way to do this... Can anyone help me Thanks Hi Guys, I dont know if i am over thinking this, or just been dumb! But I want to position a flash object file in a div to the the center of my screen. However heres the catch, my flash file is 1900 pixels wide, and of course a screen can be anything wide. I can get CSS background images for divs ok, but not objects like a flash movies. So assuming my screen is 1600 wide, the user would see the center of my 1900 wide flash file with 150 pixels missing on the left aand right. For some reason, maybe i am tired, but i can not get it working or get my head into gear today. thanks for any input! Oh and heres an image of my problem to help explain it http://i44.tinypic.com/33p9e0l.jpg Hi All, I need to have a wide (1984px) image centred on the screen. If the screen is only 1024px wide it always aligns left. I am probably missing something basic here but can anyone offer advice? Thankyou. Guys, hopefully someone can give me a hand here. bear with me, Im a newbie to html yet Im an intermediate/advanced flash programmer. I learned flash but never learned html the right way and am struggling to make html entrance pages for my flash sites.. I know its usually the other way around. i learned flash first. ok, I have a website I made which is opened in a fixed window. the html index page says "enter here" and that button opens the fixed size window. that works fine. The problem is Im trying to learn the html and whenever i have an image on this index page, ( some graphics and the "enter here" button) it may look centered @ 1024 x768 but at a higher resolution ( 1280 x 1024) it will appear on the top left of the screen. I have been tinkering with dreamweaver but im really confused. I keep seeing all of these sites where everything looks aligned regarless of the screen setting. Im not sure if I should use tables , divs or whatever. i have my website logo as a jpg and some other graphics, and im not sure how to put it into the page so it always looks appropriate no matter what screen setting you are on. There is a company that makes nice websites and their entrance pages are always good. I am gonna attach the url of one of these. I notice that they always use divs, a LOT. Is thsi the right approach? and can someone look at the example and tell me how they are doing it? i dont put the url in the post becuase I do want google or other engines indexing the url to this post (for privacy) Thanks a lot url.zip Hello, 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? New poster here! Recently been creating a website using HTML & CSS from scratch using Notepad++. I was under the impression that the more flat, or spread out the design, browsers would squish it automatically to fit on the page. Apparently this is not the case. I current have a page where the main content starts 250 pixels from the left hand side of the screen, this causes some of the content disappear of the right hand side of on lower resolution screens. Should I be starting the content at the far left, or is there another web page design convention I should be following? I assume there is a way around this however I can't seem to find it! Any help would be greatly appreciated. These forums are a wealth of knowledge! When I create a test page using DIV and set it to 480 px wide, my iPod Touch does not have it initially filling the screen; I have to double tap it to have it fill the screen. What step am I missing? Many thanks... Todd Hey, Don't really know exactly how to pose this question, so i'll try to explain it in several ways, and maybe one of you can help me. I'm trying to find code, HTML or Java, which would cause the browser to automatically start focused on a different part of the page other than the top (as it normally does when a new page loads). For example, lets say i have an image or text several scrolls down on a page. I want the browser to automatically load the page centered on this. Any ideas on how to do this? Any help would help so much.... i tried to search for it, but i didn't know exactly how to phrase it so i wasn't able to find anything. Thanks again. 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; 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. Nevermind....... 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 Hey everyone, I'm having trouble with this and I have no clue whatsoever how to solve it. My splash page has a css-centered background image which I would like to make it 'look' like a link, v.g. if you click anywhere on the page, the main page loads. I've seen this behavior in some lyrics pages, with a new page opening in a popup when you click anywhere in the screen, but what I need is to make the whole page behave like a giant "A HREF" tag, to load a new page in the same window. Is there anyone out there who can help me with this? Thanks in advance! Can someone please please view my sit at resconsultingnyc.com, i used microsoft expression web 3 to make everything aligned. When the page is maximized on my computer it is all nice and neat but if the screen is not maximized everything falls out of frame. when I tried it on another computer even their maximized page had things out of frame. How can I make all the tables and content stay nice and neat and keep in tact when the page size changes? All the pages have the same problem...thanks here's the code... <!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=windows-1251" /> <title>Template</title> <meta name="description" content="" /> <meta name="keywords" content="h" /> <link href="styles/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="all" style="height: 772px"> <div class="top"> <OBJECT classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="766" HEIGHT="233" id="construction" ALIGN=""> <PARAM NAME=movie VALUE="construction.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="construction.swf" quality=high bgcolor=#FFFFFF WIDTH="766" HEIGHT="233" NAME="construction" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT> </div> <div style="margin:0 0 5px 0 "> <OBJECT classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="766" HEIGHT="60" id="menu" ALIGN="" style="z-index: 1; position: absolute; top: 246px; left: 444px"> <PARAM NAME=movie VALUE="menu.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="menu.swf" quality=high bgcolor=#FFFFFF WIDTH="766" HEIGHT="60" NAME="menu" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT></div> <table width="740" border="0" cellspacing="0" cellpadding="0" id="cont" style="z-index: 2; width: 740px; height: 370px; position: absolute; top: 310px; left: 456px"> <tr> <td valign="top" width="295"> <div id="left_block" style="width:289px; height:234px; margin:0 0 7px 0 "> <img src="images/tit1.gif" alt="" style="margin:25px 0 15px 29px " /><br /> <p style="margin:0 0 3px 43px; width:162px "> </p> <p style="margin:0 0 3px 43px; width:162px; height: 57px;"> </p> <p style="margin:0 0 5px 43px; width:162px "> </p> </div> <div id="left_block2"> <img src="images/question.gif" alt="" style="margin:28px 0 8px 26px " /><br /> <table width="75" border="0" cellspacing="0" cellpadding="0" style="margin:0 0 4px 36px "> <tr> <td width="36"><img src="images/mail.gif" alt="" /></td> <td>E-mail:</td> </tr> </table> <p style="margin:0 0 0 36px "> resconsultingnyc@gmail.com</p> </div> </td> <td valign="top"> <div id="right_block" style="width:445px; height:201px; background:#F1F1F1 url(images/bgs1.gif) no-repeat 100% 100% "> <img src="images/tit2.gif" alt="" style="margin:25px 0 13px 36px " /><br /> <p style="width:335px; margin:0 0 4px 50px ">Welcome to RES Consulting NYC inc.</p> <p style="width:335px; margin:0 0 15px 50px ">Your company for all of your residential and commercial construction consulting services.</p> </div> <img src="images/tit3.gif" alt="" style="margin:28px 0 23px 31px " /><br /> <table width="388" border="0" cellspacing="0" cellpadding="0" style="margin:0 0 0 33px "> <tr> <td valign="top" width="103"><img src="images/pic1.jpg" alt="" /></td> <td valign="top"> <p>Personal dedication to each and every client</p> <p style="margin:10px 0 0 0 "> </p> </td> </tr> </table> </td> </tr> </table> <div id="footer" style="z-index: 1; position: absolute; top: 693px; left: 473px; bottom: 85px; width: 733px"> <table width="620" border="0" cellspacing="0" cellpadding="0" style="margin:14px 0 0 56px "> <tr> <td width="286" valign="top" style="color:#7D7D7D; "> Copyright © 2009 resconsultingnyc.com <br /> All rights reserved. </td> <td valign="top"> <a href="index.html" class="f_link">Home</a> <a href="index-1.html" class="f_link">Company</a> <a href="index.html" class="f_link">News</a> <a href="index-2.html" class="f_link">Projects</a> <a href="index-3.html" class="f_link">Services</a> <a href="index-4.html" class="f_link">Solutions</a> <a href="index-5.html" class="f_link">Contacts</a> </td> </tr> </table> </div> </div> </body> </html> 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'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 hi guys, I have this code he Code: <!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=windows-1251" />
<title>Under construction</title>
</head>
<body style="background-color:#121212">
<div style="background: url(under_construction.jpg) no-repeat center top ;
height: 1024px;
margin: auto;">
</div>
</body>
</html>
the image under_construction.jpg is basically the page itself, it has a size of 1680x1024. As of right now the page doesn't adjust automatically to the users screen. Please help me change the code so that it'll adjust automatically to the user screen 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>
|
|||||||