PDA

View Full Version : centred tables and div tags don't line up?


whitedragon101
06-15-2009, 10:28 PM
Background

I am just learning Dreamweaver and so have followed all the beginners tutorials recommending using tables to layout the page. But I do want to use Ap Divs as well.

I created an example of the problem below.

The Problem

When I select my tables to be centred on the page the Ap Divs still use the left hand side as the absolute reference for their position. So when designing the page placing the AP Div on the far right of the screen on the page is the only way I can get it to appear centred in the browser. But obviously that's a bodged solution as any scaling of the window will mess the whole thing up.

Is there any way to get the Ap Divs to work with a page layout based on tables?

Sample code

<!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>Untitled Document</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:347px;
top:105px;
width:450px;
height:307px;
z-index:1;
}
-->
</style>
</head>

<body>
<div id="apDiv1">
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="300" border="0" align="left" cellpadding="4">
<tr>
<td bgcolor="#CCFF33">this</td>
<td bgcolor="#CCFF33">is</td>
<td bgcolor="#CCFF33">a</td>
</tr>
<tr>
<td bgcolor="#CCFF33">this</td>
<td bgcolor="#CCFF33">is</td>
<td bgcolor="#CCFF33">a</td>
</tr>
<tr>
<td bgcolor="#CCFF33">this</td>
<td bgcolor="#CCFF33">is</td>
<td bgcolor="#CCFF33">a</td>
</tr>
<tr>
<td bgcolor="#CCFF33">this</td>
<td bgcolor="#CCFF33">is</td>
<td bgcolor="#CCFF33">a</td>
</tr>
</table>
</div>
<table width="888" height="446" border="0" align="center" cellpadding="4">
<tr>
<td width="202" bgcolor="#3366FF">hello i am some text</td>
<td width="664" bgcolor="#33FFCC">&nbsp;</td>
</tr>
</table>
</body>
</html>

DWcourse
06-16-2009, 02:39 PM
Sorry, but those tutorials must have been old. Designing with tables isn't considered good practice anymore. Use CSS positioining.

AP (absolutely positioned) Divs align relative to:

The browser window (what you're seeing) OR
The nearest parent (it contains the AP Div) object with CSS positioning applied.So, if your AP div is inside an object with absolute, relative or fixed CSS positioning, it will align relative to that object.

DWcourse
06-16-2009, 02:41 PM
One more thing, to center a div, you don't use CSS positioning. All you need to do is set the left and right margins to auto with CSS.

domedia
06-16-2009, 05:29 PM
I am just learning Dreamweaver and so have followed all the beginners tutorials recommending using tables to layout the page. But I do want to use Ap Divs as well. Just want to chime in and agree. None of those two approaches are considered to be a good approach when laying out a webpage.

whitedragon101
06-20-2009, 11:48 AM
Just want to chime in and agree. None of those two approaches are considered to be a good approach when laying out a webpage.


Which method or methods are considered to be good practice? What do the pros do? :)

Corrosive
06-20-2009, 03:10 PM
Which method or methods are considered to be good practice? What do the pros do? :)

Use relative positioning with div tags and CSS.