Hey!
I'm having trouble positioning my buttons and banner. It has been 2 days that i'm trying to fix this but no luck. I'm hoping someone can help my find my mistakeS (as i'm new to html/css). I'm using dreamweaver as my editor. When select the design or live view in dreamweaver everything is perfectly positioned but when i open it in a browser, everything shifts positions.
index.html
<!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" />
<link href="main.css" rel="stylesheet" type="text/css" />
<title>Ron Phone Store</title>
</head>
<body>
<div id = "mainDiv">
<div id = "logo">
<img src="images/Logo.png" width="729" height="56"/>
</div>
<div id = "buttonBackground">
<img src="images/ButtonBackgound.png" width="1133" height="55" />
</div>
<div id="iphoneButton">
<img src="images/IphoneButton.png" width="81" height="20" />
</div>
<div id="blackberryButton">
<img src="images/BlackberryButton.png" width="134" height="25"/>
</div>
<div id="jailbreakButton">
<img src="images/JailbreakButton.png" width="235" height="20"/>
</div>
<div id="accessoriesButton">
<img src="images/AccessoriesButton.png" width="135" height="20"/>
</div>
<div id="contactUsButton">
<img src="images/ContactUsButton.png" width="130" height="20"/>
</div>
<div id="banner">
<img src="images/Banner.jpg" width="1133" height="280"/>
</div>
</div>
</body>
</html>main.css
@charset "utf-8";
/* CSS Document */
div#mainDiv {
position:relative;
width: 1133;
height: 2000px;
margin: 0 auto;
}
div#logo {
position:absolute;
left: 310px;
top: 0px;
margin 30px auto;
width: 729px;
height: 55px;
}
div#buttonBackground img{
position:absolute;
left: 138px;
top: 87px;
margin: 0px auto;
width: 1133px;
height: 55px;
}
div#iphoneButton img {
position: absolute;
top: 107px;
right: 1100px;
width: 81px;
height: 20px;
}
div#blackberryButton img {
position: absolute;
top: 105px;
right: 885px;
width: 134px;
height: 25px;
}
div#jailbreakButton img {
position: absolute;
top: 107px;
right: 583px;
width: 235px;
height: 20px;
}
div#accessoriesButton img {
position: absolute;
top: 108px;
right: 373px;
width: 135px;
height: 20px;
}
div#contactUsButton img {
position: absolute;
top: 110px;
right: 160px;
width: 130px;
height: 20px;
}
div#banner img {
position: absolute;
top: 153px;
right: 105px;
width: 1134px;
height: 280px;
}
