Okay, so I've been having trouble with a couple things. One, when I look the my page in live view it's perfectly centered, but when I open it up in a web browser it is on the left of the page. Two, I can't get the main div tag to hug the top of the page. Here is the code, so hopefully someone can help me out. =P
<!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>Copper Leaf Crossing</title>
<style type="text/css">
.main {
width: 980px;
}
.bannerarea {
height: 200px;
width: 950px;
}
</style>
<style type="text/css">
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 74px;
}
#apDiv2 {
position:absolute;
width:360px;
height:226px;
z-index:1;
left: 95px;
top: 136px;
}
#apDiv3 {
position:absolute;
width:445px;
height:297px;
z-index:1;
left: 519px;
top: 299px;
}
</style>
<link href="CLC/CLC.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv4 {
position:absolute;
width:447px;
height:300px;
z-index:2;
left: 517px;
top: 628px;
}
#apDiv5 {
position:absolute;
width:479px;
height:292px;
z-index:3;
left: 33px;
top: 291px;
}
#apDiv6 {
position:absolute;
width:950px;
height:242px;
z-index:4;
}
#apDiv7 {
position:absolute;
width:480px;
height:300px;
z-index:5;
left: 34px;
top: 627px;
}
</style>
</head>
<body>
<div class="main">
<div id="apDiv6"><img src="CLC/banner.jpg" width="950" height="250" alt="Banner" /></div>
<p> </p>
<p> </p>
<div class="text">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="apDiv5">
<h3><strong>Copper Leaf Crossing</strong> is a 23 acre complex dedicated to the care of animals.We have created a warm and friendly destination for animal enthusiasts.Wether you have a cat or canary, a dog or a frog, we can help you care for your pet. On campus, you will find:</h3>
<p><a href="f"><strong>Animal Kingdom Veterinary Hospital</strong></a> - Their compassionate and dedicated staff are skilled in the medical care of both domestic and exotic pets.</p>
<p><a href="f"><strong>Creature Comforts Bed & Bath</strong></a> a great pet boarding facility for dogs, cats, birds, reptiles and small mammals that also offers pet grooming. </p>
<p><a href="thereatureconservancy.org"><strong>The Creature Conservancy</strong></a>- A truly unique non-profit organization that offers avariety of educational programs with live exotic animals, summer camps, tours and a variety of animals on display.</p>
<p><strong><a href="f">Dogwood Veterinary Referral Center</a></strong> - a full service imaging and surgery centerthat provides exceptional care for pets with neurological problems.</p>
</div>
<p> </p>
<p> </p>
<p>
<div id="apDiv4">
<iframe width="444" height="250" frameborder="0" scrolling="No" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=4940+ann+a rbor-saline+rd+ann+arbor+MI+48103&aq=&sll=42.250821,-83.756397&sspn=0. 004813,0.008476&ie=UTF8&hq=&hnear=4940+Ann+Arbor-Saline+Rd,+Ann+Arbor+ Charter+Township,+Michigan+48108&ll=42.21421,-83.797332&spn=0.004815,0 .008476&t=h&z=14&output=embed"></iframe>
<p>4940 Ann Arbor-Saline RD Ann Arbor MI 48103</p>
</div>
<br />
<p></p>
</blockquote>
</div>
<p> </p>
<blockquote>
<p> </p>
<blockquote>
<p> </p>
</blockquote>
</blockquote>
<div id="apDiv3"><img src="CLC/arialCLC.jpg" width="444" height="300" /></div>
<p> </p>
<div id="apDiv7"><img src="../Downloads/Copy of PICT0029.JPG" width="444" height="300" /></div>
</div>
</body>
</html>
Thanks! (The website isn't live yet, if it was I would have just posted the URL.)
Problem #1
Using APDivs for primary layouts is a really bad idea. Here's why:
http://apptools.com/examples/pagelayout101.php
Problem #2
You can't center a page built this way unless you wrap everything inside a parent container and give it position:relative.
For a quick fix, add this to your CSS.
body {
position:relative; /*to contain APDivs*/
width: 980px;
margin:0 auto; /*centered*/
padding:0;
}
You can remove the .main class rule from your CSS, you don't need it.
Also remove <div class="main"> and </div> from your HTML.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
You can't center a page built this way unless you wrap everything inside a parent container and give it position:relative.
You can remove the .main class rule from your CSS, you don't need it.
Also remove <div class="main"> and </div> from your HTML.
I believe I answered too quickly without reading the entire code, but I don't quite understand your answer to the OP. Telling them to add a wrapper then telling them to remove the one they have?
The OP .main is their wrapper (ideally it should be an id) so my response produces the same result as when removing it and adding the styling to the body. Personally I like to keep the containing DIV. However, the position:relative does need to be added to my response above - to which I edited my original post.
If you were to use that method, you would need to style the html{ } separately. which would keep your 'background' separate from the containing body. As I expressed in my follow up post, I am not a fan of this method but do agree it can be used. I found a post comparing the 2 methods and if you read half way down the comments, you will find a few people pointing out possible issues of using such a method.
The best approach is to remove all positioning, top, left and z-indexes.
Use CSS margins, padding and floats to align elements on the page.
While you learn CSS, you might find it easier to start with a pre-built CSS layout that has all the columns and containers you will need for your project. Then it's a simple matter of inserting images and text into your layout.
http://alt-web.com/TEMPLATES/Basic-1-col-fixed.shtml
For commercial CSS Templates that are rock solid and perform well in all browsers, visit Project Seven:
http://www.projectseven.com/products/index.htm
See DW Starter Pages
http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_l ayouts.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
Z-index = stacking order and can be used ONLY on positioned elements.
A comprehensive look
http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property -a-comprehensive-look/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
North America
Europe, Middle East and Africa
Asia Pacific