Capa sobre otra capa en tabla

jotamachuca · #1 (**permalink**) 14/01/2006, 15:46

Hola a todos

Tegno un problema (como siempre)

El asunto es que tengo el siguiente código.

Código:

...
<TR>
   <TD>
      <input type="text" name="Buscar" id="Buscar" autocomplete="off" OnKeyUp="Load();">
      <div id="Suggest" style="display:none">
      </div>
   </TD>
</tr>
...

El cuento, es que la capa Suggest, es completada con Ajax, como el autocompletar que tiene el GMail, para las direcciondes de correo, pero no se como hacer eso con el CSS

La hoja de estilo, es la siguiente (para el Suggest)

Código:

div#Suggest{
   font:verdana;
   border-width: 1;
   border-style: solid;
   border-color: #D1D7DC;
   background-color: #E8E8E8;
   height:200px;
   overflow:auto;
}

Lo que pasa ahora, es que al agregar contenido a esta capa, la capa crece, y agranda la celda, y la idea es que la capa pase por sobre todo el contenido, independiente que es lo que tiene abajo...

Se entiende ??? Espero que si

Gracias por su ayuda

Saludos !!!!!!!!!!!!!!

#2 (**permalink**) 14/01/2006, 18:04

bueno, en principio para que no se modifique el tamaño de la celda, puedes jugar tanto con 'overflow' como con 'table-layout'.

Pero me parece que para hacer lo que dices vas a necesitar jugar con 'position' y los márgenes, y no estoy seguro de que se pueda hacer independientemente del contenido y diseño de la página.

Saludos.

PatomaS · #3 (**permalink**) 14/01/2006, 19:07

Hola

Si sabes la posición que tendrá la celda en cuestión dentro de la página, puedes usar un código como este:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta name="language" content="ES" />
	<meta http-equiv="Content-Language" content="es" />
	<meta name="Author" content="patomas" />
	<title>Posicionar una capa en un punto determinado</title>
	<style type="text/css">
	.tabla01 {
		width: 300px;
		border: 1px solid #000000;
	}
	.tabla01 td {
		padding: 5px;
		table-layout: fixed;
	}
	.col01 {
		width: 150px;
	}
	.capa01 {
		position: absolute;
		width: 100px;
		top: 155px;
		left: 65px;
		border: 1px solid #0000ff;
	}
</style>

</head>
<body>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table class = "tabla01">
<col class = "col01" /><col class="col01" />
	<tr>
		<td class="td01">
			<div class = "capa01">Este texto está en la capa y no en la celda</div>
			<p class = "p01">Este texto está en la celda 1 de la tabla</p>
		</td>
		<td>Este texto está en la celda 2 de la tabla</td>
	</tr>
</table>
</body>
</html>

Las dimensiones y colores son solo para el ejemplo, lo importante son los códigos de posicionamiento.

Felicidad

jotamachuca · #4 (**permalink**) 24/01/2006, 07:51

Holaaa

Bueno, la verdad es que con posiciones absolutas funciona,.. pero la idea es que quede mas "relativo". No me gusta usar posiciones absolutas...

Existe alguna otra forma ??? he buscado varios "trucos" y naaa que naaa

Gracias

Saludos

Tew · #5 (**permalink**) 24/01/2006, 08:09

Mira esto: http://www.forospc.com/vbulletin/sho...d.php?t=110978 Ahi lo tendras mas "relativo" a la tabla ke las contiene.

El uso ke le di es el menu/directorio de la primera pagina de mi firma.

jotamachuca · #6 (**permalink**) 03/02/2006, 07:02

Hola

La verdad amigo Tew no encontre nada

....

Me gustaria depender meno de las posiciones, ya qeue con valores absolutos funciona, pero quiero que sea relativo.. para no tener que ir página por página comprobando esto

BUeno, alguna otra sugerencia

Saludos

kemie · #7 (**permalink**) 03/02/2006, 08:09

sip. puedes poner la capa posicionada absolutamente con relación a la celda que la contiene.
intenta:
td{position:relative;}
div#Suggest{
position:absolute;
top:5px;
left:5px;
}
asi estara siempre a 5px del borde superior y 5px del borde izquierdo de la celda que lo contiene.