PDA

View Full Version : Help with APDivs


Mibec3
02-25-2010, 03:15 AM
Please bear with me, I'm new at this.....

I've created a site with some APdivs. The pages look fine in IE and Firefox, but when I print from either of these browsers, the printed copy moves the APDiv way over to the right of the page.
Can anyone tell me what I'm doing wrong?
My code is below:

<!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" />
<meta name="keywords" content="public infrstructure consulting, implementation management, infrastructure ontario, alternative financing and procurement, elisabeth stroback, elizabeth stroback" />
<meta name="description" content="successful implementation of strategic public infrastructure projects."/>
<meta name="author" content="mibec communications" />
<meta name="distribution" content="global" />
<meta name="robots" content="all" />
<title>Professional Network</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="tanalex1.css" rel="stylesheet" type="text/css" />
<style type="text/css">

#apDiv1 {
position:absolute;
left:470px;
top:432px;
width:519px;
height:300px;
z-index:1051;
list-style-position: inside;
list-style-type: none;
letter-spacing: normal;
text-align: left;
text-indent: 10px;
vertical-align: baseline;
word-spacing: normal;
white-space: normal;
display: list-item;
border: medium solid #50579B;
font-weight: bold;
font-size: large;
color: #50579B;
}
#apDiv1 ul ul li {
font-size: 14px;
}
#apDiv1 ul li {
font-size: 16px;
}
</style>
</head>
<body>
<div id="apDiv1">
<br />
<ul>
<li>Industry experts</li>
<ul>

<li>Health Care</li>
<li>Education</li>
<li>Transit and Transportation</li>
</ul>


<li>Advisors</li>
<ul>
<li>Financial</li>
<li>Legal</li>
</ul>

<li>Government Agencies</li>
<li>General Contractors</li>
<li>Professional Engineers</li>
<li>Cost Consultants</li>
</ul>
</div>
<div id="container">
<div id="header">
<div id="banner"><img src="images/newbanner.jpg" width="780" height="163" alt="Tanalex Corp" /></div>
<div id="navbar">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html" title="Tanalex">Home</a></li>
<li><a href="experience.html" title="Experience">Experience</a></li>
<li><a href="expertise.html" title="Expertise">Expertise</a></li>
<li><a href="professional network.html" title="Professional Network"><u>Professional Network</u></a></li>
<li><a href="exceedingexpectations.html" title="Exceeding Expectations">Exceeding Expectations</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div id="content"><!--end of services box --><!--end of tagbar -->
<div id="leftcolumn">
<h2><strong> Featured Projects</strong></h2>
<p>Health Care</p>
<h2><a href="Healthcare.html"><img src="images/healthcare.JPG" alt="Health Care Projects" width="150" height="100" /></a></h2>
<p>Education</p>
<p><a href="Education.html"><img src="images/education.jpg" width="150" height="112" alt="Education" /></a></p>
<p>Transit &amp; Transportation</p>
<p><a href="T&amp;T.html"><img src="images/OttawaLRT.jpg" width="150" height="84" alt="Transit and Transportation" /></a></p>
<p>Infrastructure Ontario</p>
<p><a href="InfOnt.html"><img src="images/infrastructure ontario logo.gif" width="150" height="51" alt="Infrastructure Ontario" /></a></p>
</div>
<div id="rightcolumn">
<h2 style="color:#50589b">Professional Network</h2>
<p>With diverse experience spanning a period of 33 years, Elisabeth Stroback has had the time and opportunity to develop a long list of professional relationships. Elisabeth frequently draws on her professional network to bring the right person into the project at the right time.</p>
</div>
</div><!--end of content -->

<div id="footer">

<p align="right">site design<a href="http://www.mibec.ca" title="Affordable Web design" target="_blank"> Mibec Communications </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Copyright &copy; Tanalex Corp. 2009 All Rights Reserved</p>
</div>
</div> <!--end of container -->
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

