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

Status
Not open for further replies.
E

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.
 
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.
 
E

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.
 
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.
 
E

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?
 
gav240z

gav240z

New Member
Eye4It said:
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?
Click to expand...

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.
 
G

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
 
Status
Not open for further replies.
Top