Foros del Web - Ver Mensaje Individual

Mikmoro · #23 (**permalink**) 13/01/2009, 18:41

Siempre hay varias maneras de hacer las cosas. Esta que muestro (que como no la he encontrado la he tenido que volver a hacer, claro

), tiene todas las cajas excepto la central del contenido de ancho fijo, y a cabecera, pie y subpie de alto fijo para que no se deformen.

http://www.araudi.net/layout-subpie.html

Luego ya a la hora de convertir esto a un caso real habría que ver como retocar todo para ajustarlo con precisión al contenido, pero en principio todo va bien. Y necesitaría un retoque para el ancho mínimo en IE6, claro, que no sabe de min-width.

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Subpie</title>
<style type="text/css">
* {padding:0; margin:0;}
html, body {height:100%;
font-family: verdana, arial, sans-serif;
font-size: 0.9em;
}
body {background-color: #3cf;}
#contenedor {min-height:100%;
height: auto!important;
height:100%;
border-left: solid 200px #090;
border-right: solid 200px #090;
min-width: 150px;
position: relative;
}
#cabecera {height: 4em;
font-size: 1.4em;
background-color: #399;
color: #fff;
text-align: center;
margin-left: -200px;
margin-right: -200px;
position: relative;
}
#col_izq {position: relative;
margin-left: -190px;
float: left;
width: 190px;
}
#col_der {position: relative;
margin-right: -200px;
float: right;
width: 190px;
}
#contenido {padding: 0 1em;}
#pie, #subpie {text-align: center;
color: #fff;
height: 3em;
}
#subpie {background-color: #f30;
width: 100%;
position: absolute;
bottom: 3em;
left: 0;
}
#pie {background-color: #366;
margin-top: -3em;
position: relative;
}
.ejemplo {position:relative; top: 0.5em;
font-size: 1em;
}
.corte {clear: both;padding-top: 4em;}
</style>
</head>
<body>
<div id="contenedor">
<div id="cabecera">
<span class="ejemplo">Cabecera</span>
</div>
<div id="col_izq">
<span class="ejemplo">Columna Izda.</span>
</div>
<div id="col_der">
<span class="ejemplo">Columna Dcha.</span>
</div>
<div id="contenido">
<span class="ejemplo">Contenido</span>
</div>
<div id="subpie">
<span class="ejemplo">Sub pie</span>
</div>
<div class="corte"></div>
</div>
<div id="pie">
<span class="ejemplo">Pie</span>
</div>
</body>
</html>