layout - significado - ¿La mejor forma de implementar un sitio web de 3 columnas con las etiquetas<DIV>?

div style background color (9)

En primer lugar, el posicionamiento relativo hace lo que ha descrito: reserva espacio en la ubicación original pero muestra el desplazamiento DIV en cierta cantidad.

Si flotas los DIV, se apilarán de izquierda a derecha, pero esto puede causar problemas.

Un diseño de tres columnas con CSS es bastante difícil. Eche un vistazo a [ http://www.glish.com/css/7.asp]

Estoy desarrollando un sitio web de 3 columnas usando un diseño como este:

<div id=''left'' style=''left: 0; width: 150px; ''> ... </div> <div id=''middle'' style=''left: 150px; right: 200px'' > ... </div> <div id=''right'' style=''right: 0; width: 200px; ''> ... </div>

Pero, teniendo en cuenta que la propiedad de ''posición'' predeterminada de CSS de <DIV>''s es ''estática'', mis <DIV>''s se mostraron una debajo de la otra, como se esperaba.

Así que establecí la propiedad CSS ''position'' en ''relative'', y cambié la propiedad ''top'' de ''middle'' y ''right'' <DIV>''s a - (menos) el alto de la anterior <DIV> . Funcionó bien, pero este enfoque me trajo dos problemas:

1) Aunque Internet Explorer 7 muestra tres columnas correctamente, aún conserva la barra de desplazamiento vertical como si los <DIV>''s estuvieran colocados uno debajo del otro, y hay una gran cantidad de espacio en blanco una vez que el contenido ha terminado. Me gustaría tener eso.

2) La altura de estos elementos es variable, por lo que realmente no sé qué valor establecer para cada propiedad de <DIV> ''s'' top ''; y no me gustaría codificarlo.

Entonces mi pregunta es, ¿cuál sería la mejor (simple + elegante) forma de implementar este diseño? Me gustaría evitar el posicionamiento absoluto y también mantener mi diseño sin tablas.

Intenta flotar los div a la izquierda, eso los mantendrá a todos en la misma línea, suponiendo que hay suficiente espacio.

Si aún no ha revisado A List Apart , debería hacerlo, ya que contiene algunos excelentes tutoriales y pautas para el diseño de sitios web.

Este artículo en particular debería ayudarte.

Hay una serie de ejemplos y bibliotecas en las que puede buscar: una pareja ya incluida (A List Apart es una lectura obligada).

He usado la Biblioteca de interfaz de usuario de Yahoo (YUI) en mis últimos sitios y me gusta mucho. Yahoo lo admite completamente y es rápido de entender y usar. Aquí está CSS for Grids , que le permite formatear su página en tantas columnas y secciones como desee.

YUI es agradable porque no tiene que reinventar la rueda para la base de su sitio, y hacen todo el trabajo para asegurarse de que sus bases funcionen en todos los navegadores. Y lo mejor de todo, es gratis.

Por mucho, la manera más fácil que he encontrado para hacer 3 columnas (o cualquier otra cantidad de columnas divididas en el espacio disponible de maneras extrañas) es YUI Grids . Hay un generador de grillas YUI para darle el diseño básico. Lo siguiente le dará un diseño básico de 3 columnas de 750px de ancho (dividir 1/3 1/3 1/3) con una barra lateral izquierda de 160px. Cambiarlo a otros anchos, configuraciones de barra lateral y divisiones de columna es realmente fácil.

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 <html> 4 <head> 5 <title>YUI Base Page</title> 6 <link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css"> 7 </head> 8 <body> 9 <div id="doc" class="yui-t1"> 10 <div id="hd"><h1>YUI: CSS Grid Builder</h1></div> 11 <div id="bd"> 12 <div id="yui-main"> 13 <div class="yui-b"> <div class="yui-gb"> 14 <div class="yui-u first"> 15  16 </div> 17 <div class="yui-u"> 18  19 </div> 20 <div class="yui-u"> 21  22 </div> 23 </div> 24 </div> 25 </div> 26 <div class="yui-b"></div> 27 28 </div> 29 <div id="ft">Footer is here.</div> 30 </div> 31 </body> 32 </html>

Me gusta el 960 Grid System . Es un css liviano y fácil de usar que proporciona la pantalla en 12 (o 16) columnas. Puede usarlo para un diseño de 3 columnas y alinear el resto de su contenido en consecuencia.

Prueba BluePrint CSS . Es realmente simple de empezar, pero lo suficientemente potente para la mayoría de las aplicaciones.

Tutoriales y ejemplos fáciles de entender. Tiene una biblioteca de tipografía que produce resultados decentes recién salidos de la caja.

Para coloumn fijo, solo establece altura: xxxpx los hará iguales.

Use este generador de diseño de 3 columnas para probar.

Este código funciona en mi computadora con IE 8, Chrome, Firefox.

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN"> <html> <head> <title> Test </title> </head> <body> <div id="grad2" style="width:15%; height:100%; position:fixed; top:0px; left:0px; background-color:rgb(147,81,73);"> <a href="http://abv.bg"> Column1 </a> </div> <div id="grad4" style="width:70%; height:100%; position:fixed; top:0px; left:15%; background-color:rgb(0,0,0);"> <font color="#FFFFFF">Column 2 </font> </div> <div id="grad3" style="width:100%; height:100%; position:fixed; top:0px; left:85%; background-color:rgb(60,255,4);"> <a href="http://abv.bg"> Column 3 </a> </div> </body> </html>