Centering my page in any size resolution

I am new to web design, in fact didn't really want to be a web page designer, but one of my partners over promised my skill set to a client so now I am stuck.  I have designed the page, but am having a lot of trouble getting it to center in when I open it up online.  On my computer it is stuck on the left of the screen, but if I open it up in a lower resolution it will center just fine.  How do I set it to automatically center on the page in any resolution?
I have attached the code below, and I am sure to you guys that do this for a living it looks lieka disaster, but any help you guys can give me would be appreciated!
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Salado Taco Grill Home</title>
<style type="text/css">
#apDiv1 {
position:;
width:168px;
height:60px;
z-index:1;
left: 62px;
top: 219px;
#apDiv2 {
position:absolute;
width:986px;
height:482px;
z-index:1;
left: 30px;
top: 228px;
body,td,th {
font-size: x-large;
body {
background-color: #000;
background-image: url(images/paper%20background.png);
#apDiv3 {
position:absolute;
width:115px;
height:54px;
z-index:1;
left: 11px;
top: 12px;
#apDiv4 {
position:absolute;
width:115px;
height:54px;
z-index:2;
left: 279px;
top: 17px;
#apDiv5 {
position:absolute;
width:142px;
height:54px;
z-index:3;
left: 532px;
top: 16px;
#apDiv6 {
position:absolute;
width:115px;
height:54px;
z-index:4;
left: 813px;
top: 19px;
#apDiv7 {
position:absolute;
width:752px;
height:51px;
z-index:2;
left: 200px;
top: 783px;
#apDiv8 {
position:absolute;
width:106px;
height:115px;
z-index:3;
left: 895px;
top: 70px;
#apDiv9 {
position:absolute;
width:200px;
height:100px;
z-index:4;
left: 47px;
top: 84px;
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
<link href="center the page.css" rel="stylesheet" type="text/css">
<body onLoad="MM_preloadImages('images/redhome.png','images/redmenu.png','images/redreviews.png ','images/redgallery.png','images/click phone.png','images/mapit.png')"><div id="apDiv7"><a href="http://maps.google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('address','','images/mapit.png',1)"><img src="images/address white.png" name="address" width="601" height="39" border="0"></a></div>
<img src="images/background.png" alt="background" width="1024" height="768" align="absmiddle">
<div id="apDiv9"><a href="http://www.yellowpages.com/?" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('phone','','images/click phone.png',1)"><img src="images/red phone number.png" name="phone" width="183" height="101" border="0"></a></div>
<div id="apDiv8"><img src="images/facbook.png" width="110" height="107" alt="facebook"></div>
<div id="apDiv2"><img src="images/taco.jpg" alt="taco" width="986" height="503">
  <div id="apDiv6"><a href="gallery.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Gallery','','images/redgallery.png',1)"><img src="images/blackgallery.png" alt="Gallery" name="Gallery" width="137" height="54" border="0"></a></div>
<div id="apDiv5"><a href="reviews.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('reviews','','images/redreviews.png',1)"><img src="images/blackreviews.png" alt="reviews" name="reviews" width="140" height="50" border="0"></a></div>
<div id="apDiv4"><a href="menu.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu','','images/redmenu.png',1)"><img src="images/Menu Black.png" alt="Menu" name="menu" width="119" height="50" border="0"></a></div>
<div id="apDiv3"><a href="home.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home button','','images/redhome.png',1)"><img src="images/blackhome.png" alt="Home" name="Home button" width="110" height="50" border="0"></a></div>
</div>
</html>

First, you're using APDivs (absolute positioning) which is never a good idea.  Here's why:
http://apptools.com/examples/pagelayout101.php
As a quick fix, you can wrap your APDivs inside a relatively positioned container like this:
body {
background-color: #000;
background-image: url(images/paper%20background.png);
position:relative;
width: 960px /**some width in px, ems or %**/
margin:0 auto; /**used with a width, this centers page on screen**/
You will probably need to re-adjust all your APDivs to fit inside the body.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists 
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

  • How to center page in any size browser window

    How do I center a page in any size browser even if page is too wide to display - I still want the page displayed from the center and hide the edges as the browser width gets narrower. E.g. I have 3 columns and want to always see the central column - the outside columns will be visible only on a wide screen, but only the central column is visible on a narrower screen such as a smartphone. I have set the margins of my wrapper div to auto, but this only centralises the page until the wrapper width is the same width as the browser window. Help me please !

    Thanks Nancy O,
    Using the % as a width does now allow the page to remain centred.
    Is there a way to keep the web page size as original even when the window gets smaller - i.e.you will only see the outside edges of the page by using the slidebar left or right if viewing in a smaller window. Ioriginally set the wrapper div width to 700px rather than 90%, but when I reach a browser window of 700px, the page then reduces in width towards the left rather than reducing it centrally.
    I don't know how to link to my page as it is not yet a live page, so can't show you specific code. Hope the above explains what I am trying to do. Basically, the two outside columns will be less important info, so I don't need this to always be visible, but if viewing my page on a smartphone, I want the central area to be seen in full (approx. 450px wide), and not reduce in size.
    Thanks for your help,
    ActivePlanner.

  • Center page for any display resolution

    i want my page to display in the center of any display with any resolution. for example, when the window is smaller the page gets pushed over to the left. and when it is resized it stays in the center (full screen) here is a page that does what i am trying to do. http://www.yakuza-3.com/. what is the best way to do this?

    Well done.
    I thought that I would just drop by and say that I like the way the image is used in the banner and the menu bar.  It's neat.
    Regards
    Martin

  • When i put firefox in offline mode, and then click on pages saved in history , it can't load any pages or any images. i put cach size to 250mb but the problem is the same, it saves history for two months, but can't load pages.

    when i put firefox in offline mode, and then click on pages saved in history , it can't load any pages or any images. i put cach size to 250mb but the problem is the same, it saves history for two months, but can't load pages.

    Hi there,
    When I inspect your site in browser tools, I'm getting 404 errors from your page:
    [Error] Failed to load resource: the server responded with a status of 404 (Not Found) (jquery-2.0.3.min.map, line 0)
    [Error] Failed to load resource: the server responded with a status of 404 (Not Found) (edge.4.0.0.min.map, line 0)
    BarnardosIreland wrote:
    I would have thought that publishing should give a complete package that doesn't need any further edits to the code and can just be directly ftp'ed to the web - is this correct?
    In general, you are correct - but also your server does need to be properly configured (and those errors above lead me to think it may not be) to serve the file types that your uploading - but it could be something else entirely. Can you zip up your composition folder, upload it to your Creative Cloud files, set it to share, and then post a link here so I can download it? If you'd rather not share it publicly, can you PM me with a link to your composition files?
    Thanks,
    Joe

  • How can I make my flash Webpage displayed same size on any screen resolution?

    Hi,
    How can I make my flash Webpage displayed same size on any screen resolution of my computer? Whether it is 1024 X 768 or 1280 X 960 screen resolution, the size of Webpage (Flash Webpage) should always be same so that user don't need to use horizantal scroll bar to view all the content.
    And secondly, how can I scroll my webpage vertical on moving with my mouse like in the following link: The below link also shows that it's webpage size is always same on any screen resolution.
    http://www.matkostankovic.com/#/portraits/oliver-mlakar/http://www.matkostankovic.com/#/about/
    Thanks.

    Hi,
    Please do help me.
    Waiting for response from anybody who can help me.to solve this problem.
    Thanks.

  • Centering a page in Dreamweaver CS6 Fluid grid

    Centering a page in Dreamweaver CS6 Fluid grid.
    I figured this would be an easy task and have saved it to last. After watching videos, scanning the web and this forum I have found many answers but none of them seem to work in CS6. I currently have an extra 1-2% margin on the left to get the page closer to the middle but this doesn't work well with all screen sizes and its still not in the middle.
    Page can be found here
    Any advice would be greatly appreciated!

    It looks like you've nested the rest of content within your #header DIV. And header div's width is 94.4% - this results in everything on the site have a ~5% margin on right.
    You may want to fix this first to see if it helps you with the result you intend to get. If not, do post back.

  • 5G vs iPod Classic Screen Size / Resolution

    Has there been in change in the screen size, resolution or # of colors between the 5G iPod (not the 5.5G) and the iPod Classic? I think there may have been a screen size change at least from the 5G to the 5.5G, but I'm not sure.
    Tony

    No, the screen size did not change at all from 5th Gen to 5.5 Gen. What they changed was to go with a brighter screen that used less power.
    I have not seen any indication by Apple's marketing weasels on the web pages going on about a better, bigger, brighter, more colorful, etc. screen, so I am assuming that is uses the same screen as the 5.5Gen iPods.
    I figure if it had more colors or something like that, that would be one of the new and improved features they would be going on about.
    Patrick

  • Dreamweaver 8 - Issues centering web page

    I recently started my own business and am on a budget so decided to design the web page myselt with Photoshop and Dreamweaver 8.  It went well except for the fact that my page won't center itself on screens, and b/c I created it on a display that is 1920x1080 I don't have good results on smaller screens.  I used layers, and can't convert to tables b/c of the overlapping layers I have.  I treid recreating the whole page again and not using overlapping layers, but once I converted to tables and viewed in browser I found that my buttons were moved all around.  I'm really having a difficult time with this and have spend the last two days trying various fixes with no luck...Any help would be apprecitated - the site is up and here is the link www.digitalrootsstudio.com
    Thanks in advance

    digitalroots wrote:
    So I would put the above text right after the body tag on top of html?  Do I need to put the above code again at the end of the html, or only on top?
    Yes.
    <div id="container">
    Then all your absolutely positioned layers go here
    </div><! close the container-->
    below is a simple example of absolute layers inside a relatively positioned container <div>. Note how the absolutely positioned layers move when you re-size the browser viewport window.
    I stress using absolutely positioned layers is NOT a good solution to be using but it may be the only solution if you know little about website construction.
    <!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=UTF-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #container {
        position: relative;
        width: 800px;
        margin: 0 auto; /*this centers the page */
    #one {
        position: absolute;
        top: 100px;
        left: 0px;
        width: 150px;
        height: 150px;
        background-color:#CF3;
    #two {
        position: absolute;
        top: 100px;
        left: 150px;
        width: 150px;
        height: 150px;
        background-color:#39F;
    </style>
    </head>
    <body>
    <div id="container">
    <div id="one">Absolute layer one</div>
    <div id="two">Absolute layer two</div>
    </div><!-- close container -->
    </body>
    </html>

  • When I print a pdf file, the first page is dramatically  reduced in size while remainder pages print correct size. How do I fix this pro blem?

    recently, when printing pdf files, the first page prints out as 1/10 or 1/20th original size while rest of document prints correctly.
    I have no idea how this happened or why and I have no idea how to fix. I cannot get the first page of any pdf doocument to
    print correctly and thus, I am virtually unable to print pdf files.

    Sometimes if a .pdf is smaller than actual 8 1/2 x 11 or bigger, you'll either get way too much of the image and it's cut off, or the image is too small. You should also try to do this in the print driver window: Properties -> Advanced -> Image Options -> Disable "PostScript pass-through"

  • My document is not centered on page

    I am running Acrobat 10.0.0, MAC OSX 10.7.2 (Lion), and Indesign CS5.5
    I can not get my document to center on the printed page.
    When I open my PDF document, it appears normally and shows in portrait mode. The document was created as 6.88 in wide x 10.25 in tall.  The Properties of the PDF file for the document correctly show the page size as 6.88 x 10.25.
    When I click on PRINT, the default dialog shows the document correctly but indicates a 8.5 x 11 page size.  I click on the Page set up and select a custom paper size of 6.88 x 10.25 inches and return to main print dialog.
    The print dialog now shows my document and the page dimensions show my newly created page size.  I click auto rotate and center.  The page orientation and size match the document and PDF orientation regardless of auto rotate on or off.  I still select auto rotate and center as I want the centering.
    The print comes out not centered and clipped.  No combination of selections yields a correct print out.  I just can't get my image to center on the output page.
    I can print the same PDF file from Preview with same selections and have no problem with getting the document to center on the page.  I would use Preview as the work flow except preview does not print the document faithfully for color compared to Acrobat.
    Thanks in advance for all help and advice!
    dan mckinney

    OK,  Mystery solved.  There is no great problem with OSX, CS5.5, etc.  I was the problem.
    I went back and created a document from scratch that was very simple in order to convence myself that a document could print correctly as a simple page.  (basically removed all other variables that might have crept into the file that was frustrating me.)  I created a PDF by exporting as well as printing to the postscript creating "printer" and then distilling the PSD file into a PDF as well as letting Preview convert the file into a PDF.  Point is that I created a PDF various ways.
    I then loaded Adobe Acrobat Pro (10.0) to generate the output.  I found that the Page Set Up button would allow me to overide the default successfully despite the warning.
    The "trick" was to be sure that I had the paper size AND orientation selected correctly in the Print Set Up that matched exatly how I used Print Set Up in InDesign.
    Voila, output as expected.
    The take-a-way for those also frustrated is that there is no great devious problem with the OSX 10.7 or CS5.5 software packages.  The output CAN be obtained just keep playing until you ask the system to do what you want it to do. =)

  • Page Setup / Paper Size not saved

    Hi,
    I would like to change the default paper size for printing from US letter to A4. I change the paper size via File > Print > Page Setup > Paper Size to A4, but this setting is always lost once I close and restart Adobe Reader (paper size defaults back to US letter). I am using Adobe Reader X MUI on Windows XP at the moment, but I had the same issue with Adobe Reader 9.4.1 as well (there the menu is File > Page Setup > Paper Size).
    Is there any way to make Adobe Reader remember a different default paper size (other than US letter)?
    The printer has A4 as default in case anyone is wondering.
    Thanks!
    dapperdani

    fnord
    been a while. hope all is well.
    The African Stink Ant inhales the spore of a parasitic fungus that causes it to behave in curious and irrational ways. Eventually the fungus grows, horn-like, from the ant's head, and rains down new spores to the forest floor. "All of us here at the museum feel like we've inhaled that spore," says Wilson, "and hopefully we'll infect other people as well."
    [email protected] - Kevin

  • What size, resolution, color space and bit do I use for a book?

    What size, resolution, and color space do I use for a iPhoto book?

    At least 150 DPI - actually pixel requirements depend on the print image size (pring image size * 150 will give you the minimum pixel size you need) - size is determined by the book size and theme and page layout you select - color space should be sRGB - minimal editing and using iPhoto for editing produces the best results - for more information see this article
    If a photo is the wrong ratio and you can not crop to work in most themes you can right click on the photo and fit to frame
    LN

  • New problem in page setup; custom sizes

    Although previously working fine, while using Pages, custom page set up settings aren't taking effect. Trying to do a business card setting of 3.54 x 2.05 with no margins. It always comes back with a 8 1/2" x 11" page. I restarted pages, then rebooted the mac, and continue having this problem. Other test sizes now seem to be giving me the same result.
    I am going to: Page setup, paper size, manage custom sizes.
    Any help would be appreciated.

    Hi there. I just tested this and found I was able to change from cm, which is my default, to inches simply by setting System Preferences > International > Formats > Measurement Units to US from Metric.
    It sounds like you may be doing this already, so the only other thing I can suggest is to quit the Application you are attempting to set the Custom Size in. I found that after I set the Measurement Units back to Metric, the Manage Custom Sizes still showed inches in the dimensions boxes. But after I quit the application and then opened it again, the Manage Custom Sizes menu was showing cm again.
    PaHu

  • How to make Image/size/resolution agree with metadata resolution?

    After scanning the help file a bit and searching thru this forum a bit with `metadata resolution' as search criteria, I'm still pretty confused about how it is supposed to work.. I may have never actually found the right part of the help file.
    Cutting to the chase: How can I make the resolution reported by the metadata tab for resolution agree with what is reported inside photoshop at Image/size resolution.  I didn't see any way to set how res is reported in bridge.
    I see many pictures reported in metadata as 72 ppi for resolution and  reported in photoshop as 200 pixel/inch
    They do BOTH mean pixels per inch right?  If so, or really even if they don't how can I get the two reports to show the same resolution?
    There are too many processes that depend on knowing res in advance of opening a file for that to be so far divergent.

    Jingshu Li wrote:
    Some JPG or Tiff with Camera raw settings will be opened in ACR firstly when you double click them. In ACR workflow option (the bottom in the ACR dialog) the resolution value isn’t same with that in Bridge (metadata panel). If you go ahead to open the image in PS by clicking ‘Open Image’ button in ACR dialog and then check the image size from Image -> Image Size in PS, the resolution will be same with ACR (actually it is changed by ACR).
    If disable ACR support for JPG and Tiff in Bridge (Open Camera Raw Preferences in Bridge and choose ‘Disable JPEG support’ or ‘Disable TIFF support’ for ‘JPEG and TIFF Handling’), JPG or TIFF files will be opened by PS directly and the resolution matches between Bridge and PS. I believe this is an ACR bug.
    So what file types are you using and if they’re opened by ACR firstly in your workflow?
    The files are *.jpg.   But I don't see where camera raw comes in.  These are common jpg files.  I'm opening them by double click in bridge.
    Any way I did disable jpg and tiff in the Camera Raw preferences as you suggested.  At Jpeg and tiff handling, both disabled. and restared bridge.
    However, I see no improvment.
    For example, a file reporting 72 ppi in bridge when opened in photoshop ... Images/size resolution reports 480 pixels/inch.
    There is obviously some kind of miss handling that has been done to these files for them to have such a high resolution.   I suspect they may have been handled at Walgreens or Walmart... or similar since I had something very similar happen to me once when I had a bunch of pictures developed at Walgreens and they cam back with resolutions like that, when I know the camera would have given them something way less.
    But I don't see how any of that should be effecting Bridges  inability to get the resolution right.
    Here is another example: some.jpg
    It appears that bridge is showing an unusually huge file size in inches, to account for the reported 72 ppi.
    Bridge:
    Size: ...............1.14mb
    Dimensions:.....1496x1064
    Dimensions in
    inches ............20.8x26.7
    Resolution: .....72 ppi
    ===========================
    Photoshop:
    pixels
    Width 1496
    height 2064
    Document size
    inches
    width  4.987
    height 6.88
    Resolution 300
    Do you have further suggestions?

  • ANY size of browser!

    How can I create web pages in Dreamweaver that fit ANY size
    of browser?
    Thank you inadvance,
    George

    Make the page fluid. Google it.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "nostromo3030" <[email protected]> wrote in
    message
    news:g2qjnt$bip$[email protected]..
    > How can I create web pages in Dreamweaver that fit ANY
    size of browser?
    > Thank you inadvance,
    > George

Maybe you are looking for