Foros del Web » Creando para Internet » CSS »

diseño con cabecera, tres columnas y pie.

Estas en el tema de diseño con cabecera, tres columnas y pie. en el foro de CSS en Foros del Web. Hola: Quiero hacer un diseño CSS similar al número 13 de esta página http://blog.html.it/layoutgala/ es decir, que la columna central se ensanche con el navegador ...
  #1 (permalink)  
Antiguo 04/02/2007, 05:07
Avatar de chuidiang
Colaborador
 
Fecha de Ingreso: octubre-2004
Mensajes: 3.770
Antigüedad: 13 años, 2 meses
Puntos: 453
diseño con cabecera, tres columnas y pie.

Hola:

Quiero hacer un diseño CSS similar al número 13 de esta página http://blog.html.it/layoutgala/ es decir, que la columna central se ensanche con el navegador y las dos columnas laterales de ancho fijo.

En esa página pone cómo hacerlo (pinchando en él y viendo el código fuente de la página), pero usan cosas "raras" que me chocan, como margin-left:-100% (negativo y del 100%)

Código:
...
div#navigation{float:left;width:200px;margin-left:-100%}
div#extra{float:left;width:200px;margin-left:-200px}
...
Además, aunque en Firefox no pasa, en Internet Explorer la columna izquierda se descoloca si hacemos el navegador muy estrecho.

¿No hay una forma más sencilla e intuitiva de hacerlo?.
__________________
Apuntes Java
Wiki de Programación
  #2 (permalink)  
Antiguo 04/02/2007, 06: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: diseño con cabecera, tres columnas y pie.

Sí, yo creo que hay maneras más sencillas. Esta es una de ellas:

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Layout 13</title>
  <meta http-equiv="content-type"
 content="text/html; charset=iso-8859-1">
  <meta name="generator" content="HAPedit 3.1">
  <style type="text/css">
html, body { margin: 0pt;
padding: 0pt;
}
body { font-family: arial,sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 76%;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
}
p { margin: 0pt 10px 10px;
}
a { padding: 10px;
display: block;
color: rgb(0, 0, 102);
}
div#header { position: relative;
}
div#header h1 { margin: 0pt;
background: rgb(238, 238, 238) none repeat scroll 0% 50%;
height: 80px;
line-height: 80px;
padding-left: 10px;
color: rgb(121, 179, 11);
}
div#header a { position: absolute;
right: 0pt;
top: 23px;
}
div#content p { line-height: 1.4;
}
div#footer { background: rgb(51, 51, 51);
color: rgb(255, 255, 255);
}
div#footer p { margin: 0pt;
padding: 5px 10px;
}
div#footer a { padding: 0pt;
display: inline;
color: rgb(198, 213, 253);
}
div#wrapper { float: left;
width: 100%;
}
div#content { margin: 0pt 200px;
}
div#navigation { position: absolute;
left: 0pt;
width: 200px;
background: rgb(185, 202, 255);
}
div#extra { width: 200px;
float: right;
background: rgb(255, 133, 57);
}
div#footer { clear: left;
width: 100%;
}
  </style>
  <script type="text/javascript" src="filler.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
<a href="http://blog.html.it/layoutgala/layout13.zip">download
this layout</a></div>
<div id="extra">
<p><strong>3) More stuff here.</strong> very text
make long column make filler fill make column column silly filler text
silly column fill silly fill column text filler make text silly filler
make filler very silly make text very very text make long filler very
make column make silly column fill silly column long make silly filler
column filler silly long long column fill silly column very </p>
</div>
<div id="navigation">
<p><strong>2) Navigation here.</strong> long long
fill filler very fill column column silly filler very filler fill fill
filler text fill very silly fill text filler silly silly filler fill
very make fill column text column very very column fill fill very silly
column silly silly fill fill long filler </p>
</div>
<div id="content">
<p><strong>1) Content here.</strong> column long long
column very long fill fill fill long text text column text silly very
make long very fill silly make make long make text fill very long text
column silly silly very column long very column filler fill long make
filler long silly very long silly silly silly long filler make column
filler make silly long long fill very.</p>
<p>very make make fill silly long long filler column long make
silly silly column filler fill fill very filler text fill filler column
make fill make text very make make very fill fill long make very filler
column very long very filler silly very make filler silly make make
column column </p>
<p>fill long make long text very make long fill column make text
very silly column filler silly text fill text filler filler filler make
make make make text filler fill column filler make silly make text text
fill make very filler column very </p>
<p>column text long column make silly long text filler silly very
very very long filler fill very fill silly very make make filler text
filler text make silly text text long fill fill make text fill long
text very silly long long filler filler fill silly long make column
make silly long column long make very </p>
</div>
<div id="footer">
<p>The footer. You can go to the <a
 href="http://blog.html.it/layoutgala/">index page</a>.</p>
