ubiquitour.com

Cómo crear una web de CSS sin tablas de 5 columna

Crear un diseño viable para su sitio web sin utilizar tablas se hace generalmente con cascada estilo hojas (o CSS), el elemento "div" de HTML y el estilo especial "float". Después de alguna práctica, pronto descubrirá que crear diseños de esta manera, no importa lo complicado, es mucho más flexible y versátil que el uso de tablas.

Instrucciones

1 Crear el marco para un documento HTML que consta de una sección de "cabeza", donde irá tu hoja de estilo, y una sección de "cuerpo", donde irá la estructura de su página. Debe ver algo como esto:

< html >< head >< title > mi 5 columnas < / title >< estilo tipo = "text/css" ><!--hoja de estilos va aquí-->< / estilo >< /HEAD >< cuerpo ><!--estructura de la página va aquí-->< /body >< / html >

2 Añadir una serie de elementos "div" dentro de la sección del cuerpo. Cada "div" representará una sección diferente de su página. Esta página consistirá de una sección de encabezado, cinco columnas en el medio y una sección de pie de página.

< div id = "cabecera" >< / div >< div clase = "columna" >< / div >< div clase = "columna" >< / div >< div clase = "columna" >< / div >< div clase = "columna" >< / div >< div clase = "columna" >< / div >< div id = "footer" >< / div >

Utilizamos el atributo "id" para la etiqueta del encabezado y pie de página porque ID se pueden utilizar cuando hay sólo una instancia del elemento en la página. Hay más de una columna, por lo que para esos elementos que utilizamos el atributo "class". Así que ahora nos hemos dividido la página en siete secciones, pero hasta ahora no hay ningún diseño.

3 Añadir las siguientes reglas de estilo entre las etiquetas de "estilo" en la sección "head".

div {border: 1px solid black;}div.Column {flotante: izquierda; width: 200px; altura: 400px;}

La primera línea le dará cada sección "div" de su página una frontera básica por lo que es más fácil detectar los cambios que estás haciendo.

La segunda línea le dará cada "div" que tiene la clase "columna" instrucciones a flotar a la izquierda, una altura de 400 píxeles y un ancho de 200 píxeles.

El elemento de "flotador" es la más confusa. Generalmente, los elementos "div" son elementos de nivel de bloque, lo que significa que toman una línea que nada puede aparecer junto a ellos. Un "div" que está flotando a la izquierda, sin embargo, es un "div" que permite que otros elementos que aparecen a la derecha de él. Especificando "float: right;" lograrían el mismo efecto, excepto que se permiten elementos flotando a la izquierda de él.

El resultado final es que todas las cinco columnas se alinean en una fila, ya que cada uno permite un próximo a aparecer junto a ella.

4 Agregue la siguiente línea debajo de las dos reglas anteriores del estilo:

div #footer {claro: ambos;}

Puesto que todas las columnas son flotadas izquierda, por defecto la sección "footer" aparecería a la derecha de las columnas. Usando el "claro: ambos;" de la regla, el pie de página aparece en su propia línea debajo de las columnas asegurándose de que ningún elemento flotado aparece junto a él.

5 Personalizar la presentación para satisfacer sus necesidades. Cambiar las medidas de ancho y la altura y utilizar el "margen" y "relleno" de las reglas CSS también separar las columnas entre sí y asegúrese de texto dentro de cada columna no aparece al ras con el borde.

Si desea que las columnas con anchuras variables, utilice el atributo "id" para dar a cada columna un nombre individual (como "columna 2") y luego añadir otra regla CSS en la hoja de estilos:

div #columna-2 {width: 500px;}

Finalmente, si desea que su disposición a tener una anchura total específica por lo que no extiende la longitud entera de la pantalla del ordenador, incluir todas las secciones de "div" siete en una envoltura "div" y dar ese "div" un ancho fijo:

div #wrapper {width: 1000px; auto de margen: 0;}

El "auto de margen: 0"; regla centrará el diseño en la pantalla.