Video: diseñando un sitio web - Html5 - Css3 | Servicio | parte#1 | Desde cero

diseños fluidos son fenomenales. Son muy flexibles, y no son difíciles de construir en HTML5 y CSS3. A veces, sin embargo, es bueno usar un diseño de ancho fijo, sobre todo si usted quiere que su diseño para conformar una imagen de fondo particular.

El atributo principal de un ancho fijo la disposición es el uso de una medición fijo (casi siempre píxeles), en lugar de las mediciones de porcentaje utilizado en un diseño de fluido.

Cómo configurar el código HTML

Como de costumbre, el código HTML es mínima. Contiene unos divs con nombre.

Fijo diseño de ancho
Columna izquierda
Columna derecha
Pie de página

Fijar la anchura con CSS

Después de que el HTML se ha configurado, puede utilizar CSS para hacer cumplir el esquema de dos columnas.

Aquí está el código CSS:

#header {background-color: # e2e393-border-bottom: sólido negro-text-align 3px: Centro-width: 800px; padding-top: 1 em -} # izquierda {float: left; ancho: 200px; clear: left; border-right: 1px solid negro-height: 30em-overflow: auto-padding-right: .5em -} # derecha {float: left; ancho: 570px; altura: 30em-overflow: auto-padding-left: .5em- #footer} {width: 800px; text-align: center-background-color: # e2e393-border-top: 3px doble-negro claro: ambos-}

Todo es bastante sencillo:

1. El color de cada elemento para ver lo que está pasando.

   Comience por dar a cada Div un color de fondo diferente para que pueda ver lo que está sucediendo.

2. Determinar la anchura total de la disposición.

   Escoja una anchura de destino para toda la disposición. 800 píxeles se ha elegido porque es un ancho razonablemente estándar.

3. Ajuste las anchuras de los elementos en toda la página.

   A menudo es más fácil comenzar con elementos como el encabezado y el pie que a menudo ocupan todo el ancho del diseño.

4. Flotar las columnas.

   Flotar cada columna a la izquierda.

5. Establecer los anchos de columna.

   Comience haciendo los anchos de columna se suman a la anchura de todo el diseño. Más tarde podrás ajustar un poco los márgenes y fronteras.

6. Desactive la columna de la izquierda.

   Video: Diseña un Sitio Completo con HTML5 y CSS3 Parte 1 - Etiquetado

   Asegúrese de que la columna de la izquierda tiene la claro: izquierda regla aplica.

7. alturas de la columna SET.

   Cada columna de la misma altura. Esto hace que las cosas se ven bien si se agrega bordes o colores de fondo para las columnas.

8. Ajuste de las fronteras y el relleno.

   Utilice las fronteras, el relleno y el margen para ajustar su página para conseguir el aspecto deseado.

9. Ajuste anchuras de nuevo.

   Agregar bordes, relleno, y el margen puede cambiar las anchuras de los elementos existentes. Después de modificar estos atributos, tome una mirada cuidadosa a su disposición para asegurarse de que no llegar en mal estado, y modificar los distintos anchos de ser necesario.