Foros del Web » Creando para Internet » CSS »

Colocar una capa debajo de una imagen

Estas en el tema de Colocar una capa debajo de una imagen en el foro de CSS en Foros del Web. Hola a todos! Tengo una celda. En esta celda hay una imagen y una capa. La capa debe ir apareciendo / desapareciendo, según pasemos el ...
  #1 (permalink)  
Antiguo 17/03/2011, 13:58
 
Fecha de Ingreso: febrero-2011
Mensajes: 156
Antigüedad: 6 años, 10 meses
Puntos: 4
Colocar una capa debajo de una imagen

Hola a todos! Tengo una celda. En esta celda hay una imagen y una capa. La capa debe ir apareciendo / desapareciendo, según pasemos el ratón. Pero eso da igual. El tema está que en todos los navegadores me va bien. Excepto en IE, que, en lugar de colocarme la capa justo debajo de la imagen, me la coloca al lado. El código es el siguiente:

//////////////// En el HEAD

#div_bus1 {
position:absolute;
width:190px;
height:120px;
background-color:#FF9B06;
text-align:center;
visibility:hidden;
z-index:10;
}

////////////////// En el BODY

<table>
<tr>
<td>
<a href="[URL_DEL_LINK]"><img src="[URL_IMAGEN]"></a>
<div id="div1">[CONTENIDO DE LA CAPA]</div>
</td>
</tr>
</table>

¿Cómo puedo hacer para que la capa "div1" me aparezca debajo de la imagen?

Muchas gracias!
  #2 (permalink)  
Antiguo 17/03/2011, 14:45
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 6 años, 9 meses
Puntos: 192
Respuesta: Colocar una capa debajo de una imagen

¿Has probado poner left:0 y top:0 al elemento con posicionamiento absoluto? Es un problema que yo también he tenido, si no hay coordenadas por CSS Internet Explorer directamente lo ubica seguido del elemento anterior.

Tal vez sea eso.
  #3 (permalink)  
Antiguo 17/03/2011, 15:05
 
Fecha de Ingreso: febrero-2011
Mensajes: 156
Antigüedad: 6 años, 10 meses
Puntos: 4
Respuesta: Colocar una capa debajo de una imagen

Gracias pro la respuesta. Pero no me funciona. Es que claro, si le pongo posicion absoluta a la capa con left:0px; top:0px; me la engancha a la esquina superior de la pantalla. No de mi TD. Habñia pensado, darle posición relative a la capa. Haciendo que estuviese ligada al elemento contenedor ( es dcir, el TD ) pero entonces me reserva todo el espacio que necesita la capa, quedando un hueco vacío entre el menñu y el contenido dela página. Esto lo he solucionado, usando display:none, en lugar de visibility:hidden. Pero, después, al mostrar el submenú mediante display:block el contenido de la web se desplaza hacia abajo, es decir, lo que crece el submenú, es lo que se desplaza en contenido... A mejor hay algún otr valor de display que simplemente muestre la capa? Sin desplazar hacia abajo el contenido posterior?
  #4 (permalink)  
Antiguo 17/03/2011, 15:10
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 6 años, 9 meses
Puntos: 192
Respuesta: Colocar una capa debajo de una imagen

Mmmm, ahora no recuerdo bien pero había ciertos problemas de concepto en dar "position:relative" a una celda. Seguramente se puede, no recuerdo bien ahora.

Podés intentar esto:

Código HTML:
Ver original
  1.     <tr>
  2.         <td>
  3.         <div class="contenedor">
  4.             <a href="[URL_DEL_LINK]"><img src="[URL_IMAGEN]"></a>
  5.             <div id="div1">[CONTENIDO DE LA CAPA]</div>
  6.         </div>
  7.         </td>
  8.     </tr>

Entonces al DIV con clase "contenedor" le das position:relative;
  #5 (permalink)  
Antiguo 17/03/2011, 15:30
 
Fecha de Ingreso: febrero-2011
Mensajes: 156
Antigüedad: 6 años, 10 meses
Puntos: 4
Respuesta: Colocar una capa debajo de una imagen

Sí. De esta manera sí que colocaría el DIV debajo de la imagen. Pero me surjen una serie de problemas:
1) El TD pasa a tener el mismo width que la capa, perdiendo el width correcto
2) Si utilizo la propiedad visibility: hidden/visible, el TD reserva siempre el height de la capa. Esté visible o no.
3) La manera de solucionar esto sería utilizar display:none/block en lugar de visibility: hidden/visible. El problema entonces es que, al mostrar el contenido de la capa ( submenú ) todo el contenido de la página que se desplaza hacia abajo.

Vaya! Nunca pensé que costaría tanto hacer un menú con submenús verticales...

Etiquetas: capas
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 15:01.