ubiquitour.com

Cómo crear columnas con divisores

Cómo crear columnas con divisores

Diseñar una web con dos o tres columnas permite que mejor organiza la información en su página. Columnas rompen trozos de texto, permite añadir un menú vertical, que sea más fácil para los visitantes al navegar por su web y hacen su sitio más visualmente atractivo. Agregar separadores entre columnas también puede mejorar el aspecto de su página Web.

Instrucciones

1 Bloc de notas abierto seleccionando "Start" y "Run". Luego escriba "Notepad" y seleccione "Aceptar".

2 Introduzca el código siguiente en la página:

<! Html DOCTYPE público "-//W3C//DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd" >

< html >

< head >

< meta http-equiv = "Content-Type" content = "text/html; charset = ISO-8859-1 ">

< link rel = "stylesheet" type = "text/css" href="style.css" media = "pantalla" / >

título < title > < / title >

< /HEAD >

< cuerpo >

< div id = "wrapper" >

< div id = "cabecera" >< / div >

< div id = "contenedor" >

< div id = "left" >

< /ul >

< / div >

< div id = "derecho" >< / div >

< div clase = "más clara" >< / div >

< / div >

< div id = "footer" >< p >< /p >< / div >

< / div >

< /body >

< / html >

Esto basa el diseño de la página en HTML. También utiliza una serie de div de la pancarta superior de la página, dos columnas en la parte principal de la página y un pie de página que contiene la información en la parte inferior de la página.

3 Guarde el archivo como "index.html".

4 Crear un nuevo archivo y llámalo "style.css". Agregue el código siguiente en el archivo CSS que ha creado:

HTML, {cuerpo}

margen: 0px;

padding: 0px;

}

{} de la envoltura width: 800px;

margen: automático de 15px 15px automático;

padding: 0px;

texto-alinee: izquierdo;

frontera: 1px sólido #dadada;

}

envase {} anchura: 100%;

altura: auto;

margen: 0px;

padding: 2px 0px;

}

izquierdo {} width: 160px;

altura: auto;

Float: left;

padding: 20px;

margen: 0px;

}

derecho {} width: 530px;

altura: auto;

Float: left;

acolchado: 50px de 20px 20px 20px;

margen: 0px;

}

derecho p {} margen: 0px;

}

Esto regulará cómo los elementos se mostrarán en la página HTML.

5 Con un editor de gráficos, crear un píxel de la línea 1 de divisor de 1 píxel de ancho. Utilizar un color que coincida con el diseño de su sitio. Guardar como "divider.gif".

6 Agregue este código en el archivo style.css en la etiqueta #container y guardar. Esto creará una línea divisora entre el "#left" y "#right" DIVS vas del encabezado al pie de página:

imagen de fondo: url(divider.gif);

Fondo-repeat: repeat-y;

Fondo-posición: 200px 0px;

7 Ejecute el archivo index.html en tu navegador. Usted tendrá un diseño de página web con dos columnas, divididas por una imagen.