Tecnología

Inicio

Cómo crear una plantilla de página web CSS sin tablas 5 Columna

February 5

Trazado de una página web con las hojas de estilo en cascada en lugar de tablas puede ser difícil para las personas que están acostumbradas a código basado en tablas, sobre todo cuando se trata de colocar la información lado a lado, en las columnas. Una vez que aprender las técnicas básicas, lo encontrará tan fácil crear una plantilla de página web CSS sin tablas de cinco columnas que nunca va a volver a los viejos tiempos de las tablas de nuevo.

Instrucciones

Configurar el código HTML

1 Construir un elemento contenedor para contener todos sus columnas en el cuerpo del documento HTML. Colocar ese contenedor div entre las etiquetas de apertura y cierre del cuerpo:

<Div id = \ "columna-contenedor \">
...
</ Div>

2 Coloque cinco divs más en el interior del contenedor div: uno para cada columna. darles la clase \ "la columna, \", que vamos a utilizar más adelante para darles estilo.

<Div id = \ "columna-contenedor \">

&lt;div class=\&quot;column\&quot;>&lt;/div>
&lt;div class=\&quot;column\&quot;>&lt;/div>
&lt;div class=\&quot;column\&quot;>&lt;/div>
&lt;div class=\&quot;column\&quot;>&lt;/div>
&lt;div class=\&quot;column\&quot;>&lt;/div>

</ Div>

3 Asegúrese de que tiene una hoja de estilo se hace referencia o etiqueta de estilo en la sección head del documento:

<Head>

&lt;link rel=\&quot;stylesheet\&quot; type=\&quot;text/css\&quot; href=\&quot;styles.css\&quot;>

</ Head>
<Body>

O

<Head>

&lt;style type=\&quot;text/css\&quot;>
...
&lt;/style>

</ Head>
<Body>

Se recomienda el primer método, a menos que esté trabajando en una página que no se puede cambiar en ese sentido a causa de directrices de la empresa.

Configurar el CSS

4 Aplicar el siguiente estilo de contenedores en la hoja de estilo o entre las etiquetas de estilo en el paso anterior.

div#column-container {
width:95%

IR

margin:0 auto

IR

overflow:auto

IR

border:1px solid #000

IR

}

existe Este recipiente para mantener las columnas de manera que pueden ser colocados en la pantalla, por ejemplo, en un diseño de página centrado. En este ejemplo, el recipiente es 95% de la anchura de la pantalla del navegador, y centrado. Hay una frontera por lo que es fácil ver que el recipiente se encuentra en la página. Usando una técnica desarrollada por el experto en CSS Paul O'Brian y se hizo popular en SitePoint.com, la \ "overflow: auto \" regla obliga a las columnas de \ "clara \" para que el recipiente no se colapsa a cero altura.

5 Aplicar el siguiente estilo de columna bajo el código en el paso anterior:

div#column-container div.column{
width:20%

IR

margin:0

IR

padding:0

IR

float:left

IR

}

Este código hace que cada columna exactamente una quinta parte (20%) de la anchura del recipiente. El \ "flotar \" declaración deja las columnas comparan de izquierda a derecha, la columna más a la izquierda es la primera columna que aparece en el marcado HTML.

6 Cargar el documento en su navegador favorito para ver los resultados de su código.