Capas que se mueven

gutiw · #1 (**permalink**) 17/03/2005, 08:33

Hola, estoy intentando hacer una página con DW MX, en XHTML con CSS y capas. En Explorer las capas se comportan bien, en la vista previa en el navegador se ven en la misma posición que las he diseñado, pero con Mozilla y Opera se me amontonan de cualquier manera. ¿A qué se puede deber ésto?
Muchas gracias
Mario

kemie · #2 (**permalink**) 17/03/2005, 08:51

hol aguti
si puedes mostrar tu codigo es mucho mas facil ver el problema
:)

gutiw · #3 (**permalink**) 17/03/2005, 10:29

Tienes razón, ahí va el código de la página y el de las CSS a continuación

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="Templates/estilosPagPrin.css" rel="stylesheet" type="text/css" />
</head>

<body>
<p class="fondo"> </p>
<div id="capa1" style="position:absolute; z-index:1" class="capa1">
<div id="capa10" style="position:absolute; left:386px; top:89px; width:102px; height:39px; z-index:2">
<h2 align="center">número 13 </h2>
</div>

</div>

<div id="Layer2" style="position:absolute; z-index:2" class="capa2">
<div id="capa5" style="position:absolute; z-index:3" class="capa5"></div>
<div id="capa6" style="position:absolute; z-index:2" class="capa6"></div>
<div id="capa7" style="position:absolute; z-index:4" class="capa7"></div>

</div>
<div id="Layer3" style="position:absolute; z-index:5" class="capa3">
<div id="Layer4" style="position:absolute; z-index:1" class="capa9"></div>
</div>
<div id="capa4" style="position:absolute; z-index:4" class="capa4">
<h3>TITULO</h3>
<h4>SUBTITULO</h4>
<p>quarum unam incolunt Belgae, aliam...
</p>
</div>
<div id="capa8" style="position:absolute; z-index:3" class="capa8"></div>
</body>
</html>

A continuación el código de las CSS

.capa1 {
position: relative;
height: 132px;
width: 401px;
left: 29px;
top: 14px;
background-image: url(../activos/imagenes/logo%20caribe.gif);
background-repeat: no-repeat;
}
body {
background-color: #99CC99;
background-image: url(../activos/imagenes/fondo.jpg);
font-weight: bold;
background-repeat: no-repeat;
word-spacing: 0.1em;
}
.capa2 {
height: 431px;
width: 182px;
left: 29px;
top: 101px;
position: absolute;
}
.capa3 {
background-image: url(../activos/imagenes/barraNavamarilla.gif);
left: 285px;
top: 155px;
width: 153px;
height: 278px;
background-repeat: no-repeat;
}
.capa4 {
background-image: url(../activos/imagenes/recuadro%20derecho.gif);
height: 540px;
width: 255px;
left: 520px;
top: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
text-indent: 1em;
padding-left: 1em;
padding-top: 2em;
}
.capa5 {
background-image: url(../activos/imagenes/limonLeEspera.jpg);
height: 137px;
width: 200px;
left: -25px;
top: 10px;
position: relative;
}
.capa6 {
background-image: url(../activos/imagenes/cahuita.jpg);
height: 133px;
width: 200px;
position: relative;
top: 137px;
}
.capa7 {
background-image: url(../activos/imagenes/pviejo.jpg);
position: relative;
height: 150px;
width: 200px;
top: 250px;
left: -10px;
}
.capa8 {
background-image: url(../activos/imagenes/manzanillo.jpg);
width: 200px;
top: 450px;
left: 100px;
position: relative;
height: 133px;
}
.capa9 {
position: relative;
height: 133px;
width: 200px;
left: 15;
top: 275;
background-image: url(../activos/imagenes/tortuguero.jpg);
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 2em;
font-weight: bold;
text-decoration: underline;
color: #000099;

}
h4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.5em;
font-style: italic;
font-weight: bold;
color: #990000;

}

Darth Rana · #4 (**permalink**) 17/03/2005, 20:53

Como le puedo hacer para fijar las capas y que no se muevan al momento de hacer mas grande la ventana del navegador, se mueven segun muevo el tamaño de la ventana.

Necesito un buen jalon de orejas por eso.

Gracias

Que la fuerza los acompañe

kemie · #5 (**permalink**) 18/03/2005, 03:18

tu problema es que les estas diciendo a tus capas que se posicionen a la vez relativa y absolutamente.
tienes:
<div id="capa1" style="position:absolute; z-index:1" class="capa1">
y luego:
.capa1 {
position: relative;
height: 132px;
width: 401px;
left: 29px;
top: 14px;
background-image: url(../activos/imagenes/logo%20caribe.gif);
background-repeat: no-repeat;
}

Tienes que decidirte por UN modo de posicionamiento, absoluto o relativo, y ajustar todas las capas.

gutiw · #6 (**permalink**) 18/03/2005, 10:30

Cita:

Iniciado por kemie

Tienes que decidirte por UN modo de posicionamiento, absoluto o relativo, y ajustar todas las capas.

Gracias por contestar kemie, he probado poniendo todas las capas en posición absoluta y también en relativa... pero no funciona, se me acumulan las capas en la esquina superior izquierda, con Explorer todo va bien, pero Mozilla y Opera no.
Mario

kemie · #7 (**permalink**) 18/03/2005, 11:16

No se que es exactamente lo que quieres hacer. Con tu codigo como esta ahorita, tienes la capa 5,6 y 7 dentro de la 2, y esta se sobrepone a la 1, que contiene a la 10. Puedes mostrar un diagrama de como quieres que se acomoden?
Algo que te puede ayudar es ponerles bordes de colores a las capas, eso te ayudará a posicionarlas mejor

gutiw · #8 (**permalink**) 18/03/2005, 13:20

Cita:

Iniciado por kemie

No se que es exactamente lo que quieres hacer. Con tu codigo como esta ahorita, tienes la capa 5,6 y 7 dentro de la 2, y esta se sobrepone a la 1, que contiene a la 10. Puedes mostrar un diagrama de como quieres que se acomoden?
Algo que te puede ayudar es ponerles bordes de colores a las capas, eso te ayudará a posicionarlas mejor

Muchas gracias por tu paciencia, la verdad es que es la primera vez que intento hacer este trabajo y no sé nada, estoy aprendiendo.
He vuelto a crear la página desde cero, le he puesto borde a las imágenes y ahora funciona perfectamente, pero hay algo que me intriga, en la hojas de estilos indiqué todas las capas en posición relativa, pero en el código de la página figura como absoluta y eso lo ha hecho DW, yo no y no sé por qué sucede.
Un ejemplo:
<body>
<div id="capaContenedor" style="position:absolute; z-index:1" class="contenedor">
<div id="capaLogo" style="position:absolute; z-index:1" class="logo"></div>
…………………………
………………………….
</div>
</body>
</html>

body {
background-image: url(../activos/imagenes/fondo.jpg);
}
.contenedor {
position: relative;
height: 585px;
width: 780px;
left: 0px;
top: 0px;
}
.logo {
background-image: url(../activos/imagenes/logo%20costa%20rica.gif);
position: relative;
height: 121px;
width: 401px;
left: 29px;
top: 14px;
………………………
………………………
No lo pongo todo porque el resto es igual.

kemie · #9 (**permalink**) 18/03/2005, 14:31

cuando "dibujas" una capa utilizando la herramienta de capas de dreamweaver, automaticamente te las pone con posicion absoluta.

gutiw · #10 (**permalink**) 18/03/2005, 14:58

Muchas gracias por tu ayuda.
Mario