z-index y position:relative;

mauricioadrian · #1 (**permalink**) 01/07/2008, 23:17

hola tengo el siguiente codigo en el cual no responde como quiero, el tema es tengo dentro del div "cuadro" dos div mas y quiero posicionar uno arriaba del otro y eh estado probando como ven abajo pero no lo alcanzo a lograr alguien podria darme una mano? Gracias.

<div id="cuadro">
<h1 class="titulo_noticia" style="margin-top:0px; margin-bottom:0px;" id="titulo_noticia"></h1>

<div style="position:relative; z-index:2; ">
<img id="imagen_noticia" onload="obj('cuadro').style.visibility='visible'"/ >
</div>

<div style="position:relative; z-index:3;">
<a href="#link" id="enlace">Ver ...</a>
<a href="#link" onclick="clearInterval(mauricio); cambiar(-1); inicio()"><img src="noticias_detacadas/atras_galeria.gif" border="0"> </a>
|
<a href="#link" onclick="clearInterval(mauricio)"><img src="noticias_detacadas/pausa_galeria.gif" border="0"></a>
|
<a href="#link" onclick="clearInterval(mauricio);cambiar(1);inicio ()"><img src="noticias_detacadas/adelante_galeria.gif" border="0"></a>
</div>

<p id="texto_noticia"></p>

</div>

Mikmoro · #2 (**permalink**) 02/07/2008, 01:19

Con gusto te ayudaría, pero no entiendo la consulta. No entiendo que con ese código no te quede como dices una caja arriba y la otra debajo. Si se puede ver en alguna parte indícalo, porque con los javascript y las imagenes que usas, sin poder verlo es imposible.

Mikel.

mauricioadrian · #3 (**permalink**) 02/07/2008, 09:01

hola Mikmoro. gracias por estar ahil. la verdad es que estuve probando y y cambien un poco el codigo. aqui es donde se puede ver. este es el nuevo codigo.
<head>
<style type="text/css">
div#cuadro{
position: relative;
top:5px;
left:10px;
z-index:1;

}

div#botonera{
position: relative;
z-index:1;

}
div#fondo_texto_div{
position: relative;
z-index: 2;
width: 500px;
height: 50px;
color: white;
font-weight: bold;
background-color: #3E4A4D;
filter:alpha(opacity=20); ///de esta linea
-moz-opacity: 0.6;
opacity: 0.6;
}

</style>

</head>

<body onload="inicio();mostrar(0);" >
<div>
<h1 class="titulo_noticia" style="margin-top:0px; margin-bottom:0px;" id="titulo_noticia"></h1>
</div>
<div id="cuadro">
<img id="imagen_noticia" onload="obj('cuadro').style.visibility='visible'"/ >
</div>
<div id="botonera">

<a href="#link" onclick="clearInterval(mauricio); cambiar(-1); inicio()"><img src="noticias_detacadas/atras_galeria.gif" border="0"> </a>
|
<a href="#link" onclick="clearInterval(mauricio)"><img src="noticias_detacadas/pausa_galeria.gif" border="0"></a>
|
<a href="#link" onclick="clearInterval(mauricio);cambiar(1);inicio ()"><img src="noticias_detacadas/adelante_galeria.gif" border="0"></a>

</div>
<div id="fondo_texto_div">
<p id="texto_noticia">
<a href="#link" id="enlace">Ver ...</a></p>
</div>

</body>

lo que quiero lograr es poner la imagen de fondo. arriba de esta los botones(tal como se muestran), y luego el texto con el fondo de opacidad arriba de la imagen,abajo de esta alineada a la izquierda,quedando apenas arriba de los botones sin taparlos.

Mikmoro · #4 (**permalink**) 02/07/2008, 09:08

Cita:

Iniciado por mauricioadrian

