Foros del Web » Creando para Internet » CSS »

Caja CSS

Estas en el tema de Caja CSS en el foro de CSS en Foros del Web. Hola, quiero hacer una caja como la siguiente imagen: He intentado hacer la estructura css pero no consigo que cada parte se queda bien y ...
  #1 (permalink)  
Antiguo 17/05/2007, 16:23
Avatar de shakaran  
Fecha de Ingreso: agosto-2005
Ubicación: España - Ciudad Real
Mensajes: 374
Antigüedad: 12 años, 4 meses
Puntos: 7
Caja CSS

Hola, quiero hacer una caja como la siguiente imagen:



He intentado hacer la estructura css pero no consigo que cada parte se queda bien y sobre todo que los laterales se redimensionen.

La estructura seria asi:
Código:
<div id="caja">
	<div id="encabezado">
		<div id="superior_izquierda">SI</div>
		<div id="superior_central">SC</div>
		<div id="superior_derecha">SD</div>
	</div>
	<div id="contenido">
		<div id="lateral_izquierda">LI</div>
		<div id="texto">T</div>
		<div id="lateral_derecha">LD</div>
	</div>
	<div id="pie">
		<div id="inferior_izquierda"><II/div>
		<div id="inferior_central">IC</div>
		<div id="inferior_derecha">ID</div>
	</div>
</div>
Como puedo hacerlo?

Gracias
__________________
Quijost Backend Engineer - www.quijost.com - Hosting rápido, eficiente y profesional
Blog: www.shakaran.net
  #2 (permalink)  
Antiguo 18/05/2007, 15:47
 
Fecha de Ingreso: abril-2007
Mensajes: 232
Antigüedad: 10 años, 7 meses
Puntos: 2
Re: Caja CSS

Hola:
eso lo han llamado en inglés el Holygrail, la búsqueda de un método en css de poder hacer lo que tu pides sin problemas en los diferentes navegadores:

Three columns. One fixed-width sidebar for your navigation, another for, say, your Google Ads or your Flickr photos—and, as in a fancy truffle, a liquid center for the real substance. Its wide applicability in this golden age of blogging, along with its considerable difficulty, is what has earned the layout the title of Holy Grail.

http://alistapart.com/articles/holygrail

Suerte, Jorge H.
  #3 (permalink)  
Antiguo 18/05/2007, 16:18
Avatar de shakaran  
Fecha de Ingreso: agosto-2005
Ubicación: España - Ciudad Real
Mensajes: 374
Antigüedad: 12 años, 4 meses
Puntos: 7
Re: Caja CSS

Le he estado un vistazo a los "holy grail" y se parece a lo que quiero pero no funciona. Y me explico.

En los holy grail si un lateral o la parte del centro (contenido) es mas grande que las otras, se agranda. Es justo eso lo que no necesito. Es decir si el contenido se agranda los laterales deben medir el mismo "height" y eso es lo que no cumplen o al menos no he visto que ahi lo expliquen.

En realidad el problema es solo eso. Que los laterales deben medir siempre la maxima altura que el contenido tenga.

como puedo hacer eso?
__________________
Quijost Backend Engineer - www.quijost.com - Hosting rápido, eficiente y profesional
Blog: www.shakaran.net
  #4 (permalink)  
Antiguo 18/05/2007, 18:09
Avatar de soorellana  
Fecha de Ingreso: mayo-2007
Mensajes: 9
Antigüedad: 10 años, 6 meses
Puntos: 0
Re: Caja CSS

Si no entiendo mal, quieres que el alto de tus capas sean iguales. Lo que me ha funcionado a mí es utilizar el siguiente código de JQuery.

Código:
<script type="text/javascript" src="js/jquery-latest.pack.js"></script>	
	<script type="text/javascript">
    $(document).ready(function(){
        if ($("div#column").height() > $("div#contenido").height()) {
            $("div#contenido").height($("div#column").height())
        }else{
            $("div#column").height($("div#contenido").height())
        };		
    });
</script>
Básicamente lo que hace esto ver cuál de las dos capas es más alta y ajustar la otra para que tengan el mismo alto.
Si quieres más información de JQuery visita: jquery.com
  #5 (permalink)  
Antiguo 19/05/2007, 17:45
 
Fecha de Ingreso: abril-2007
Mensajes: 232
Antigüedad: 10 años, 7 meses
Puntos: 2
Re: Caja CSS

Hola:
lo que necesitas es esto:
http://alistapart.com/articles/fauxcolumns/
lo que sucede con los div es que si les pones un fondo este aparece hasta donde llegue el contenido en cada div. Con los faux columns lo que logra el autor es que el fondo (una imagen de pocos px de alta, con colores según el ancho de las columnas que quieres hacer) esté en un div externo que contiene los div (columnas) que quieres. De modo que ese div externo, con su fondo, crece todo lo que el div interno más grande lo haga y muestra el fondo que otro div interno por falta de contenido no genere, como si creciera igual. Suerte, Jorge H.
  #6 (permalink)  
Antiguo 19/05/2007, 18:53
Avatar de shakaran  
Fecha de Ingreso: agosto-2005
Ubicación: España - Ciudad Real
Mensajes: 374
Antigüedad: 12 años, 4 meses
Puntos: 7
Re: Caja CSS

Sorellana, tu solucion seria valida pero no eficiente, porque seria solo para una caja. El problema de aplicarlas a todas (y teniendo diferente id) seria muy costoso para el usuario, ya que ademas habria que ejecutar aun mas codigo de javascript. Personalemente no he indagado mucho sobre JQuery, pero utilizo las librerias de MooTools y practicamente existiria el mismo problema.

JHMorales, le he hechado un vistazo a los fauxcolumns y creo que solo serian validos para aplicarlos en el body, es decir, para estructuras de web con parte derecha e izquierda. No creo que se pueda generalizar a una estructura como la que planteo.

No se si tu puedas hacer algun ejemplo en este tipo de estructura, pero yo no le veo por donde meterle mano con los fauxcolums.

Un saludo
__________________
Quijost Backend Engineer - www.quijost.com - Hosting rápido, eficiente y profesional
Blog: www.shakaran.net
  #7 (permalink)  
Antiguo 20/05/2007, 04:52
 
Fecha de Ingreso: abril-2007
Mensajes: 232
Antigüedad: 10 años, 7 meses
Puntos: 2
Re: Caja CSS

Hola:
he visto que tu código en el primer post en realidad es la misma estructura de las faux columns, pero con 3 columnas y además esa estructura de 3 columnas en el header y el footer. Prueba a ver si te sale, al ser una imagen lo que se repite hacia abajo da a entender que lo que hay que mantener fijo es el ancho en todos los div. Suerte, Jorge H.
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 00:09.