04/01/2007, 13:06
|
 | Colaborador | | Fecha de Ingreso: octubre-2006 Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses Puntos: 280 | |
| Re: Ajustar divs a varios diseños diferentes
¡Qué tonto soy! Mucho más simple y que funciona en IE y FF.
La cabecera:
Código:
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Modelos</title>
<style type="text/css">
html { padding: 0pt;
width: 100%;
height: 100%;
}
body { margin: auto;
padding: 0pt;
width: 100%;
height: 100%;
}
#all { border: 1px solid rgb(200, 235, 244);
margin: 0pt auto;
width: 760px;
position: relative;
display: block;
min-height: 608px;
height: auto ! important;
}
#cont_cabecera { height: 85px;
text-align: center;
position: relative;
background-color: rgb(153, 153, 153);
}
#cont_lat_izq { width: 100px;
float: left;
position: relative;
height: auto;
min-height: 500px;
margin-left: -100px;
}
#cont_lat_der { width: 100px;
float: right;
position: relative;
min-height: 500px;
height: auto;
margin-right: -100px;
}
#cont_contenido { position: relative;float: left;
height: auto ! important;
min-height: 503px;
height: 506px;
}
#pie_div { width: 100%;
position: absolute;
color: rgb(255, 255, 255);
bottom: 0px;
text-align: center;
background-color: rgb(17, 17, 17);
height: 20px;
clear: both;
}
.clear { clear: both;
}
#centro { border-left: 100px solid rgb(102, 102, 102);
border-right: 100px solid rgb(102, 102, 102);
height: auto ! important;
width: 560px;
min-height: 503px;
position: relative;
height: 506px;
}
</style>
</head>
Y los html:
Modelo 1
Código:
<body>
<div id="all">
<div id="cont_cabecera">Esto es la cabecera</div>
<div id="centro">
<div id="cont_lat_der">La barra lateral derecha</div>
<div id="cont_lat_izq">La barra lateral izquierda</div>
<div id="cont_contenido">El contenido<br />
</div>
<div class="clear">
</div>
</div>
<div id="pie_div">Esto es el pie</div>
<div class="clear"><br />
</div>
</div>
</body>
Modelo 2
Código:
<body>
<div id="all">
<div id="centro">
<div id="cont_lat_der">La barra lateral derecha</div>
<div id="cont_lat_izq">La barra lateral izquierda</div>
<div id="cont_cabecera">Esto es la cabecera</div>
<div id="cont_contenido">El contenido<br />
</div>
<div class="clear">
</div>
</div>
<div id="pie_div">Esto es el pie</div>
<div class="clear"><br />
</div>
</div>
</body>
Modelo 3
Código:
<body>
<div id="all">
<div id="centro">
<div id="cont_lat_der">La barra lateral derecha</div>
<div id="cont_lat_izq">La barra lateral izquierda</div>
<div id="cont_cabecera">Esto es la cabecera</div>
<div id="cont_contenido">El contenido<br />
</div>
<div class="clear"><br />
<div id="pie_div">Esto es el pie</div>
</div>
</div>
<div class="clear">
</div>
</div>
</body>
Modelo 4 (sin laterales)
Código:
<body>
<div id="all">
<div id="cont_cabecera">Esto es la cabecera</div>
<div id="cont_contenido">El contenido<br />
</div>
<div class="clear">
</div>
<div id="pie_div">Esto es el pie</div>
<div class="clear"><br />
</div>
</div>
</body>
Etcétera. Siempre con la misma cabecera (misma css), adaptable al tamaño del bloque central de contenido y bastante limpio.
Mikel. |