PDA

View Full Version : objects align good in dreamweaver, but when previewing in browser its not aligned ?


Mr Eric
10-18-2007, 04:50 AM
ive put 2 objects on a html page in dreamweaver they are aligned good
231 (picture 1 is when im designing in dreamweaver)
and when i preview it in the browser its not aligned at all
heres a picture of it in the browser 232
why is it doing this? is there anything i could do?
sorry if the pics are a bit small, but i was only aloud to upload 18kb per picture
thanks :) :-D

edbr
10-18-2007, 05:06 AM
hard to say without seeing your code

Cary
10-18-2007, 05:11 AM
Do you have a url we can look at? Without seeing the live page it looks like the top image is centered while the bottom image is a fixed distance from the left edge.

Mr Eric
10-18-2007, 06:20 AM
here is the 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 Document</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:86px;
top:121px;
width:569px;
height:374px;
z-index:1;
}
-->
</style>
</head>

<body>
<div id="apDiv1"><img src="Images/car.jpg" width="560" height="310" alt="car" /></div>
<div align="center"><img src="Images/mysite.gif" width="847" height="102" alt="MY SITE" />
</div>
<p>&nbsp;</p>
</body>
</html>

Mr Eric
10-18-2007, 06:31 AM
ok everyone i sorted out the problem. all i had to do was to put both pictures inside a AP div and it aligned in the browser. BUT it doesnt center in the middle of the page. its to the left hand side and i want it to be in the middle. any ideas anyone?

edbr
10-18-2007, 07:06 AM
you are using absolute positioning so the division is positioned so
position:absolute;
left:86px;
I would make a wrapper division, and make it say 80 % with 10% margins on each side. then put your divs in that.

edbr
10-18-2007, 09:39 AM
As per your PM
OK i did it now. This is a VERY simple layout , a wrapper and three divs inside it. the first two have pixel sizes the third is a percentage (ioo%) of the division. I have given them different colours so yo can see them. Play around with this and adapt it to what you want, i hope it will help. post for help.

<!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">
<!--
#wrapper {
position:relative;
width:80%;
height:auto;
margin-left: 10%;
margin-right: 10%;
}
#Div2 {
position:relative;
width:200px;
height:115px;
z-index:1;
background-color: #FF0000;
float: left;
}
#Div3 {
position:relative;
width:200px;
height:115px;
}
#Div4 {
position:relative;
width:100%;
float: left;
background-color: #0000FF;
}
-->
</style>
</head>

<body>
<div id="wrapper">
<div id="Div2"></div>

<div id="Div3"></div>

<div id="Div4"></div>
</div>
</body>
</html>