0

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;
}
6
Contributors
5
Replies
7
Views
6 Years
Discussion Span
Last Post by ko ko
0

You are going to have to put an example up online somewhere that we are able to see it to give you more feedback Taimoor.

0

Yea you should put an example online. Just so you know dreamweaver's "live view" isn't as reliable as a browser.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.