Capa (posicion:static) problemas

NopalStudio · #1 (**permalink**) 26/03/2006, 19:47

Te escribo para hacerte una consulta, tengo que hacer esta galeria (http://www.cristiansalazar.net/DialU...28/bodas1.html) que funcione correctamente, en Flash es facil, pero en Dreamweaver se me complico, porque como lo trate de hacer fue asi:

hice 13 capas en las cuales aloje las 13 imagenes grandes que se ocultan por default y las coloque una arriba de otra(acopladas-encimadas). En los botones de las imagenes (thumbails) tienen el comportamciento que cuando se de un click sobre el, esta aparecera la capa correspondiente y desaparece las demas TODO HASTA AQUI SUENA DE MARAVILLA PARA MI...

PEROOOOOOOOO
Las capas tienen el comportamiento de posicion que sus atributos son static, absolute y relative,
Las capas por default tienen el comportamiento posicion:absolute, pero el problema con este, es que si tu tienes abierto tus favoritos en tu explorador SE MUEVE la capa y entonces ya no queda en su posicion que debe estar.
Entonces lo que hice fue que la cambie (posicion:static) para que no se moviera.. y Wooo NO SE MUEVE pero PEROOO no se pueden poner una capa sobre otra y entonces no funciona la galeria como debe ser...

Mira si tu abres la galeria sin los favoritos ni nada de ello la galeria funcioa bien.. pero depues abrela con los favoritos y la galeria es una chafa...{http://www.cristiansalazar.net/DialU...28/bodas1.html)

Como le hago.. me ayudas, please...

Gracias..

juanchilo · #2 (**permalink**) 27/03/2006, 04:16

MIra no entiendo mucho el rollo pero si necesitas hacer una super posicion entre capas debes mantener position:absolute; con los valores de top left etc..
y luego colocas la propiedad z-index con valores numericos segun cantidad de capas que actuaran:

ejemplo:

css:

Código:

#fondo_foto {position:absolute; top:valor; left:valor; z-index: 0; }

#foto_view {position:absolute; top:valor; left:valor; z-index: 1; }

/* nota que debes mantener position en absolute porque relative no funcionara (al no definir cordenadas como top y left). Y que el valor de z-index comienza de mas profundo (0) a superficie (1)*/

html:

Código HTML:

<div id="fondo_foto"> 
este estara en la primer nivel de profundidad, osea debajo 
</div>

<div id="foto_view"> 
este mostrara sobre el anterior
</div>

si no es este el problema real avisa, y veremos bien la cuestión.

saludos

NopalStudio · #3 (**permalink**) 27/03/2006, 23:33

Muchas gracias por tu ayuda.. pero el problema radica en lo mismo... las capas siguen moviendose cuando tu tienes abierto en tu exporador tus favoritos, mi codigo tienen tanto top y left pero no los respeta la capa (<div id="Layer1" style="position:absolute; left:203px; top:120px; width:409px; height:306px; z-index:1; visibility:hidden;"><img src="../images/Bodas-1.jpg" width="409" height="306"></div>)

Por favor moderadores y colegas ayudenme

juanchilo · #4 (**permalink**) 28/03/2006, 00:52

cambia el

Código:

position:absolute;

por

Código:

position:auto;

en la capa del problema (id="Layer13"). Eso deberia funcionar.

saludos

NopalStudio · #5 (**permalink**) 29/03/2006, 12:54

Hola...
gracias por la ayuda.. pero no funciona ya que toma la misma propiedad que el static.. no se pueden tener capas una arriba de otra se ponen una abajo de otra oberva: http://www.cristiansalazar.net/DialU...28/bodas1.html y esto deberia verse asi: http://www.cristiansalazar.net//Dial...728/bodas.html pero el problema con esta ultima es que se mueven las capas cuando tienen abierto los favoritos del explorador...

como Auto no funciono

juanchilo · #6 (**permalink**) 29/03/2006, 12:58

a mi se me mueve perfecto la capa osea queda bien ubicada con auto;
a ver muestrame el ejemplo que subiste con auto; aplicado
puedes??

NopalStudio · #7 (**permalink**) 30/03/2006, 00:04

si.. si queda bien ubicada solo que.. no las demas capas no pueden estar acopladas... mira http://www.cristiansalazar.net/DialU...28/bodas1.html y esto no esta correcto...
lo correcto seria http://www.cristiansalazar.net//Dial...728/bodas.html PERO SIN QUE SE MUEVAN

juanchilo · #8 (**permalink**) 30/03/2006, 00:07

mira opino que utilices otra metodología ya que anidar capas y tablas (y en tanta cantidad la verdad confunde y mucho). Por que no pruebas un diseño completo con capas te sera mas facil de manipular (desde css externos)

NopalStudio · #9 (**permalink**) 30/03/2006, 12:29

y esto como seria... como puedo manipular css externos..

NopalStudio · #10 (**permalink**) 31/03/2006, 08:56

Hola.. como tendria que hacerle si se manipulan css externos???

juanchilo · #11 (**permalink**) 31/03/2006, 10:05

crea una plantilla completamente con capas <div></div> correctamente anidadas.

Luego manipulas los estilos para esas capas desde un archivo css externo llamandolo asi:

Código HTML:

<link rel="stylesheet" href="estylo.css" type="text/css" >

(esta llamada lo pones entre <title> y <head>)

siendo estylo.css el file donde aplicas los estilos

prueba diseñar asi y luego cualquier cosa vuelves a consultar. Porque el codigo que tienes ahora esta muy desordenado por tantas tablas y <div> con los style aplicados alli mismo.

saludos

tunait · #12 (**permalink**) 31/03/2006, 10:19

Tema trasladado desde (x)html

NopalStudio · #13 (**permalink**) 31/03/2006, 16:26

Lo que hice fue lo siguiente.. abri un archivo nuevo nopalstyle.css e ingrese los siguiente:

Cita:

.NopalStyle01
{
<div id="Layer1" style="position:auto; left:203px; top:120px; width:409px; height:306px; z-index:1; visibility:hidden;"><img src="../images/Bodas-1.jpg" width="409" height="306"></div>
}

.NopalStyle02
{
<div id="Layer2" style="position:auto; left:203px; top:120px; width:409px; height:306px; z-index:2; visibility:hidden;"><img src="../images/Bodas-2.jpg" width="409" height="306"></div>
}

.NopalStyle03
{
<div id="Layer3" style="position:auto; left:203px; top:120px; width:409px; height:306px; z-index:3; visibility:hidden;"><img src="../images/Bodas-3.jpg" width="409" height="306"></div>
}

Y en la pagina de bodas1.html le ingrese esto

Cita:

Pero ahora mi duda es.. desde mi pagina bodas1.html como le hago para que
en el boton(imagen) mande llamar NopalStyle01 es decir me aparesca la foto en el lugar indicado..
Imagino que debe aparecer la foto dependiendo de donde le puse las coordenadas verdad..

NopalStudio · #14 (**permalink**) 31/03/2006, 22:58

Hola.. some body help me... please

NopalStudio · #15 (**permalink**) 01/04/2006, 14:05

ayuda por favor.

Jorolo · #16 (**permalink**) 01/04/2006, 14:44

Hola NopalStudio.

Lo que necesitas es lectura.

Un par de sujerencias:
http://ferguweb.tx.com.ru/w3/Overview.html
http://www.w3.org/Style/Examples/011/firstcss.es.html

Espero que te sean de ayuda. No te lo tomes a mal, es un consejo de amigo.

NopalStudio · #17 (**permalink**) 01/04/2006, 23:32

Muchas gracias Jorolo.. estoy ahora mismo leyendo.. cuando lo resuelva lo publico.. y si en dado caso que no logre les aviso bye..

NopalStudio · #18 (**permalink**) 02/04/2006, 08:11

Hola... pues verificando las ligas que me han mandado, encontre en la segunda algo que se llama css externos.. pero no habla de como meterle a esos css externos capas (div), les agradeceria que me puedan ayudar

Jorolo · #19 (**permalink**) 02/04/2006, 08:27

Hola de nuevo.

Cita:

... pero no habla de como meterle a esos css externos capas (div)

No habla de como hacerlo, por que es algo que no se hace.

El segundo enlace es a mi juicio especialmente recomendable.
leelo, detenidamente. Sigue al pie de la letra sus indicaciones, haz todo lo que dice y solo lo que dice.

NopalStudio · #20 (**permalink**) 02/04/2006, 16:02

gracias Jorolo..

pero entonces mi pregunta ahora es.. en los css externos no se puede meter capas (div)...
El segundo enlace es muy bueno al igual que el primero... pero lo que busco es algo en especifico.. como hacer que 13 capas (div) no se muevan de su posicion (sin utilizar la propiedad static, ya que esta no me permite tener una capa arriba de otra)...

NopalStudio · #21 (**permalink**) 03/04/2006, 14:51

alguien que me ayude.. por favor

NopalStudio · #22 (**permalink**) 04/04/2006, 11:31

por favor ayudaaaaa

NopalStudio · #23 (**permalink**) 06/04/2006, 21:58

Hola por favor alguien que me ayude...

NopalStudio · #24 (**permalink**) 12/04/2006, 00:34

ayudenme por favor..