Hola Reynier, te contesto abajo.
Reynier Perez Mira wrote:
> Hola por aquí:
> Necesito poner 4 DIV's uno encima del otro, todos en la misma posicion.
> Cuando pase el mouse sobre una imagen entonces me aparece uno u otro en
> dependencia de la imagen seleccionada (esto es Javascript, lo pienso hacer
> usando script.aculo.us) pero bueno la pregunta con CSS es como poner los DIV
> uno encima de otro porque los he puesto asi:
>
> <div class="resumen_proyecto" id="auto">
> <h1>Simulador de conducción</h1>
> </div>
> <div class="resumen_proyecto" id="teorico">
> <h1>Simulador de conducción</h1>
> </div>
> <div class="resumen_proyecto" id="tiro">
> <h1>Simulador de conducción</h1>
> </div>
> <div class="resumen_proyecto" id="quirurgico">
> <h1>Simulador de conducción</h1>
> </div>
> <div class="resumen_proyecto" id="juego">
> <h1>Simulador de conducción</h1>
> </div>
>
La respuesta concreta a tu pregunta está aun más abajo, mientras tanto:
siendo que el texto es siempre el mismo ("Simulador de conducción") ¿hay
alguna razón por la que estés multiplicando tantas veces el mismo
código? (SEO puede ser una, aunque un poco obtusa en mi opinión).
Suponiendo que exista alguna buena razón, ¿no te conviene directamente
hacer algo así?:
<div class="resumen_proyecto auto">
<h1>Simulador de conducción</h1>
</div>
<div class="resumen_proyecto teorico">
<h1>Simulador de conducción</h1>
</div>
<div class="resumen_proyecto tiro">
<h1>Simulador de conducción</h1>
</div>
<div class="resumen_proyecto quirurgico">
<h1>Simulador de conducción</h1>
</div>
<div class="resumen_proyecto juego">
<h1>Simulador de conducción</h1>
</div>
Fijate que estoy usando multiples clases en cada elemento. Creo que
refleja mejor el contenido que tenés: "quirurgico" o "juego" son tipos
distintos (léase clases) de elementos similares.
Entonces, en el css:
div.resumen_proyecto{características comunes a todos estos divs}
div.teorico{características particulares de "teorico"},
div.tiro{características particulares de "tiro"}
div.quirurgico{características particulares de "quirurgico"}
div.juego{características particulares de "juego"}
etc.
Por otra parte, es muy probable que el div sea completamente
innecesario. Se te ocurrió una estructura así?:
<body class="teorico"> <!-- puede ser un div también -->
<h1>Simulador de conducción</h1>
...
</body>
el css:
h1{características comunes de todos los h1}
body.teorico h1{características particulares del H1 de "teorico"},
body.tiro h1{características particulares del H1 de "tiro"}
body.quirurgico h1{características particulares del H1 de "quirurgico"}
body.juego h1{características particulares del H1 de "juego"}
Luego el script solo tendría que cambiar la clase del body (o del div
que englobe los h1) por la que corresponda según la imagen cliqueada.
> Y luego en el CSS algo como esto:
> #teorico, #tiro, #quirurgico, #juego { visibility: hidden; top: 0; left: 0; }
>
Esta es la respuesta que buscabas (pregunta equivocada?):
Te olvidaste de declarar el tipo de posicionamiento: position: absolute.
> Pero no me funciona pues cada DIV me ocupa el tamaño de su contenido y no es
> eso lo que quiero. Supongan que cada uno de los DIV tenga 140px de alto.
> Entonces lo que quiero es posicionar los 5 de forma tal que el alto sea 140px
> y no 540 como me lo esta haciendo aún así ocultando los 4 restantes. Alguien
> me puede dar una ayuda?
Al margen de todo lo anterior, usando visibility: hidden, los objetos
siguen ocupando el mismo espacio. Esto quiere decir que en un contexto
de posicionamiento static o relative (no es tu caso si agregás la regla
que te dije), el elemento ocupa el espacio aunque no se vea, afectando a
los elementos circundantes. Para que esto no suceda deberías usar
display:none en vez de visibility:hidden.
Saludos y espero que te haya sido útil,
Pablo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
