-
Cómo crear un sitio web sin tablas 5 Columna CSS
-
Creación de un diseño viable para su sitio web, sin usar tablas se hace generalmente con las hojas de estilo en cascada (CSS) o, el elemento "div" de HTML, y el estilo especial de "flotar". Después de un poco de práctica, pronto descubrirá que la creación de 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 consiste en una sección de "cabeza", donde la hoja de estilo se irá, y una sección de "cuerpo", donde la estructura de la página de tope. Debe ser algo como esto:
<Html>
<Head>
<Title> Mi-5 Diseño de columna </ title>
<Style type = "text / css">
<! - Hoja de estilos va aquí ->
</ Style>
</ Head>
<Body>
<! - 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 estará formado por una sección de cabecera, cinco columnas en el centro, y una sección de pie de página.
<Div id = "header"> </ div>
<Div class = "columna"> </ div>
<Div class = "columna"> </ div>
<Div class = "columna"> </ div>
<Div class = "columna"> </ div>
<Div class = "columna"> </ div>
<Div id = "pie"> </ div>Usamos el atributo "id" para etiquetar la cabecera y el pie, porque los identificadores se pueden utilizar cuando sólo hay una instancia del elemento de la página. Hay más de una columna, así que para aquellos elementos que utilizamos el atributo "clase". Así que ahora hemos dividido la página en siete secciones, pero hasta ahora no hay ninguna disposición.
3 Añadir las siguientes reglas de estilo entre las etiquetas "estilo" en la sección "cabeza".
div {border: 1px solid negro; }
div.column {float: left; Anchura: 200px; altura: 400px; }La primera línea le dará a cada sección "div" de la página de un borde de base por lo que es más fácil de detectar los cambios que realiza.
La segunda línea le dará a cada "div" que tiene la "columna" clase de un ancho de 200 píxeles, una altura de 400 píxeles, y las instrucciones para flotar a la izquierda.
El elemento "flotante" es el más confuso. Por lo general, los elementos "div" son elementos de bloque, lo que significa que ocupan toda una línea de modo que nada puede aparecer al lado de ellos. Un "div" que se hace flotar a la izquierda, sin embargo, es un "div" que permite a otros elementos que aparezcan a la derecha de la misma. Para especificar "float: right;" permita lograr el mismo efecto, excepto que se permitiría a los elementos a flotar a la izquierda de la misma.
El resultado final es que las cinco columnas se alinearán en una fila, ya que cada uno permite que el siguiente en aparecer junto a él.
4 Agregue la siguiente línea debajo de las dos anteriores reglas de estilo:
# div pie de página {clear: both; }
Puesto que todas las columnas son flotantes izquierda, de forma predeterminada la sección "pie de página" aparecería a la derecha de las columnas. Usando el "clear: both;" norma, el pie de página aparece en su propia línea por debajo de las columnas haciendo que los elementos de que no flotaban aparecen al lado de él.
5 Personalizar el diseño para adaptarse a sus necesidades. Cambiar las medidas de anchura y altura y utilizar el "margen" y "relleno" reglas CSS también se separan las columnas entre sí y asegurarse de texto dentro de cada columna no aparece a ras de la frontera.
Si desea que las columnas de tener 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; }
Por último, si desea que su diseño tenga una anchura total específico de modo que no se extienda a toda la longitud de la pantalla del ordenador, encierre las siete secciones "div" en una envoltura "div", y dan que "div" un ancho fijo :
div # envoltorio {width: 1000px; margin: 0 auto; }
El "margin: 0 auto;" regla centrará el diseño en la pantalla.
