Coding help?

forums_noreply@adobe.com — Fri, 24 Dec 2010 20:50:16 GMT

I am relatively new to web design and I just developed

www.paintingbydarlene.com for a friend and on some monitors it shows up correctly, but on wider screens, the header, links, text, etc all show up to the left of the grey box and I'm not sure what I need to do in my code to make it align properly within all monitors. Here is my code, does anyone have any suggestion?

<!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>Painting by Darlene - Interior and Exterior Painting, Chesapeake, Virginia</title>

<style type="text/css">
body {
background-image: url(blue_and_yellow_stripes2.jpg);
}
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 87px;
top: 71px;
}
#apDiv2 {
position:absolute;
width:200px;
height:58px;
z-index:0;
left: 78px;
top: 36px;
}
#apDiv2 {
font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
}
#apDiv3 {
position:absolute;
width:522px;
height:8px;
z-index:3;
left: 97px;
top: 217px;
}
#apDiv4 {
position:absolute;
width:65px;
height:20px;
z-index:4;
left: 322px;
top: 238px;
}
#apDiv5 {
position:absolute;
width:40px;
height:115px;
z-index:4;
left: 255px;
top: 31px;
}
#apDiv6 {
position:absolute;
width:83px;
height:45px;
z-index:5;
left: 758px;
top: 238px;
}
#apDiv7 {
position:absolute;
width:80px;
height:30px;
z-index:5;
left: 141px;
top: 238px;
}
a {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 24px;
color: #7FA2C8;
}
a:visited {
color: #7FA2C8;
text-decoration: none;
}
a:hover {
color: #5C7FBF;
text-decoration: underline;
}
a:active {
color: #7FA2C8;
text-decoration: none;
}
a:link {
text-decoration: none;
}
#apDiv8 {
position:absolute;
width:77px;
height:27px;
z-index:4;
left: 619px;
top: 238px;
}
#apDiv9 {
position:absolute;
width:83px;
height:10px;
z-index:5;
left: 477px;
top: 238px;
}
#apDiv10 { position:absolute;
width:83px;
height:45px;
z-index:5;
left: 449px;
top: 238px;
}
#apDiv11 {
position:absolute;
width:579px;
height:48px;
z-index:6;
left: 289px;
top: 176px;
}
#apDiv12 {
position:absolute;
width:414px;
height:115px;
z-index:7;
left: 172px;
top: 307px;
}
body,td,th {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 14px;
}
#apDiv13 {
position:absolute;
width:200px;
height:115px;
z-index:8;
left: 144px;
top: 307px;
}
#apDiv {
position:absolute;
width:357px;
height:231px;
z-index:5;
left: 535px;
top: 308px;
}
#apDiv14 { position:absolute;
width:74px;
height:25px;
z-index:8;
left: 406px;
top: 643px;
}
</style>


</head>

<body>
<center>
<img src="body.png" width="920" height="693" />
<div id="apDiv12">
<p><div align="left"><font size="5">Contact Us: </font>
    </p>

<p>757-485-8694   (Main line)<br />
    757-761-3432   (Cell)</p>
<p>Address:<br />
    2001   S. River Dr<br />
    Chesapeake VA 23322</p>
<p>Email: <a href="mailto:dfrandle2001@yahoo.com"><font size="+0">dfrandle2001@yahoo.com</font></a></p>
</div></div>
<div id="apDiv2">
<h2><img src="header.png" width="816" height="280" /></h2>
</div>
<div id="apDiv8"><a href="services.html">Services</a></div>
<div id="apDiv6"><a href="contact.html">Contact</a></div>
<div id="apDiv9"><a href="about.html">About</a></div>
<div id="apDiv4"><a href="portfolio.html">Portfolio</a></div>
<div id="apDiv11">
<p> | 2001   S. River Dr, Chesapeake VA 23322 |757-485-8694    |</p>
</div>
<div id="apDiv7"><a href="index.html">Home</a></div>
<div id="apDiv">
<form action="FormToEmail.php" method="post" name="ContactForm" id="ContactForm">
    <p>
      <label>Name:</label>
      <br />
      <input name="name" type="text" id="name" />
      <br />
      <br />
      <label>Phone Number:</label>
      <br />
      <input name="number" type="text" id="number" />
      <br />
      <br />
      <label>E-mail:</label>
      <br />
      <input name="email" type="text" id="email" />
      <br />
      <br />
      <label>Service Request:</label>
      <br />
      <textarea name="comments" id="comments"></textarea>
    </p>
    <p>
      <input type="submit" name="Submit" id="Submit" value="Submit" />
    </p>
</form>
</div>
<div id="apDiv14">
<center>
    <a href="http://www.facebook.com/profile.php?id=1416524820&ref=ts"><img src="facebook.png" alt="" width="150" height="44" /></a>
</center>
</div>
</body>
</html>

I thought it was aligned...

forums_noreply@adobe.com — Tue, 21 Dec 2010 14:14:43 GMT

I just published this site for a friend of mine:

www.paintingbydarlene.com and it looks fine in all browers on my laptop as well as my iPhone, but when my friend looks at it on his computer, the aligning is

off. When I look at it in my computer at work, the aligning is off as well. I assume it's because of the bigger screens, but how do I fix this issue so that everything shows up in the grey box in all browers, regardless of the screen size? I added a "center" tag at the top of the coding and "/center" at the bottom, but obviously that didn't work. Any suggestions?

Adobe Community : All Content - All Communities

Coding help?

I thought it was aligned...