Foros del Web » Creando para Internet » CSS »

z-index y position:relative;

Estas en el tema de z-index y position:relative; en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/07/2008, 00:17
Avatar de mauricioadrian  
Fecha de Ingreso: junio-2008
Mensajes: 157
Antigüedad: 9 años, 6 meses
Puntos: 0
Información z-index y position:relative;

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>
  #2 (permalink)  
Antiguo 02/07/2008, 02:19
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: z-index y position:relative;

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.
  #3 (permalink)  
Antiguo 02/07/2008, 10:01
Avatar de mauricioadrian  
Fecha de Ingreso: junio-2008
Mensajes: 157
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: z-index y position:relative;

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.

Última edición por mauricioadrian; 05/08/2008 a las 16:11
  #4 (permalink)  
Antiguo 02/07/2008, 10:08
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: z-index y position:relative;

Cita:
Iniciado por mauricioadrian Ver Mensaje
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.
  #5 (permalink)  
Antiguo 02/07/2008, 10:46
Avatar de mauricioadrian  
Fecha de Ingreso: junio-2008
Mensajes: 157
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: z-index y position:relative;

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 :

Última edición por mauricioadrian; 05/08/2008 a las 16:11 Razón: el link no existe mas
  #6 (permalink)  
Antiguo 02/07/2008, 10:53
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: z-index y position:relative;

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

Mikel.
  #7 (permalink)  
Antiguo 02/07/2008, 10:54
Avatar de mauricioadrian  
Fecha de Ingreso: junio-2008
Mensajes: 157
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: z-index y position:relative;

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

Última edición por mauricioadrian; 05/08/2008 a las 16:11 Razón: el link no existe mas
  #8 (permalink)  
Antiguo 02/07/2008, 10:58
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: z-index y position:relative;

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

Mikel.
  #9 (permalink)  
Antiguo 02/07/2008, 11:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: z-index y position:relative;

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.
  #10 (permalink)  
Antiguo 02/07/2008, 11:48
Avatar de mauricioadrian  
Fecha de Ingreso: junio-2008
Mensajes: 157
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: z-index y position:relative;

ok, gracias mikmoro, cuando salga del trabajo pruebo. Muchas gracias por tu respuesta.
  #11 (permalink)  
Antiguo 03/07/2008, 00:04
Avatar de mauricioadrian  
Fecha de Ingreso: junio-2008
Mensajes: 157
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: z-index y position:relative;

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>
  #12 (permalink)  
Antiguo 03/07/2008, 01:04
Avatar de mauricioadrian  
Fecha de Ingreso: junio-2008
Mensajes: 157
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: z-index y position:relative;

ufff llevo horas. pero lo logre muchas gracias.
  #13 (permalink)  
Antiguo 03/07/2008, 02:13
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: z-index y position:relative;

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:53.