Maquetacion con CSS usando X columnas (de ancho y margen regular, con redimensionamiento dinamico) - Maquetacion con CSS usando X columnas (de ancho y margen regular, con redim
Tutorial creado por PHoTeK. Extraido de: http://ofdnews.com
18 de Agosto de 2005
Otras hojas de cálculo
1 - Maquetacion con CSS usando X columnas (de ancho y margen regular, con redim
-El ancho de cada caja, naturalmente, es determinado por la division : "100/nº de cajas=X"
% ANCHO = (100/nº de cajas)
En lugar de usar posicionamiento absoluto ("position:relative;", se utilizara la propiedad "float:left;" para que se ponga automaticamente al lado del elemento más cercano (incluido el borde del navegador) que tenga a su izquierda. Si fuera "float:right;" haria lo mismo pero a la derecha.
Si se quieren poner margenes, contar que lo que hara sera quitarlo del ancho de la caja, es decir, si quereis que cada caja tenga un ancho de 23% y un margen de 2% entre caja y caja,la cosa quedaria asi "width:25%;""margin-left:2%;",es decir:
% ANCHO RESULTANTE= WIDTH - MARGEN
*Ejemplo
<style>
#caja1 {
float:left;
width:25%;
margin-left:1%;
border: solid 1px #999;
}
#caja2 {
float:left;
width:25%;
margin-left:1%;
border: solid 1px #999;
}
#caja3 {
float:left;
width:25%;
margin-left:1%;
border: solid 1px #999;
}
#caja4 {
float:left;
width:25%;
margin-left:1%;
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>
% ANCHO = (100/nº de cajas)
En lugar de usar posicionamiento absoluto ("position:relative;", se utilizara la propiedad "float:left;" para que se ponga automaticamente al lado del elemento más cercano (incluido el borde del navegador) que tenga a su izquierda. Si fuera "float:right;" haria lo mismo pero a la derecha.
Si se quieren poner margenes, contar que lo que hara sera quitarlo del ancho de la caja, es decir, si quereis que cada caja tenga un ancho de 23% y un margen de 2% entre caja y caja,la cosa quedaria asi "width:25%;""margin-left:2%;",es decir:
% ANCHO RESULTANTE= WIDTH - MARGEN
*Ejemplo
<style>
#caja1 {
float:left;
width:25%;
margin-left:1%;
border: solid 1px #999;
}
#caja2 {
float:left;
width:25%;
margin-left:1%;
border: solid 1px #999;
}
#caja3 {
float:left;
width:25%;
margin-left:1%;
border: solid 1px #999;
}
#caja4 {
float:left;
width:25%;
margin-left:1%;
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>
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 (de ancho y margen regular, con redim'
|
Opiniona sobre 'Maquetacion con CSS usando X columnas (de ancho y margen regular, con redimensionamiento dinamico) - Maquetacion con CSS usando X columnas (de ancho y margen regular, con redim' (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 tutorial |
Wikis relacionados con 'Maquetacion con CSS usando X columnas (de ancho y margen regular, con redimensionamiento dinamico) - Maquetacion con CSS usando X columnas (de ancho y margen regular, con redim'
No se han encontrado cursos relacionados con '
Maquetacion con CSS usando X columnas (de ancho y margen regular, con redimensionamiento dinamico) - Maquetacion con CSS usando X columnas (de ancho y margen regular, con redim'