</div>
</div>
<script type="text/javascript">AddFillerLink("content","navigation","extra")</script>
</body>
</html>
No es necesario poner la columna de la izquierda en posición absoluta, pero lo hago para que no se colapse al reducir la ventana, aunque a decir verdad, no creo que se vaya a reducir tanto como para que el texto central se reduzca a "nada".

Mikel.
  #3 (permalink)  
Antiguo 04/02/2007, 09:02
 
Fecha de Ingreso: enero-2007
Mensajes: 27
Antigüedad: 10 años, 10 meses
Puntos: 1
Re: diseño con cabecera, tres columnas y pie.

Hola chuidiang,

Si quieres, en la siguiente dirección, el ejemplo número 21 es muy parecido a lo que tu quieres hacer y es más simple: code-sucks.com/css layouts/css-3-column-layouts/index.php

Saludos
  #4 (permalink)  
Antiguo 04/02/2007, 09:02
Avatar de chuidiang
Colaborador
 
Fecha de Ingreso: octubre-2004
Mensajes: 3.770
Antigüedad: 13 años, 2 meses
Puntos: 453
Re: diseño con cabecera, tres columnas y pie.

Hola:

Mikmoro, desde luego es bastante más simple y me gusta el detalle de quitar el div id="wrapper" que no me hacía ninguna gracia.

Le he tenido que poner float:left a la columna izquierda porque si no, si se hace más larga que las demás, el pie queda montado sobre ella. Al pie le he puesto clear:both para evitar el mismo efecto con la columna derecha.

Syncime, gracias, pero pretendía que el diseño se estirara con el navegador, sin ser de ancho fijo. De todas formas apunto la página, me puede ser de utilidad ahora que ando metido en estos temas.

Muchas gracias a ambos y sed buenos.
__________________
Apuntes Java
Wiki de Programación
  #5 (permalink)  
Antiguo 04/02/2007, 10:09
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: diseño con cabecera, tres columnas y pie.

Cierto. Yo en principio le había puesto el float left (que es como yo lo haría), pero como habrás visto, si se reduce mucho la ventana se colapsa en IE y FF (saltan de sitio, etc.), y era algo que mencionabas en el primer mensaje por lo que parecía que no te gustara nada (para mi no tiene importancia).
Como decía, mucho hay que reducir la ventana para que se colapsen las columnas, vamos, de hecho, hay que reducirla de forma poco natural.

No me he puesto a analizar del todo el código de la página del ejemplo por eso no tengo ni idea de por qué usaba márgenes negativos y eso.

Me alegro de que te sirva.

Mikel.
  #6 (permalink)  
Antiguo 04/02/2007, 22:51
Avatar de chuidiang
Colaborador
 
Fecha de Ingreso: octubre-2004
Mensajes: 3.770
Antigüedad: 13 años, 2 meses
Puntos: 453
Re: diseño con cabecera, tres columnas y pie.

Hola:

Ya sólo por curiosidad. ¿cómo se supone que funciona un margin-left:-100%?. He estado haciendo pruebas con algo más simple (un par de <div>), variando también el valor del porcentaje negativo y no he llegado a ninguna conclusión. En ocasiones el -100% simplemente hace desaparecer el bloque (supongo que va muy a la izquierda) y en otras se "mueve" hacia arriba.

Sed buenos.
__________________
Apuntes Java
Wiki de Programación
  #7 (permalink)  
Antiguo 05/02/2007, 04:22
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: diseño con cabecera, tres columnas y pie.

Efectivamente lo hace desaparecer por la izquierda. ¿Para qué se ha usado en el ejemplo de la plantillas que pusiste?:

div#wrapper{float:left;width:100%}
div#content{margin: 0 200px}
div#navigation{float:left;width:200px;margin-left:-100%}
div#extra{float:left;width:200px;margin-left:-200px}

<div id="wrapper">
<div id="content">
</div>
</div>
<div id="navigation">
</div>
<div id="extra">
</div>

Pues si te fijas, lo que hace es en primer lugar posicionar la caja del centro (content), dentro de wrapper, que tiene un ancho del 100%. Como todas las cajas están con float left, al colocar la segunda caja (la de la izquierda, navigation), si no le diera margen desaparecería por la derecha de la pantalla, de manera que con un margen izquierdo del 100% aparece situada a la izquierda, donde quiere que aparezca.

Después coloca la de la derecha (extra) y de la misma manera desaparecería por la derecha porque no tiene sitio, entonces le da un margen izquierdo de 200px (igual al tamaño de esa caja), y así se situa a la derecha.

