¿Cómo construir un ancho fijo diseño flotante para HTML5 y CSS3 programación

categoría Computadoras y software / Programación / Html

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 una anchura fija diseño 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.

imagen0.jpg

Cómo configurar el código HTML

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

fixedWidth.html
Ancho fijo Layout
Columna de la izquierda
Columna derecha
Pie de página

Fijar el ancho 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: 3px sólido negro-text-align: center-width: 800px; padding-top: 1 em -} # izquierda {float: left; ancho: 200px; claro: izquierda; 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: Centro-background-color: # e2e393-border-top: 3px doble negro-claro: ambos-}

Todo es bastante sencillo:

  1. Colorea cada elemento para ver lo que está sucediendo.

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

  2. Determinar el ancho total de la disposición.

    Escoja una anchura objetivo para todo el trazado. 800 píxeles se ha elegido porque es un ancho bastante estándar.

  3. Ajuste las anchuras de los elementos de la página-ancho.

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

  4. Flotador las columnas.

    Flotador cada columna a la izquierda.

  5. Ajuste 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.

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

  7. Establecer alturas de columna.

    Dé a cada columna de la misma altura. Esto hace que las cosas se ven bien si añades las fronteras o los colores de fondo de 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 se puede cambiar el ancho de los elementos existentes. Después de que ha modificado estos atributos, tomar una mirada cuidadosa a su disposición para asegurarse de que no consiguió en mal estado, y modificar los distintos anchos de ser necesario.



Artículos Relacionados

Sobre el autor
¿Cómo construir un diseño de centrales fijos ancho flotante para HTML5 y CSS3 programación ¿Cómo construir un diseño de centrales fijos ancho flotante para HTML5 y CSS3 programación

Diseños de ancho fijo son comunes, pero tienen un aspecto un poco extraño si el navegador no es el ancho especificado en el CSS3. Si el navegador es demasiado estrecho, el diseño no va a funcionar, y la segunda columna (por lo general) bajar a la…

¿Cómo construir un diseño html5 y css3 página con posicionamiento absoluto ¿Cómo construir un diseño html5 y css3 página con posicionamiento absoluto

Usted puede utilizar el posicionamiento absoluto para crear anHTML5 y CSS3 diseño de página. Este proceso consiste en unas concesiones. Usted tiende a conseguir un mejor control de su página con posicionamiento absoluto (en comparación con las…

Cómo crear listas horizontales para HTML5 y CSS3 programación Cómo crear listas horizontales para HTML5 y CSS3 programación

A veces, usted quiere barras de botones horizontales. Porque las listas HTML5 tienden a ser vertical, que podría estar tentado a pensar que una lista horizontal es imposible. De hecho, CSS3 ofrece todo lo que necesita para convertir exactamente el…

Cómo crear estilos de página para su html5 y css3 sitio plantilla Cómo crear estilos de página para su html5 y css3 sitio plantilla

Con un marco HTML en su sitio, usted puede empezar a trabajar en la CSS para crear estilos de página en su sitio. La mejor manera de incorporar CSS3 es siguiendo estos pasos:Comience con el diagrama de plantilla de página.Se debe tener toda la…

Cómo flotar un párrafo para HTML5 y CSS3 programación Cómo flotar un párrafo para HTML5 y CSS3 programación

Los párrafos y otros elementos en bloque tienen un comportamiento por defecto bien definido en CSS3. Ellos toman todo el ancho de la página, y el siguiente elemento aparece a continuación. Cuando se aplica el elemento a un párrafo, el…

Cómo utilizar el atributo clear para controlar el diseño de página para HTML5 y CSS3 programación Cómo utilizar el atributo clear para controlar el diseño de página para HTML5 y CSS3 programación

Debe haber alguna manera de hacer el derecho de trabajo forma, independientemente del ancho del contenedor. CSSS3 proporciona exactamente ese mecanismo que es fácil trabajar con ellos en el diseño de sus páginas HTML5.los claro atributo se…

Atributos css seleccionados Atributos css seleccionados

Esta tabla muestra los atributos CSS más utilizados. Cada uno de estos atributos se pueden aplicar a cualquier elemento contenedor en una página. El recipiente puede ser un único elemento denotado por el atributo ID, un miembro de una clase, o…

La conversión de nombres de propiedades CSS para javascript La conversión de nombres de propiedades CSS para javascript

Puede convertir nombres de las propiedades CSS para javascript. Sin embargo, hay algunas cosas que usted debe recordar si usted planea en hacer esto. Al cambiar de estilos con javascript, hay un par de reglas simples:Si la propiedad CSS es…

Box y fronterizas propiedades de las hojas de estilo en cascada (CSS) Box y fronterizas propiedades de las hojas de estilo en cascada (CSS)

Con las propiedades del cuadro, puede colocar objetos labrados en cualquier parte de una ventana del navegador, la posición de los objetos en relación con los demás objetos de la página, y aplicar las reglas de relleno y estilo de cuadro margen…

Cómo aplicar el efecto de la frontera de radio css3 Cómo aplicar el efecto de la frontera de radio css3

El efecto CSS3 border-radius define esquinas redondeadas. Y, es necesario utilizar prefijos específicas del navegador cuando se define un radio de frontera. Aquí algunas reglas para la definición de un radio de frontera:No se puede aplicar un…

Cómo modificar los diseños en css3 Cómo modificar los diseños en css3

Vale la pena probar algunos de los diseños de CSS3 para ver lo que quieres hacer con ellos antes de empezar a crear un proyecto de producción. Copie el código fuente del ejemplo en el sitio Dynamic Drive y colocarlo en archivos como espera…

Cómo el estilo de párrafos, encabezados y pies de página con css3 Cómo el estilo de párrafos, encabezados y pies de página con css3

Cuando se diseñará párrafos, encabezados y pies de página, la mayoría del trabajo se puede lograr de forma automática mediante la creación de estilos de etiquetas Redefinir para el etiqueta y sin embargo muchas etiquetas de título que va a…

» » » » ¿Cómo construir un ancho fijo diseño flotante para HTML5 y CSS3 programación