Dreamweaver 4 and auto-centering a layer

Thought you might find this useful

[frank999]

Ok, the situation is this...

I have a layer that I need to auto-center on the page. This is easy-peasy and is a subject that is covered elsewhere. This code will achieve it:

<style type="text/css" media="screen"> 
body { 
 background-color:#fff; 
 } 
#content { 
 position:absolute; 
 left:50%; 
 top:50%; 
 width:300px; 
 height:300px; 
 /* the width/2 */ 
 margin-left:-150px;  
 /* the height/2 */ 
 margin-top:-150px; 
 border:1px dashed #333; 
 background-color:#eee; 
 text-align:left; 
 font:11px verdana; 
 padding:10px; 
} 
body>#content { 
 margin-left:-160px; /* Correct value. */ 
 margin-top:-160px; /* Correct value. */ 
} 
</style>

However, all the methods that explain how to do this (e.g. the one above) do not take into account the fact that as soon as you use code like that to auto-center a layer, Dreamweaver 4 makes it nigh impossible to edit anything (especially complex design within that layer) as it becomes invisible in Design View. It might be valid CSS but DW4 doesn't display it (I can't speak for DWMX as I don't use it).

The way to do it with CSS totally within the Dreamweaver GUI is as follows:

1. Create your style sheet 
2. Edit the body tag style 
 >> Block >> Text Align = center 
 >> Box >> Margin = set all to 0 pixels 
3. Create a Layer and note its pixel width (e.g. 500) 
4. Create a new style, e.g. 'centerLayer' 
 >> Box >> Margin >> Top = 10 (whatever suits you) 
 >> Box >> Margin >> Left = -250 (i.e. half of 500) 
 >> Positioning >> Placement >> Left = 50%

That's all there is to it. The layer is still visible and editable in Design View albeit pushed to the right-hand side of the canvas. I couldn't believe this method wasn't discussed elsewhere and if it is, I couldn't find it.

It displays identically, and auto centres, in IE6 and Fireworks on PCWin2k, Safari and IE5 on MacOSX. Not tested in any other browser.

I hope it helps somebody.

Frank