lo que quiero lograr es poner la imagen de fondo. arriba de esta los botones(ubicados alineados a la derecha y abajo de la imagen, y luego el texto con el fondo de opacidad arriba de la imagen,abajo de esta alineada a la izquierda, si quedar arriba de los botones.

Perdóname pero para mi es como si estuvieras hablando en clave (la imagen, arriba de esta los botones abajo de la imagen, etc.).

Si puedes haz una imagen de lo que queires conseguir, porque yo al menos no he entendido ni palabra.

Mikel.

mauricioadrian · #5 (**permalink**) 02/07/2008, 09:46

perdona mikmoro, voy a ver si soy un poco mas claro:

Necesito :

1 _ la imagen de fondo
2 _ los botones tal como estan ahora.en el link que deje arriba
3 _ y el texto lo quiero al pie de la foto,sobre esta.

asi es como lo quiero :

Mikmoro · #6 (**permalink**) 02/07/2008, 09:53

¿A qué parte te refieres? ¿al slide de imágenes que van rotando?

Mikel.

mauricioadrian · #7 (**permalink**) 02/07/2008, 09:54

al slide ya lo tengo armado, lo unico y me funciona, el efecto de desvanecer no me interesa, solo quiero posicionar las capas como en ese ej. lo que ya tengo hecho esta en este

Mikmoro · #8 (**permalink**) 02/07/2008, 09:58

Vale. Entiendo. Voy a ver qué se puede hacer.

Mikel.

Mikmoro · #9 (**permalink**) 02/07/2008, 10:29

Bueno, ya que lo tienes con posición relativa, creo que bastaría con que colocaras el div del texto (<div id="fondo_texto_div">) encima de la botonera en el html, y le pusieras en la css un top-50px; (o lo que necesite, y luego adaptarlo a explorer), y repetir la acción con la botonera.

No es fácil verlo para hacer pruebas porque la imagen la generas con javascript, pero básicamente eso sería lo normal. Otra alternativa es ponerlo dentro del div de la foto y con posición absoluta ponerle un bottom: 0px;

A ver si te sirve de algo

Mikel.

mauricioadrian · #10 (**permalink**) 02/07/2008, 10:48

ok, gracias mikmoro, cuando salga del trabajo pruebo. Muchas gracias por tu respuesta.

mauricioadrian · #11 (**permalink**) 02/07/2008, 23:04

sigo sin poder alinearlos mikmoro, podes darme una mano porfavor. hace horas que estoy probando y lo lo logro.

<style type="text/css">
#contenedor{
text-align: center;
width: 100%;
position: relative;
}

div#div_titulo{
position: relative;
z-index:5;
top: 0px;
font-size: 35px;
font-weight: bold;
color: maroon;
left:10px;
border-top: black solid 1px;
margin-left: 10px;
margin-right: 60px;

}

div#botonera{
position: relative;
z-index:11;
top: 1px;
height: 50px;
margin-left: 350px;

}
div#fondo_texto_div{
left:10px;
position: relative;
top: 1px;
z-index: 10;
width: 500px;
height: 100px;
color: white;
font-size: 20px;
font-weight: bold;
text-align: left;
background-color: #3E4A4D;
filter:alpha(opacity=80); ///de esta linea
-moz-opacity: 0.9;
opacity: 0.8;
}

div#cuadro{
position: relative;
z-index:2;
top: 0px;
width: 500px;
height: 390px;
left:10px;
}
div#foto_div{
position: relative;
z-index:10;
top: 0px;
width: 500px;
height: 390px;
left:10px;
}

</style>
</head>

<body onload="inicio();mostrar(0);" >

<div id="div_titulo">
<b id="titulo_noticia"></b>
</div>

<div id="cuadro">
<div id="foto_div">
<img id="imagen_noticia" onload="obj('cuadro').style.visibility='visible'"/ >
</div>
<div id="fondo_texto_div">
<a id="enlace">
<p id="texto_noticia" style="margin-left:10px; text-decoration:none; color:white; font-size:24px;"></p>
</a>
</div>

<div id="botonera">

<a href="#link" onclick="clearInterval(mauricio); cambiar(-1); inicio()"><img src="noticias_detacadas/atras_galeria.gif" border="0"> </a> |
<a href="#link" onclick="clearInterval(mauricio)"><img src="noticias_detacadas/pausa_galeria.gif" border="0"></a> |
<a href="#link" onclick="clearInterval(mauricio);cambiar(1);inicio ()"><img src="noticias_detacadas/adelante_galeria.gif" border="0"></a>

</div>
</div>

<br>
<br>
</body>

mauricioadrian · #12 (**permalink**) 03/07/2008, 00:04

ufff llevo horas. pero lo logre muchas gracias.

Mikmoro · #13 (**permalink**) 03/07/2008, 01:13

Bueno, no veo que en el último mensaje hubieras aplicado lo que recomendé de poner en la caja <div id="fondo_texto_div"> un top: -50px; pero si ya lo has resuelto me alegro.

Saludos.

Mikel.