Foros del Web » Creando para Internet » CSS »

Colocar capas en forma de tabla

Estas en el tema de Colocar capas en forma de tabla en el foro de CSS en Foros del Web. Hola quisiera saber como puedo hacer un diseño en forma de tablas utilizando capas, es decir 3 filas y 3 columnas por ejemplo, espero se ...
  #1 (permalink)  
Antiguo 15/02/2007, 11:25
Avatar de omar_cb11  
Fecha de Ingreso: septiembre-2005
Mensajes: 178
Antigüedad: 12 años, 3 meses
Puntos: 0
Pregunta Colocar capas en forma de tabla

Hola quisiera saber como puedo hacer un diseño en forma de tablas utilizando capas, es decir 3 filas y 3 columnas por ejemplo, espero se pueda!
__________________
A veces hay que darle un golpecito al Pc para que funcione.
  #2 (permalink)  
Antiguo 15/02/2007, 18:43
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
Re: Colocar capas en forma de tabla

Prueba este código:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>solicion alternativa</title>
  <style type="text/css">
#contenedor { margin: auto;
position: relative;
width: 750px;
}
.fila1, .fila2, .fila3 { border: 1px solid rgb(0, 0, 76);
width: 33%;
float: left;
margin-left: auto;
margin-right: auto;
display: block;
height: 30px;
}
.fila1 { background-color: rgb(102, 204, 204);
}
.fila2 { background-color: rgb(51, 153, 153);
}
.fila3 { background-color: rgb(51, 102, 102);
}
  </style>
</head>
<body>
<div id="contenedor">
<div class="fila1"></div>
<div class="fila1"></div>
<div class="fila1"></div>
<div class="fila2"></div>
<div class="fila2"></div>
<div class="fila2"></div>
<div class="fila3"></div>
<div class="fila3"></div>
<div class="fila3"></div>
</div>
</body>
</html>
Mikel.
  #3 (permalink)  
Antiguo 15/02/2007, 19:20
Avatar de omar_cb11  
Fecha de Ingreso: septiembre-2005
Mensajes: 178
Antigüedad: 12 años, 3 meses
Puntos: 0
Re: Colocar capas en forma de tabla

jejeje! si asi pero fijate que cuando introduzco texto en una capa y utilizo el <br /> no se autoajusta el alto sino que se queda fijo y el texto como que se sale. Sabes como hacer para que el alto de la capa se autoajuste al texto? de antemano gracias.

Algo asi como esto:

__________________
A veces hay que darle un golpecito al Pc para que funcione.

Última edición por omar_cb11; 15/02/2007 a las 19:28
  #4 (permalink)  
Antiguo 15/02/2007, 19:37
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
Re: Colocar capas en forma de tabla

Oh, claro. Su hubieras sido algo más explícito diciendo qué querías meter dentro, cómo se debería redimensionar, etcétera, el ejemplo se hubiera podido ajustar más lógicamente, pero si dices: "¿cómo simular una tabla de...?", pues es bastante difícil intuir para qué lo quieres.

De todas maneras el ejemplo te debería servir de modelo para lo que quieras hacer.

Mikel.
  #5 (permalink)  
Antiguo 16/02/2007, 07:47
Avatar de omar_cb11  
Fecha de Ingreso: septiembre-2005
Mensajes: 178
Antigüedad: 12 años, 3 meses
Puntos: 0
Re: Colocar capas en forma de tabla

Si muchas gracias, bueno olvidate de lo que puse en el primer post! como haria para hacer un diseño como el que puse en la imagen? Gracias
__________________
A veces hay que darle un golpecito al Pc para que funcione.

Última edición por omar_cb11; 16/02/2007 a las 08:17
  #6 (permalink)  
Antiguo 19/02/2007, 18:45
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
Re: Colocar capas en forma de tabla

Hola, Omar.
No sé si seguirás todavía por aquí. He tardado lo mío porque lo que querías conseguir, para hacer que sea compatible a explorer y firefox es mucho más complicado de lo que parece. Si fuera sólo para firefox es muy fácil, pero (como siempre), para explorer es un cristo.
Es mucho más jodido de lo que parece. Creo que es uno de los retos que más complicado me ha resultado, pero como siempre, he aprendido cosas, con lo que me doy por satisfecho.

Espero que te sirva, aunque probablemente habrás buscado otra solución y ya no valga de mucho.

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Tabla simulada</title>
  <style type="text/css">
#contenedor { width: 320px;
margin: 0 auto;
}
.capa1, .capa6 { margin: 0pt auto;
display: block;
background-color: rgb(255, 0, 0);
font-weight: bold;
text-align: center;
font-size: 2em;
padding-top: 8px;
padding-bottom: 8px;
width: 320px;
}
.capa6 { background-color: rgb(0, 0, 102);
color: rgb(255, 255, 255);
padding-top: 8px;
padding-bottom: 8px;
}
.centro1, .centro2 {
font-size: 2em;
display: block;
float: left;
width: 160px;
}
.centro1 { border-right: 160px solid rgb(255, 255, 0);
background-color: rgb(51, 51, 255);
}
.centro2 { border-right: 160px solid rgb(255, 102, 0);
background-color: rgb(51, 255, 51);
}
.capa2, .capa3, .capa4, .capa5 {
padding-top: 8px;
font-weight: bold;
padding-bottom: 8px;
font-size: 1em;
position: relative;
width: 160px;
text-align: center;
float: left;
}
.capa3, .capa5 {
margin-right: -160px;
background-color: transparent;
}
.capa2 {background-color: rgb(51, 51, 255);
}
.capa4 {background-color: rgb(51, 255, 51);
}
  </style>
</head>
<body>
<div id="contenedor">
<div class="capa1">capa 1</div>
<div class="centro1">
<div class="capa2">capa 2</div>
<div class="capa3">capa 3</div>
</div>
<div class="centro2">
<div class="capa4">capa 4</div>
<div class="capa5">capa 5</div>
</div>
<div class="capa6">capa 6</div>
</div>
</body>
</html>
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 22:38.