Capas descolocadas en dreamweaver

SOLUCION

Nuestro esquema de trabajo consistirá en una capa con posición relativa, que nos servirá de "ancla" y otra con la posición absoluta, donde colocaremos el contenido final a mostrar en la capa.
La capa relativa la colocaremos en el lugar aproximado donde queramos que aparezca la capa absoluta. La capa absoluta la posicionaremos, una vez cargada la página, en un lugar próximo a la capa relativa. Por supuesto, estas acciones las vamos a tener que realizar con Javascript, que es el lenguaje que nos permite actualizar las posiciones de las capas dinámicamente.
Detenidamente
Decíamos que habría que colocar una capa relativa cercana al lugar donde tiene que aparecer la capa con position absolute. Insisto en que las capas relativas se colocan en el lugar donde las metemos dentro del código HTML, por lo que será fácil colocar la capa relativa en el lugar exacto y que este lugar sea válido para cualquier definición.
La segunda capa, la que tiene el contenido final, la pondremos inicialmente en una posición cualquiera y escondida, de manera que no se vea que está mal colocada. Una vez terminada de cargar la página, podremos acceder a la posición de la capa relativa, extrayendo sus valores top y left y colocándolos en los correspondientes top y left de la capa con posición absoluta. Una vez marcada la posición de la capa absoluta podemos volverla visible.

A la vista de la imagen siguiente, la capa con posición relativa la hemos colocado en el enlace. En realidad habría tres capas con posición relativa para poder posicionar otras tantas capas con posición absoluta. La parte que vemos sombreada de verde corresponde al espacio que abarcaría la capa relativa.
Su posición sería la que está marcada por el aspa roja que aparece en su esquina superior izquierda. Dicha posición depende del lugar donde aparezcan los enlaces en la página.
Luego, con Javascript deberíamos asignar la posición de la capa absoluta de una manera parecida a esta.
Left de la capa absoluta = left de la capa relativa
top de la capa absoluta = top de la capa relativa + altura de la capa relativa
Podemos sumarle algún píxel más a la posición de la capa, si es que queremos moverla un poco abajo y a la derecha, tal como hemos visto en la imagen.
No pretendo en este artículo, muy a mi pesar y por falta de espacio y tiempo, explicar cómo se hacen esas operaciones de Javascript. Advierto que si no se conoce nada de Javascript va a ser imposible ponerse con una tarea tan tediosa como el manejo de capas. Si por el contrario, ya hemos tenido contacto con Javascript y DHTML anteriormente, no debería ser un problema realizar esas acciones.

Bueno lo que mejor te puedo recomendar es usar un contenedor que limite todas tus capas, es decir :

<div id="contenedor">

<div id="header">

</div>

<div class="lo_que_quieras">

</div>

</div>

Ese contenedor tiene que darle atributos css, como ancho, alto, ubicación, ejemplo:

#contenedor{

width:980px;

height:auto; /*PARA QUE SE ADAPTE AL ALTO QUE TENGA LA PAGINA*/

margin:0px auto; /*ESTO ES PARA QUE QUEDE CENTRADO EN LA PAGINA*/

clear:both;

overflow:hidden;

}

Con eso no debería tener problemas, otra recomendación que te hago es no usar position:absolute; sino usar float:left; o float:right; según corresponda.

Muchos saludos.

Suerte!

Créate una capa central con una posición absoluta, donde tu quieras y dentro los flotantes, hazlos relativos a esta capa, de forma que se te verá perfecto independientemente del tamaño de la resolución. Echa un vistazo al tutorial de creación Web en www.dreamweaver-tutoriales.com