capas anidadas

[RBZ]

Hola
He puesto una capa que tiene anidadas otras capas. Cuando a la principal (padre) le cambio el codigo para centrarla, a las otras las "abandona" . Ya no hay anidación ni "ná" . ¿Qué puedo haber hecho mal ahora? . Lo único que quiero hacer es poner una capa principal que se centra, y que el resto tengan la posición absoluta dentro de la capa principal. Esto es un código de muestra.

Código:

<div id="Layer1" style="width:1024px; height:277px; margin:0 auto; z-index:1; left: -6px; top: 10px; background-color: #000033; layer-background-color: #000033; border: 1px none #000000;">
  <div id="Layer3" style="position:absolute; width:200px; height:115px; z-index:2; left: 452px; top: 110px; background-color: #3300FF; layer-background-color: #3300FF;"></div>
  <div id="Layer2" style="position:absolute; width:398px; height:47px; z-index:1; top: 254px; background-color: #00FF00; layer-background-color: #00FF00; border: 1px none #000000; left: 228px;"></div>

P.D: Estoy empezando con Dreamweaver gracias

[carbalga]

Saludos RBZ:

Para poder anidar LAYERS dentro de otro LAYERS debes:

1. Abrir el panel de LAYERS (F2)
2. Define cual es tu layer "PADRE"
3. Cuando quireas que otro LAYER se anide dentro de otro selecciona el LAYER en el PANEL DE LAYERS



4. Presiona la tecla CONTROL (PC) ó COMMAND (MAC) y atrastrala sobre el LAYER "PADRE"

5. El codigo queda de la siguiente manera:

Código HTML:

<div div id="Layer1" style="width:1024px; height:277px; margin:0 auto; z-index:1; left: -6px; top: 10px; background-color: #000033; layer-background-color: #000033; border: 1px none #000000;">
  <div id="Layer2" style="position:absolute; width:398px; height:47px; z-index:3; top: 192px; background-color: #00FF00; layer-background-color: #00FF00; border: 1px none #000000; left: 180px; visibility: visible;"></div>
  <div id="Layer3" style="position:absolute; width:200px; height:115px; z-index:2; left: 38px; top: 23px; background-color: #3300FF; layer-background-color: #3300FF; visibility: visible;"></div>
</div> 

BUENA SUERTE

[webosiris]

¿porqué usas id si definís el estilo con style?

position:absolute

Este es tu problema, la posición absoluta hace que los elementos salgan del flujo normal de la página... para centrar elelmentos posicionados absolutamente:

capas líquidas
.capa{
position:absolute;
width:80%;
left:10%;} /*(100-width)/2 */

capas fijas
.capa {
position: absolute;
width: 760px;
heigth: 420px;
margin-top: -210px; /*la mitad de alto del contenedor*/
margin-left: -380px; /*la mitad de ancho del contenedor*/
}

[RBZ]

Iniciado por carbalga

Saludos RBZ:

Para poder anidar LAYERS dentro de otro LAYERS debes:

1. Abrir el panel de LAYERS (F2)
2. Define cual es tu layer "PADRE"
3. Cuando quireas que otro LAYER se anide dentro de otro selecciona el LAYER en el PANEL DE LAYERS



4. Presiona la tecla CONTROL (PC) ó COMMAND (MAC) y atrastrala sobre el LAYER "PADRE"

5. El codigo queda de la siguiente manera:

Código HTML:

<div div id="Layer1" style="width:1024px; height:277px; margin:0 auto; z-index:1; left: -6px; top: 10px; background-color: #000033; layer-background-color: #000033; border: 1px none #000000;">
  <div id="Layer2" style="position:absolute; width:398px; height:47px; z-index:3; top: 192px; background-color: #00FF00; layer-background-color: #00FF00; border: 1px none #000000; left: 180px; visibility: visible;"></div>
  <div id="Layer3" style="position:absolute; width:200px; height:115px; z-index:2; left: 38px; top: 23px; background-color: #3300FF; layer-background-color: #3300FF; visibility: visible;"></div>
</div> 

BUENA SUERTE

Gracias carbalga, yo se hacer lo de anidar las capas de esa forma. El problema que tengo es que cuando le cambio el código a la capa padre, esta desaparece de la lista y las otras dejan de estar anidadas, se convierten en dos capas sueltas.

webosiris, lo que yo quiero hacer es que una capa (la padre) tenga la alineación centrada. Luego dentro de esa que estén las otras capas con posición absoluta con respecto a la capa padre, no con respecto a la página. Que lo que se mueva sea la capa padre con todo lo demás dentro, no cada cosa por si misma.
Gracias

[RBZ]

Lo siento, sigo sin enterarme. Me he leido todos los tutoriales que he visto... He hecho todas las pruebas que se me han ocurrido... ¿Podrían intentar decírmelo de otra manera a ver si me entero? GRACIAS

[webosiris]

Hola RBZ... a ver...
1º) OLVIDATE de las tablas... no intentes usar las capas como si fueran tablas, sino tenemos lo que se llama divitis, osea algo como <div><div><div><div></div></div></div></div> multiplicado a la décima potencia

2º) En Dreamweaver, usá la parte de código... es mucho más fácil trabajar con capas desde el código que desde la parte WYSIWYG

3º) ¿cual es el efecto que querés lograr? No entiendo el uso de absolute...

4º) Acostumbrate a escribir el código css en un archivo separado (tuarchivo.css) así te queda más limpio el html, podés ver todos los estilos juntos, etc.

Luego dentro de esa que estén las otras capas con posición absoluta con respecto a la capa padre

Absolute es con respecto a la página ya que justamente el objetivo es sacar al elemento del flujo de su bloque contenedor...

Que lo que se mueva sea la capa padre con todo lo demás dentro, no cada cosa por si misma.

Sacale la posición absoluta y debería funcionar... sacá también top, left, right, bottom porque solo funcionan con capas posicionadas de forma absoluta ... en cambio te puede ser de utilidad la propiedad margin... si respondés al punto 3 te va a ser más fácil recibir ayuda,

[RBZ]

Gracias Webosiris creo que ahora lo he entendido. El uso del absolute es porque creía que se podía usar referido a una capa. En los tutoriales definen a las capas como si fueran una página, por eso pensé que se podían referir absolutes a las capas. Voy a probarlo ahora.