Problem with centering a layout-relative to browser window size using CSS

Discussion in 'HTML Basics' started by Eye4It, Oct 23, 2008.

Tags:
  1. Eye4It

    Eye4It New Member

    Hi all
    I'm having trouble centering a layout. I'm using Dreamweaver and CSS. If you look at this page to understand what I mean:
    TheDigiPort - www.thedigiport.com : You have located the Digital World.
    If you resize your browser window on that site, the site moves so as it remains in the center always, obviously until you go too far then a horizontal scroll bar appears.
    I've searched everywhere for the answer to this question, and I'm betting it's a real simple and easy fix too!!
    Can anyone help?
    Cheers

    edit: I'm using the "draw AP Div" method in Dreamweaver to place all the elements on the page.
     
  2. n3tFl0w

    n3tFl0w New Member

    Can you post your css?

    Most of the time you wrap your page in a wrapper div and use something like the follwing css to centre it...

    body {
    text-align: center;
    }

    #container {
    margin: 0 auto;
    width: xxxpx;
    text-align: left;
    }


    That'll work on nearly every browser.
     
  3. Eye4It

    Eye4It New Member

    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=utf-8" />
    <title>Untitled</title>
    <style type="text/css">
    <!--
    body {
        background-image: url(bg.jpg);
        margin-left: 0%;
        margin-right: 0%;
    }
    #apDiv1 {
        position:absolute;
        left:277px;
        top:85px;
        width:214px;
        height:7px;
        z-index:1;
    }
    #apDiv2 {
        position:absolute;
        left:75px;
        top:73px;
        width:29px;
        height:710px;
        z-index:1;
        background-image: url(leftcol.jpg);
    }
    #apDiv3 {
        position:absolute;
        left:840px;
        top:73px;
        width:30px;
        height:710px;
        z-index:2;
        background-image: url(rightcol.jpg);
    }
    #apDiv4 {
        position:absolute;
        left:104px;
        top:66px;
        width:736px;
        height:16px;
        z-index:3;
        background-image: url(topcol.jpg);
    }
    #apDiv5 {
        position:absolute;
        left:297px;
        top:824px;
        width:193px;
        height:64px;
        z-index:4;
    }
    #apDiv6 {
        position:absolute;
        left:104px;
        top:772px;
        width:736px;
        height:19px;
        z-index:5;
        background-image: url(botbar.jpg);
    }
    #apDiv7 {
        position:absolute;
        left:104px;
        top:81px;
        width:736px;
        height:692px;
        z-index:6;
        background-color: #FFFFFF;
    }
    #apDiv8 {
        position:absolute;
        left:100px;
        top:83px;
        width:228px;
        height:46px;
        z-index:7;
    }
    #apDiv9 {
        position:absolute;
        left:79px;
        top:130px;
        width:484px;
        height:131px;
        z-index:8;
    }
    #apDiv10 {
        position:absolute;
        left:79px;
        top:293px;
        width:787px;
        height:35px;
        z-index:9;
        background-image: url(navbg.jpg);
    }
    #apDiv11 {
        position:absolute;
        left:79px;
        top:328px;
        width:235px;
        height:451px;
        z-index:10;
        background-image: url(leftbar.jpg);
    }
    #apDiv12 {
        position:absolute;
        left:79px;
        top:344px;
        width:235px;
        height:26px;
        z-index:11;
        background-image: url(navhebg.jpg);
    }
    -->
    </style>
    
    </head>
    <body>
    <div id="apDiv2"></div>
    <div id="apDiv3"></div>
    <div id="apDiv4"></div>
    <div id="apDiv5"></div>
    <div id="apDiv6"></div>
    <div id="apDiv7"></div>
    <div id="apDiv8"><img src="u.jpg" width="356" height="45" /></div>
    <div id="apDiv9"><img src="image1.jpg" width="787" height="163" /></div>
    <div id="apDiv10"></div>
    <div id="apDiv11"></div>
    <div id="apDiv12"></div>
    <div align="left"></div>
    
    </body>
    </html>
    
    I haven't made the style sheet external yet :p
    So how do I assign a wrapper tag?
    Thanks for the speedy response.
     
  4. gav240z

    gav240z New Member

    Change body to the following:
    <style type="text/css">
    <!--
    body {
    margin: 0 auto;
    }

    However it won't work in IE6. So use what n3tFl0w above suggested. Use a wrapper div and use text-align:center on the body to accommodate IE6.
     
  5. Eye4It

    Eye4It New Member

    I have tried that, and it has worked to a certain extent for me. I'm having trouble placing div tags inside of the wrapper div. The first element (say, an image) I put in will center the way I want the whole page to do, but Dreamweaver won't let me move the image around, and anything else I place on the page stays where I put it, instead of moving with the image :S

    EDIT: That site I gave as an example uses tables, and it's possible in Dreamweaver to use Layout Tables to achieve this. What are your thoughts on this? Is it up to standards to do it this way?
     
  6. gav240z

    gav240z New Member

    To move an image around use background-position: 50% 0;
    that would set an image at the center of the screen.

    You can also use short hand:
    background:#360404 url(img/bg.png) no-repeat 50% 0pt

    first part is color: #360404
    second part is image url.
    3rd part is how to tile the image.
    4th part is position of image relative to containing div.

    Dreamweaver is a good editor, but I wouldn't rely on it for understanding CSS.
     
  7. ghost

    ghost New Member

    Centered page in all browsers

    Another suggestion for you
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
    <html xmlns="[URL="http://www.w3.org/1999/xhtml"]XHTML namespace[/URL]">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled</title>
    <style type="text/css">
    <!--
    body       { margin:0 ; padding:0 ; background-image: url( 'bg.jpg' ); }
    #container { margin:0 auto ; width:950px ;   }
    #container { min-height:500px ; height:auto !important ; height:500px  }
    #container { border:1px solid #cccccc; background-color:#ffffff ;  }
    -->
    </style>
    </head>
    <body>
    <div id="container">
    <h1>Container Style</h1>
    <p>A 950 pixel wide container centered <br />With 500 pixel min height<br />Border and background color</p>
    </div>
    </body>
    </html>
     
    
    For the rest of your code position:absolute is probably not the best way to go
     

Share This Page