El diseño es fácil con CSS. Si está acostumbrado a utilizar el diseño de tablas, al principio le resultará difícil. No es difícil, simplemente tiene diferentes motivaciones y tiene más sentido en la práctica.

Puede tratar cada sección de esta página como una sección separada, sin importar qué sección elija. Puede reemplazar este bloque con ese bloque de manera absoluta o relativa.

Los valores estáticos son los valores predeterminados para los elementos, que se generan en el orden normal en que aparecen en HTML.

relativo es como estático, pero puede usar las propiedades superior, derecha, inferior e izquierda para compensar la posición original.

Absolute separa el elemento del flujo normal de HTML y lo envía a un mundo de posicionamiento completamente propio. En este mundo un poco loco, este elemento absoluto se puede colocar en cualquier lugar siempre que se establezcan los valores superior, derecho, inferior e izquierdo.

Fijo también se comporta como absoluto, pero coloca elementos absolutos en relación con la ventana del navegador en relación con la página, por lo que, en teoría, los elementos fijos permanecen completamente en la ventana gráfica del navegador cuando la página se desplaza. ¿Por qué teóricamente? Al menos, funciona bien en Mozilla y Opera, pero no en IE.

Puede utilizar el posicionamiento absoluto para crear un diseño tradicional de dos columnas utilizando reglas similares a las siguientes en HTML:

Ra ra banjo banjo

Bienvenido a Ra ra página de banjo banjo. Ra ra banjo banjo.

(Ra ra banjo banjo)

A la izquierda se encuentra una barra de navegación con una longitud de 10 em. Debido a que la navegación está absolutamente posicionada, no tendrá ningún impacto en el flujo del resto de la página, por lo que todo lo que necesita hacer es establecer el ancho del borde izquierdo del área de contenido para que sea el mismo que el ancho de la navegación. bar.

¡Es tan fácil! Sin embargo, este enfoque de dos columnas no lo limita. Con el posicionamiento inteligente, puedes diseñar tantos bloques como necesites. Por ejemplo, si necesita agregar una tercera columna, puede agregar un bloque "navigation2" al HTML y aplicar el siguiente CSS:

El único efecto secundario de posicionar elementos de manera absoluta es que, debido a que viven en su propio mundo, no hay forma de decidir exactamente dónde terminan. Si usa el ejemplo anterior en un área con menos navegación y más contenido, no hay problema, pero, especialmente cuando usa valores relativos para la longitud y el ancho, a menudo tiene que perder la esperanza de poner algo como notas a pie de página debajo. Si realmente quieres hacerlo, en lugar de posicionarlos absolutamente, hazlos flotar.

Flotar moverá un elemento a la izquierda o derecha de la misma línea, mientras que el contenido circundante flotará.

La función flotante se utiliza a menudo para colocar elementos pequeños dentro de una página (en el CSS predeterminado original de este sitio, el enlace "página siguiente" de la Guía básica de HTML y la Guía básica de CSS flota hacia la derecha. Consulte también: primero en pseudoelementos ejemplo de letra), pero también se puede utilizar en bloques más grandes, como columnas de navegación.

Si no desea que el siguiente elemento se ajuste alrededor del objeto flotante, puede usar la propiedad clara. clear: left borrará el elemento izquierdo, clear: right borrará el elemento derecho y clear: ambos borrarán los elementos izquierdo y derecho. Entonces, por ejemplo, necesita un pie de página, puede agregar un bloque al HTML con el ID "pie de página" y luego usar el siguiente CSS:

Bueno, lo tienes. Aparece una nota al pie debajo de todas las columnas, sin importar la longitud de cada columna.

hemos cubierto el posicionamiento y la flotación en general, con énfasis en los bloques "grandes" de la página, pero tenga en cuenta que estos métodos también se pueden usar en cualquier elemento dentro de esos bloques. Combinando posicionamiento, flotación, bordes, relleno y bordes, puede reproducir cualquier diseño. En términos de diseño, no hay nada que las tablas puedan hacer sin CSS.

La única razón para utilizar un diseño de tabla es si intenta adaptarse a navegadores antiguos. Aquí es donde CSS realmente muestra su avance: las páginas de alta usabilidad son una fracción del tamaño de archivo de las páginas basadas en tablas.

Diseño de página del tutorial avanzado de CSS

Ra ra banjo banjo