Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   CSS (http://www.forosdelweb.com/f53/)
-   -   z-index y position:relative; (http://www.forosdelweb.com/f53/z-index-position-relative-601931/)

mauricioadrian 01/07/2008 23:17
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>

Mikmoro 02/07/2008 01:19
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.

mauricioadrian 02/07/2008 09:01
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.

Mikmoro 02/07/2008 09:08
Respuesta: z-index y position:relative;
 
Cita:
Iniciado por mauricioadrian (Mensaje 2473405)
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 02/07/2008 09:46
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 :

Mikmoro 02/07/2008 09:53
Respuesta: z-index y position:relative;
 
¿A qué parte te refieres? ¿al slide de imágenes que van rotando?

Mikel.

mauricioadrian 02/07/2008 09:54
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

Mikmoro 02/07/2008 09:58
Respuesta: z-index y position:relative;
 
Vale. Entiendo. Voy a ver qué se puede hacer.

Mikel.

Mikmoro 02/07/2008 10:29
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.

mauricioadrian 02/07/2008 10:48
Respuesta: z-index y position:relative;
 
ok, gracias mikmoro, cuando salga del trabajo pruebo. Muchas gracias por tu respuesta.

mauricioadrian 02/07/2008 23:04
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>

mauricioadrian 03/07/2008 00:04
Respuesta: z-index y position:relative;
 
ufff llevo horas. pero lo logre muchas gracias.

Mikmoro 03/07/2008 01:13
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.


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

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.