Foros del Web » Creando para Internet » CSS »

Ajustar divs a varios diseños diferentes

Estas en el tema de Ajustar divs a varios diseños diferentes en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/12/2006, 06:36
 
Fecha de Ingreso: febrero-2002
Ubicación: Valencia - España
Mensajes: 488
Antigüedad: 15 años, 10 meses
Puntos: 0
Exclamación Ajustar divs a varios diseños diferentes

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
__________________
webmaster de xematuning el mejor tuning español con más de 25000 fotos sobre el mundo del tuning, videos, salvapantallas, fondos y mucho más no lo dudes más y visítala!!!
  #2 (permalink)  
Antiguo 03/01/2007, 11:42
 
Fecha de Ingreso: febrero-2002
Ubicación: Valencia - España
Mensajes: 488
Antigüedad: 15 años, 10 meses
Puntos: 0
Re: Ajustar divs a varios diseños diferentes

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 ;)
__________________
webmaster de xematuning el mejor tuning español con más de 25000 fotos sobre el mundo del tuning, videos, salvapantallas, fondos y mucho más no lo dudes más y visítala!!!
  #3 (permalink)  
Antiguo 03/01/2007, 19:14
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Ajustar divs a varios diseños diferentes

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

Última edición por Mikmoro; 05/01/2007 a las 12:44
  #4 (permalink)  
Antiguo 04/01/2007, 13:06
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:04.