PDA

View Full Version : How do I center


Eldrick Woods
10-28-2008, 12:02 AM
I am a beginner to Dreamweaver. I read the article on this link http://www.dreamweaverclub.com/css-center-content.php on how to center the page in the browser. I want to use the rigid method but I do not understand how to set the margins to auto. I do not think they mean to set each individual div box margin to auto, plus I do not see an auto setting for that. I would imagine I have to set the entire page margins to auto, but how do I do that?

Corrosive
10-28-2008, 07:58 AM
I am a beginner to Dreamweaver. I read the article on this link http://www.dreamweaverclub.com/css-center-content.php on how to center the page in the browser. I want to use the rigid method but I do not understand how to set the margins to auto. I do not think they mean to set each individual div box margin to auto, plus I do not see an auto setting for that. I would imagine I have to set the entire page margins to auto, but how do I do that?

You just have to follow the tutorial. It does explain the process correctly. Basically it is telling you to wrap all the elements of your site in a div called something like 'wrapper' and then set the margins of 'wrapper' to auto. margin: auto;

Because everything else is wrapped inside it will also be centred.

Eldrick Woods
10-29-2008, 04:01 AM
Below is the code for a simple page I am working on. How do I change the code to get the page to center in a browser window instead of the page always being to the left?



<!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">
<!--
#apDiv1 {
position:absolute;
left:219px;
top:38px;
width:80px;
height:176px;
z-index:1;
margin: auto;
}
#apDiv2 {
position:absolute;
left:466px;
top:139px;
width:180px;
height:181px;
z-index:2;
}
-->
</style>
</head>
<body>
<div id="apDiv1"><img src="images/speaker.jpg" alt="speaker" width="177" height="176" /></div>
<div id="apDiv2"><img src="images/studio.jpg" alt="studio" width="204" height="165" /></div>
</body>
</html>

edbr
10-29-2008, 05:00 AM
#apDiv1 {
position:absolute;
left:219px;
top:38px;
width:80px;
height:176px;
z-index:1;
margin: auto;
}
using position absolute you are detemining its position in thebrowser window. very simply it could be( with same name but no longer absolute)
#apDiv1 {
position:relative;
width:80px;
height:176px;
margin: auto;
}