Ajustar divs a varios diseños diferentes

xema · #1 (**permalink**) 20/12/2006, 06:36

Bueno a ver si consigo explicarme.
Quiero crear una plantilla para un diseño que puede tener diversas variantes.
y según que página sea cargar un css u otro.

Bueno el tema es que tengo un div global y dentro de este:
Cabecera
columna izquierda
contenido
columna derecha
pie

vale entonces el diseño (a parte de poder o no tener las columnas, que eso lo tengo hecho con php) puede variar en bastantes formas como por ejemplo:

cabecera 100%
lateral contenido lateral
pie 100%

otro:

lateral cabecera lateral
" contenido "
pie 100%

otro:

lateral cabecera lateral
" contenido "
" pie "

y con estas todas sus posibles variantes tanto con los 2 laterales, como con 1 lateral, como sin laterales.

Vale espero haberme explicado ahora al tema:

Como creéis que es mejor enfocarlo, ya que el contenido puede tener diversos tamaños también. ya que yo había utilizado algo en la teoría que se basa el proyecto camaleón es decir tengo todos los divs y los posiciono absolutamente con medidas, pero claro, el problema es que cuando el contenido tiene un alto muy grande, todo empieza ha descontrolarse. Luego e probado con otros sistemas más fluidos, pero tengo problemas de overflow, ya que el contenedor no me coje todo el contenido, o se super pone el div contenido al div pie, etc...

Vosotros que me recomendais???

yo os voy a poner el css de posiciones fijas, que claro no me sirve por el hecho de que como el contenido es muy variable... me interesaría algo similar pero más fluido y me e vuelto loco buscando soluciones pero no esto inspirado....

Código:

#all
{
	width:760px;  
	margin: 0 auto;
	position:relative;
	border: 1px solid #C8EBF4; /*colorPred10*/
        //AQUI PARA Q SE MUETRE BIEN TENGO QUE UTILIZAR UNA ALTURA FIJA
}
#cabec_div
{
        position: absolute;	
        width:760px;
	height:85px;
}
#lat_izq_div
{
	position: absolute;
	top: 140px;
	left: 0px;
	width: 100px;
}
#lat_der_div
{
	margin:0;
        position: absolute;
	top: 140px;
	width:100px;
	left:660px;
}
#contenido_div
{
    position: absolute;
    top: 140px;
    left:100px;
    width: 560px;
}
#pie_div
{
	width:760px;
	position:absolute;
	left: 0px;
	bottom: 1px; //ESTO LO ESTABA PROBANDO PARA VER SI ASÍ AL CAMBIAR LA ALTURA ESTO FUNCIONABA, PERO NO LO COLOCA DONDE DEBE
	text-align: center;
	border-top: #C8EBF4 1px solid; /*colorPred10*/	
}

Bueno si no entendeis algo, decirmelo e intentaré explicarme mejor

xema · #2 (**permalink**) 03/01/2007, 11:42

Bueno lo primero, feliz año a todos, después del parón vacacional, sigo con el tema que comentaba antes, a ver si alguien es capaz de dirigirme un poco.

porque sigo sin verlo claro. con posiciones relativas, los tamaños y alturas en % se me desconfiguran, ya que por ejemplo si le pongo al div del contenido un 100% de ancho ya no se me queda entre las columnas. si a las columnas les pongo un 100% de altura, se estiran hasta tamaños grandisimos, y además no funciona bien en IE. Pero claro sin % no creo que se pueda hacer de forma correcta mi idea. No le puedo dar tamaños y posiciones fijas nunca, ya que al cambiar los diseños no me servirían de nada. Empiezo a pensar que si no hago los 12 o 15 css especificando en todos sus tamaños y posiciones, no voy a lograr hacerlo, pero eso era lo que no quería, porque ahora son 12 pero en un futuro pueden ser mucho más y quería cambiar lo minimo de un css a otro (lo estaba preparando con un panel de control en php, y metiendole diversas variables).

a ver si con el año nuevo, encuentro a alguien que me pueda ayudar ;)

Mikmoro · #3 (**permalink**) 03/01/2007, 19:14

Edito para quitar el texto porque la siguiente solución es mejor que la puse aquí.
Mikel.

Mikmoro · #4 (**permalink**) 04/01/2007, 13:06

¡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.