Maquetacion con CSS usando X columnas (de ancho y margen regular, con redimensionamiento dinamico) - Maquetacion con CSS usando X columnas
Artículo creado por PHoTeK. Extraido de: http://ofdnews.com
18 de Agosto de 2005
Programación web, Usabilidad
1 - Maquetacion con CSS usando X columnas
-El ancho de cada caja, naturalmente, es determinado por la division : "100/nº de cajas=X" y a X se le restara el valor que queramos que haya de margen entre caja y caja:
% ANCHO = ((100/nº de cajas) - (% MARGEN))
Con left alineas la caja donde quieras ponerla, la 1ª a la izquierda del todo, y la 2ª left tiene el valor del ancho de la 1ª caja + el margen que quieres que haya (en este caso 1% de margen), y asi sucesivamente,
LEFT X= % ANCHO + LEFT (X-1) + % MARGEN
Nota:X-1 representa el valor que left tenia en la caja inmediatamente anterior.
*Ejemplo de maquetacion a 4 Columnas
<style>
#caja1 {
position:absolute;
width:24%;
left:1%;
border: solid 1px #999;
}
#caja2 {
position:absolute;
width:24%;
left:26%;
border: solid 1px #999;
}
#caja3 {
position:absolute;
width:24%;
left:51%;
border: solid 1px #999;
}
#caja4 {
position:absolute;
width:24%;
left:76%;
border: solid 1px #999;
}
</style>
</head>
<body>
<div id="caja1">Prueba 1</div>
<div id="caja2">Prueba 2</div>
<div id="caja3">Prueba 3</div>
<div id="caja4">Prueba 4</div>
</body>
*Ejemplo de maquetacion a 3 columnas:
<style>
#caja1 {
position:absolute;
width:32%;
left:1%;
border: solid 1px #999;
}
#caja2 {
position:absolute;
width:32%;
left:34%;
border: solid 1px #999;
}
#caja3 {
position:absolute;
width:32%;
left:68%;
border: solid 1px #999;
}
</style>
</head>
<body>
<div id="caja1">Prueba 1</div>
<div id="caja2">Prueba 2</div>
<div id="caja3">Prueba 3</div>
</body>
% ANCHO = ((100/nº de cajas) - (% MARGEN))
Con left alineas la caja donde quieras ponerla, la 1ª a la izquierda del todo, y la 2ª left tiene el valor del ancho de la 1ª caja + el margen que quieres que haya (en este caso 1% de margen), y asi sucesivamente,
LEFT X= % ANCHO + LEFT (X-1) + % MARGEN
Nota:X-1 representa el valor que left tenia en la caja inmediatamente anterior.
*Ejemplo de maquetacion a 4 Columnas
<style>
#caja1 {
position:absolute;
width:24%;
left:1%;
border: solid 1px #999;
}
#caja2 {
position:absolute;
width:24%;
left:26%;
border: solid 1px #999;
}
#caja3 {
position:absolute;
width:24%;
left:51%;
border: solid 1px #999;
}
#caja4 {
position:absolute;
width:24%;
left:76%;
border: solid 1px #999;
}
</style>
</head>
<body>
<div id="caja1">Prueba 1</div>
<div id="caja2">Prueba 2</div>
<div id="caja3">Prueba 3</div>
<div id="caja4">Prueba 4</div>
</body>
*Ejemplo de maquetacion a 3 columnas:
<style>
#caja1 {
position:absolute;
width:32%;
left:1%;
border: solid 1px #999;
}
#caja2 {
position:absolute;
width:32%;
left:34%;
border: solid 1px #999;
}
#caja3 {
position:absolute;
width:32%;
left:68%;
border: solid 1px #999;
}
</style>
</head>
<body>
<div id="caja1">Prueba 1</div>
<div id="caja2">Prueba 2</div>
<div id="caja3">Prueba 3</div>
</body>
Valora este capítulo:
Autor y licencia de 'Maquetacion con CSS usando X columnas (de ancho y margen regular, con redimensionamiento dinamico) - Maquetacion con CSS usando X columnas'
|
Opiniona sobre 'Maquetacion con CSS usando X columnas (de ancho y margen regular, con redimensionamiento dinamico) - Maquetacion con CSS usando X columnas' (0)
Tu nombre debe tener tres caracteres como mínimo.
Es necesario que te des de alta con una cuenta de correo válida.
Es necesario que te des de alta con una cuenta de correo válida.
El contenido del título de tu opinión debe tener tres caracteres como mínimo.
Es obligatorio que selecciones una valoración del recurso.
El contenido del comentario de tu opinión debe tener tres caracteres como mínimo.
Opina sobre este artículo |
Wikis relacionados con 'Maquetacion con CSS usando X columnas (de ancho y margen regular, con redimensionamiento dinamico) - Maquetacion con CSS usando X columnas'
Aqui va un método basado en posicionamiento relativo en lugar de absoluto, asi que en...
Más »
Si se encuentra con una pantalla con múltiples ventanas, colores o un cursor que sólo...
Más »
Si has oído hablar de Samba y deseas ver qué es lo que puede hacer...
Más »
Este documento describe el lenguaje CSS1 (Cascade Style Sheets, level 1 - hojas de estilo...
Más »
Hasta la fecha, la investigación ha descuidado de forma inexcusable un serio estudio de las...
Más »