Esto estoy seguro de que lo ha hecho así por accesibilidad, para que el texto aparezca en el flujo del documento en orden y si alguien viera la página con un navegador de texto o con css desactivado (o una hoja de estilo auditiva), el texto aparecería en el orden de lectura correcto (correcto en su caso, porque ha numerado cada bloque diferente con 1, 2 y 3, que no tendría por qué ser así obligatoriamente).

Cuando se pone una caja con float right, se debe poner antes que las que van a la izquierda (como en mi ejemplo), por eso se rompe el orden real de lectura (el suyo).

Espero haberte aclarado algo.

Mikel.
  #8 (permalink)  
Antiguo 05/02/2007, 09:43
Avatar de chuidiang
Colaborador
 
Fecha de Ingreso: octubre-2004
Mensajes: 3.770
Antigüedad: 13 años, 2 meses
Puntos: 453
Re: diseño con cabecera, tres columnas y pie.

Aclarado, gracias.

Entiendo que el orden correcto "por accesibilidad, para que el texto aparezca en el flujo del documento en orden" es que en el html primero debe ir el contenido real y luego los navigation y extras.

Se bueno.
__________________
Apuntes Java
Wiki de Programación
  #9 (permalink)  
Antiguo 05/02/2007, 11:40
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: diseño con cabecera, tres columnas y pie.

Bueno, hay libros que llevan el índice delante, otros detrás, etcétera. Yo tiendo a considerar el menú de navegación como un "índice de contenidos", permitiéndome ir directamente al capítulo o página que me interese.

Particularmente prefiero los libros que llevan primero el índice, así que el flujo del documento que a mi me gusta si veo una web con un navegador de texto (como Lynx) es ver primero el menú de navegación, luego el cuerpo del texto, los extras (vínculos, etc.) y el pie.

Para gustos están los colores.

Mikel.
  #10 (permalink)  
Antiguo 06/02/2007, 12:37
Avatar de chuidiang
Colaborador
 
Fecha de Ingreso: octubre-2004
Mensajes: 3.770
Antigüedad: 13 años, 2 meses
Puntos: 453
Re: diseño con cabecera, tres columnas y pie.

Hola de nuevo:

Sigo dándole vueltas al asunto. He cogido el diseño mencionado y le he quitado todo lo que sobra, excepto el posicionamiento, para jugar con él. Está en http://www.chuidiang.com/css/ejemplo...nas_float.html

El problema que se me presenta ahora es que si en la línea que pone

Código:
<div style="float:left; width:100%;>
que supuestamente es del contenedor, le añado un borde así

Código:
<div style="float:left; width:100%; border:1px solid black;">
en firefox me descoloca la columna derecha, la verde. En Internet explorer no, aunque entiendo que lo de firefox se supone que es lo correcto.

¿Qué tiene que ver este borde con la situación de la columna derecha? ¿Qué es lo que se interpreta de forma distinta?

Sed buenos.
__________________
Apuntes Java
Wiki de Programación
  #11 (permalink)  
Antiguo 06/02/2007, 12:59
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: diseño con cabecera, tres columnas y pie.

Buenas.
Lo que yo creo que ocurre es que según la W3C, la forma correcta de calcular el tamaño de una caja es el contenido+el padding+el borde, es decir, que una caja que mide el 100% y tiene un borde de 1px, en realidad mide 100% + 2px.

¿Qué significa esto? Que como tienes una caja colocada a la derecha, pero como ya comentamos, con un float left y un margen negativo igual a su tamaño (100px), al deplazarla 100px a la izquierda no está en su sitio adecuado y sencillamente no cabe.

<div style="float:left; width:100px; margin-left:-100px; background:green;">columna derecha</div>

Si pruebas a cambiar el margen negativo real para encontrar su sitio, es decir, 102px (sus 100px + los 2px del borde de la caja central), comprobarás lo que te digo (creo )

Ah, ¿y por qué IE lo hace supuestamente bien? Por que entre sus errores está considerar el tamaño de una caja como todo el conjunto, es decir, una caja con un contenido de 100px con un borde de 1px más un padding de 2px, en realidad para él mide 100px, sólo que el contenido ahora tiene 94px.

Mikel.
  #12 (permalink)  
Antiguo 06/02/2007, 13:45
Avatar de chuidiang
Colaborador
 
Fecha de Ingreso: octubre-2004
Mensajes: 3.770
Antigüedad: 13 años, 2 meses
Puntos: 453
Re: diseño con cabecera, tres columnas y pie.

Hola:

Tienes razón y creo ver por donde van los tiros, aunque no creas que lo tengo muy claro.

La columna izquierda (roja) tiene dos líneas de texto y es más alta que el contenido. Si a la columna derecha le quito el margin-left:-100px y tampoco pongo el borde del contendor, la columna derecha sale debajo del contenido y pegada al lado derecho de la columna izquierda (jo que lio). http://www.chuidiang.com/css/ejemplo...s_float_2.html

