15/02/2007, 11:25
| ||||
| ||||
 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. |
|
15/02/2007, 18:43
| ||||
| ||||
| Re: Colocar capas en forma de tabla Prueba este código:
Código:
Mikel. <!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>
|
|
15/02/2007, 19:20
| ||||
| ||||
| 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 |
|
15/02/2007, 19:37
| ||||
| ||||
| 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. |
|
16/02/2007, 07:47
| ||||
| ||||
| 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 |
|
19/02/2007, 18:45
| ||||
| ||||
| 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:
Mikel. <!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>
|
