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

Eye4It · #1 (**permalink**) 23-10-2008, 06:24 PM

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 · #2 (**permalink**) 23-10-2008, 06:53 PM

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.

Eye4It · #3 (**permalink**) 23-10-2008, 07:16 PM

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 · #4 (**permalink**) 23-10-2008, 07:47 PM

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.

Eye4It · #5 (**permalink**) 23-10-2008, 09:54 PM

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 · #6 (**permalink**) 23-10-2008, 10:40 PM

Quote:

Originally Posted by Eye4It

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?

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.

ghost · #7 (**permalink**) 24-10-2008, 01:27 AM

Another suggestion for you

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="XHTML namespace">
<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

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Size of PM inbox	paul	Forum Feedback, Development and Competitions	24	13-09-2008 09:16 PM
Table layout vs CSS layout ...	dbee	Coding Help	21	12-07-2007 11:57 AM
CSS font size	Gavin	HTML Basics	10	22-04-2007 12:52 PM
Relative worth of position	gothwalk	Search Engine Optimisation	4	19-09-2006 02:48 PM

Sponsored links

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

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

Similar Threads

Sponsored links