Capa por detras de tabla

thorrr · #1 (**permalink**) 08/04/2008, 03:16

Hola buenas, llevo bastante tiempo consultando mis dudas con vosotros y aprovecho para agradeceros enormemente la labor que estáis haciendo. Después de mucho tiempo peleandome con esto, no me queda más remedio que pediros ayuda, a ver si hay suerte. En principio creo que la solución no es difícil, pero se me resiste.

El tema es: Teniendo en cuenta que tengo una tabla (tiene que ser una tabla, no otra capa) como podría hacer para que a ésta tabla le atravesase una capa por detrás. En el ejemplo, tengo una tabla con un ancho de 500px. Lo que busco es que haya una capa de por ejemplo width="100%" de color rojo y la tabla quede encima de ésta capa. No sé si me explico.

Un saludo y muchas gracias.

Código HTML:

<html>
  <head>
    <title>Tabla</title>
  </head>

  <body>
    <Table width="500px" cellpadding="10" cellspacing="0" border="1" align="center">
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
    </Table>
  </body>
</html>

Mikmoro · #2 (**permalink**) 08/04/2008, 03:23

Hola, thorr.

Pues habría varias formas de hacerlo, pero todo depende de cómo quieras que quede.

Por ejemplo, podrías ponerle ese color rojo al body.
Podrías crear una caja que envolviera tu tabla:

<div id="envoltorio">
<table....
</table>
</div>

y en la css

#envoltorio {
width: 100%;
background-color: #f00;
}

Si concretas más la ayuda podrá ser más concreta.

Mikel.

PedroRodas · #3 (**permalink**) 08/04/2008, 03:23

cual es el resultado que quieres conseguir, no te entendido muy bien. explicate un poco por favor.

thorrr · #4 (**permalink**) 08/04/2008, 03:37

Muchas gracias por responder. Y qué rápido además!

A ver...si, lo que a echo Mikel se aproxima bastante, pero lo que me gustaría es que una barra horizontal le atraviese por detrás a la tabla, sin que ocupe toda su altura. Por ejemplo, si la tabla es blanca, que le atraviese una barra roja por detrás (la tabla seguirá siendo blanca) pero sin ocupar toda su altura. Pongo el código de cómo ba el asunto con lo que tenía yo escrito, y lo que ha echo mikel:

Código HTML:

<html>
  <head>
    <title>Tabla</title>
  </head>
<link rel="stylesheet" href="estilos.css" type="text/css"/>
  <body>
  	<div id="envoltorio">
    <Table width="500px" cellpadding="10" cellspacing="0" border="1" align="center" bgcolor="white">
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
      <Tr>
	<Td align="center">Texto de relleno</Td>
      </Tr>
    </Table>
    </div>
  </body>
</html>

Código HTML:

el css:
#envoltorio {
width: 100%;
background-color: #f00;
}

Muchas gracias de nuevo!! (espero que se me haya entendido)

Mikmoro · #5 (**permalink**) 08/04/2008, 04:13

¿Algo así?

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="es-es">
<head>
<title>Tabla</title>
<style type="text/css">
* { margin: 0px;
padding: 0px;
}
#franja { width: 100%;
background-color: rgb(255, 0, 0);
margin-top: -100px;
z-index: 1;
position: relative;
height: 50px;
}
table { margin: 0px auto;
z-index: 10;
position: relative;
}
</style>
</head>
<body>
<table align="center" bgcolor="white" border="1" cellpadding="10" cellspacing="0" width="500">
<tbody>
<tr>
<td align="center">Texto de relleno</td>
</tr>
<tr>
<td align="center">Texto de relleno</td>
</tr>
<tr>
<td align="center">Texto de relleno</td>
</tr>
<tr>
<td align="center">Texto de relleno</td>
</tr>
<tr>
<td align="center">Texto de relleno</td>
</tr>
<tr>
<td align="center">Texto de relleno</td>
</tr>
<tr>
<td align="center">Texto de relleno</td>
</tr>
<tr>
<td align="center">Texto de relleno</td>
</tr>
<tr>
<td align="center">Texto de relleno</td>
</tr>
<tr>
<td align="center">Texto de relleno</td>
</tr>
<tr>
<td align="center">Texto de relleno</td>
</tr>
<tr>
<td align="center">Texto de relleno</td>
</tr>
<tr>
<td align="center">Texto de relleno</td>
</tr>
<tr>
<td align="center">Texto de relleno</td>
</tr>
</tbody>
</table>
<div id="franja"></div>
</body>
</html>

Mikel.

thorrr · #6 (**permalink**) 08/04/2008, 04:19

Cita:

Iniciado por Mikmoro

¿Algo así?

Mikel.

Clavau. Gracias de nuevo.

thorrr · #7 (**permalink**) 08/04/2008, 08:00

No! me acabo de dar cuenta de que no me sirve...

El tema es, que lo que necesito es ponerle un menu en la parte superior de la tabla. El menú está prefabricau, pero con el position relative de la tabla se vuelve loco.Cuando pongo el ratón sobre un link del menú, el submenú de éste sale lejos de donde devería hacerlo.

el menú es el siguiente: http://www.4thorder.us/Scripts/Scripts/JS.DHTMLMenuExpander/

Y si le quito el position relative, la banda de atrás se pone delante. Por eso lo preguntaba de ésta manera. Bueno, tranquilos, bastante habeis echo con ayudarme hasta ahora. Si no os apetece dejadlo, yo ya lo doy por imposible. Bueno, muchas gracias!

Mikmoro · #8 (**permalink**) 08/04/2008, 08:25

No debes darlo por imposible, pero como vés, sí es imprescindible dar todos los elementos para que se pueda saber qué se debe hacer, si no, a ti como a otras 100 consultas, das una solución que no sirve porque no encaja con los elementos de tu página que no has descrito. Esto es un poco desesperante, la verdad.

Yo en cuanto pueda te hecho un cable, pero para eso pon todo tu código html y css o un enlace donde se pueda ver tu página, si no, volveremos a cometer el mismo error una y otra vez.

Mikel.

thorrr · #9 (**permalink**) 09/04/2008, 10:22

Aupa, muchas gracias Mikel. Acabo de tomar como decisión solucionarlo de una forma bastante más cobarde: Buscar otra barra de enlaces prefabricada.

En cuanto a lo de poner parte del código, tienes toda la razón del mundo, pero a mí me da un poco de reparo poner aquí la dirección y luego poniendolo en un buscador aparezcan éstos mensajes. Por eso, puse trozos simplificados de lo que buscaba.

Bueno, saludos!

Mikmoro · #10 (**permalink**) 09/04/2008, 10:32

Sí, lo sé. Disculpa. A mucha gente le da reparos poner el código completo por lo que has dicho, o por mostrar su diseño inacabado, etcétera.

Lo que se puede poner es al menos la esctructura completa, aunque le quites los contenidos, la css completa, y así.

Si quieres que echemos un vistazo a cómo lo tenías con el menú que ya te funcionaba bien, si quieres mándame por privado la url de tu web y vemos si es posible solucinarlo sin una medida "drástica"

, y luego si encontramos una solución válida la posteamos aquí.

Mikel.