DWcourse
02-25-2010, 03:52 AM
Can anyone tell me what I'm doing wrong?

Sorry for being flippant, but what you're doing wrong is using AP divs.

Beyond that we'd need to see the style sheet for your page to be able to tell much.

Mibec3
02-25-2010, 02:08 PM
Thanks for your reply. I thought that APDivs were supposed to be the greatest thing since sliced bread! Provide lots of flexibility etc. Should I be using tables instead?


Here is the style sheet:
body {
background-color: #ffffff;
text-align: center;
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;

}
#container {
text-align: left;
width: 780px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
}
#header {
margin-top: 12px;
margin-bottom: 12px;
}
#content {
margin-top: 20px;
background-color: #ffffff;
font-size: 12px;
height: 500px;
width: 780px;
color: #50589b;
}
#tagbar {

height: 60px;
background-color: #a8b1ec;
font-size: 16px;
}
#footer {
margin-top: 12px;
margin-bottom: 12px;
clear: both;
font-size: 12px;
}
#banner {
height: 163px;
width: 780px;
padding-bottom: 12px;
}
#navbar {
height: 50px;
width: 780px;
background-color: #505897;
text-align: center;
vertical-align: middle;
}
#leftcolumn {
float: left;
width: 150px;
background-color: #50589b;
border: 0px none #50589b;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #ffffff;
height: auto;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 5px;
text-align: center;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0px;
}
#rightcolumn {
float: right;
width: 525px;
padding: 10px;
margin: 10px;
border: 0px none #50589b;
font-size: 14px;
}
a {
font-size: 12px;
color: #50589b;
text-decoration: none;
}
a:visited {
color: #50589b;
}
a:hover {
color: #50589b;
}
a:active {
color: #50589b;

}
h1 {
font-size: 36px;
color: #FFFFFF;
}
h2 {
font-size: 20px;
color: #FFFFFF;
text-align: center;
}
h3 {
font-size: 14px;
color: #FFFFFF;
}
/* CONTAINERS FOR HOME PAGE */
#Servicesbox {
position:absolute;
margin-left:0px;
top:370px;
width:780px;
height:257px;
z-index:1022;
background-color: #50589b;
left: auto;
}
#PubInf {
position:absolute;
margin-left:auto;
top:78px;
width:175px;
height:130px;
z-index:20;
background-color: #50589b;
left: 58px;
}
#Impl {
position:absolute;
width:175px;
height:130px;
z-index:30;
left: 295px;
top: 78px;
}
#RealEstate {
position:absolute;
width:175px;
height:130px;
z-index:31;
left: 536px;
top: 79px;
}
#Infrtextbox {
position:absolute;
width:672px;
height:50px;
z-index:32;
left: 59px;
top: 14px;
}
#Impltextbox {
position:absolute;
width:175px;
height:50px;
z-index:33;
left: 295px;
top: 10px;
}
#Realestatetextbox {
position:absolute;
width:175px;
height:50px;
z-index:34;
left: 536px;
top: 10px;
}
/* CONTAINER FOR CONTACT PAGE */
#Contactbox {
position:absolute;
margin-left:auto;
top:260px;
width:780px;
height:257px;
z-index:1022;
background-color: #50589b;
}

DWcourse
02-25-2010, 03:24 PM
NO! Use regular non-absolutely positioned divs,

On most of the APdivs you have a left margin which will move them to the left on the page and on the printout.

I'm not sure what setting some left margins (and only the left margin) to auto was meant to accomplish.

The way the styles that appear before the styles for home page are set up is correct. Notice the is no absolute positioning there.

Mibec3
02-25-2010, 04:15 PM
Got it - thanks. I changed them to regular divs and it looks great!

domedia
02-25-2010, 04:20 PM
I thought that APDivs were supposed to be the greatest thing since sliced bread! Provide lots of flexibility etc. Should I be using tables instead?
That was a little funny, no offense 8)

You can also look at the premade layouts that come with DW. If you look under the hood of those, it should give you some insight.