Si ahora le doy margen -99px, sale a la misma altura, con un pixel faltante para llegar al borde izquierdo del navegador y tapando parte de la columna roja. Eso parece lógico.

Si ahora le doy margen -100px, se va a su sitio, al lado derecho del navegador y a una altura mayor (justo debajo de la cabecera). ¿No debería quedarse a la misma altura y desplazarse unicamente ese pixel que le falta, tapando parte de la columna roja? ¿Por qué ese salto tan brusco?. Si me fio de la posición inicial, debería dar un margen de -200px para llegar al sitio deseado.

Voy a seguir jugando un poco a ver si me aclaro.

Gracias y se bueno.
__________________
Apuntes Java
Wiki de Programación
  #13 (permalink)  
Antiguo 06/02/2007, 16:22
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: diseño con cabecera, tres columnas y pie.

Cita:
Iniciado por chuidiang Ver Mensaje
Hola:

Tienes razón y creo ver por donde van los tiros, aunque no creas que lo tengo muy claro.

La columna izquierda (roja) tiene dos líneas de texto y es más alta que el contenido. Si a la columna derecha le quito el margin-left:-100px y tampoco pongo el borde del contendor, la columna derecha sale debajo del contenido y pegada al lado derecho de la columna izquierda (jo que lio).
Antes he estado a punto de decírtelo pero al final no lo he hecho: no sé si te habías dado cuenta, pero en realidad el contenedor principal que antes citabas, no se agranda como para acoger a los dos laterales y el central; mide de alto la mitad de las columnas laterales. Pon esto y lo verás enseguida:

<div style="border: 1px solid yellow; float: left; width: 100%;">

Si no le das margen negativo a la caja de la derecha, al estar flotada a la izquierda, inevitablemente saltará a la siguiente línea porque no cabe. ¿Y a dónde va? Al siguiente espacio disponible en vertical, es decir, a donde acaba el contenedor central. Así que este comportamiento es bastante lógico.

Cita:
Si ahora le doy margen -99px, sale a la misma altura, con un pixel faltante para llegar al borde izquierdo del navegador y tapando parte de la columna roja. Eso parece lógico.
Lo mismo de antes. Al estar la roja (izquierda) flotada y poner a la de la derecha ese margen negativo, el siguiente espacio disponible en el flujo del documento es el que está ocupando, es decir, el de antes pero con un margen negativo de 99px.

Cita:
Si ahora le doy margen -100px, se va a su sitio, al lado derecho del navegador y a una altura mayor (justo debajo de la cabecera). ¿No debería quedarse a la misma altura y desplazarse unicamente ese pixel que le falta, tapando parte de la columna roja? ¿Por qué ese salto tan brusco?.
Por lo que he dicho: al poner -100px de margen izquierdo (su tamaño), ya tiene sitio en la primera línea, y por eso se va a su sitio, el lado derecho. Todo lo que sea menos de su tamaño como margen negativo le obliga a saltar porque no cabe en la primera línea horizontal.
Hasta ahora todo es correcto, según lo que se espera que hagan.

A mi esto también me resulta muy divertido. Igual nos tienen que abrir un hilo para nuestras "dudas existenciales con CSS"

Mikel.
  #14 (permalink)  
Antiguo 07/02/2007, 02:25
Avatar de chuidiang
Colaborador
 
Fecha de Ingreso: octubre-2004
Mensajes: 3.770
Antigüedad: 13 años, 2 meses
Puntos: 453
Re: diseño con cabecera, tres columnas y pie.

Hola:

Creo que no sé si estoy seguro de entenderlo. Tengo que hacer alguna prueba más simple, por ejemplo tres float:left pequeños que quepan en pantalla. El segundo separado del primero con un margin-left:positivo lo suficiente como para que quepa el tercero y como para que no quepa el tercero. Luego ir moviendo con margin-left:negativo el tercero poco a poco en ambos casos, para ver cuándo "da el salto". Además, habrá que añadir un "contenedor" con y sin borde en ese caso. Esta tarde, cuando llegue a casa...

De todas formas, creo que este tipo de detalles, con los conocimientos que tengo de CSS (pocos, llevo cuatro días mal contados), no puedo preverlos y será cuestión de ensayo y error.

Mi siguiente experimento, ya sabes, sólo para jugar y aprender, no por necesidad, será hacer un menú como el de esta página http://www.htmldog.com/articles/suckerfish/example/ (creo que es sólo CSS para firefox, IE como siempre necesita ñapas en javascript). Ya me verás por aquí nuevamente (amenzo).

Muchísimas gracias y se bueno.
__________________
Apuntes Java
Wiki de Programación
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 09:18.