Simple columna 2 css diseño, css, diseño, maquetación CSS |

Simple columna 2 css diseño

Este es un tutorial sobre cómo utilizar el CSS para crear un diseño sencillo de dos columnas.

El diseño consta de una cabecera, una columna de contenido principal, una barra lateral, y un pie de página. Un diseño muy básico, y no en todos los difícil crear con CSS una vez que saben cómo hacer frente a los inevitables errores de Internet Explorer.

1. Estructura básica

En primer lugar, crear la estructura básica en HTML:


 > <div id = "header" > </div> <div id = "sidebar" > </div> <div id = "main" > </div> <div id = "footer" > </div> </div> <div id = "page"> <div id = "header"> </ div> <div id = "sidebar"> </ div> <div id = "main"> </ div> <div id = "pie de página "> </ div> </ div> 
  Después de eso, poner el contenido en las diferentes secciones:  > <div id = "header" > <h1> Company Name </h1> <h4> Type your slogan </h4> </div> <div id = "sidebar" > <h2> Navigation </h2> <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About us </a> </li> <li> <a href = "#" > Srevices </a> </li> <li> <a href = "#" > Contact </a> </li> <li> <a href = "#" > Sitemap </a> </li> </ul> </div> <div id = "main" > <h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetuer dipiscing  elit. <div id = "page"> <div "header" id => <h1> Nombre de la empresa </ h1> <h4> Escriba su lema </ h4> </ div> <div "sidebar" id => <h2> Navegación </ h2> <ul> <li> <a href = "#"> Inicio </ a> </ li> <li> <a href = "#"> Acerca de nosotros </ a> </ li> < li> <a href = "#"> Srevices </ a> </ li> <li> <a href = "#"> Contacto </ a> </ li> <li> <a href = "#"> Mapa del sitio </ a> </ li> </ ul> </ div> <div "main" id => <h2> contenido </ h2> <p> Lorem ipsum dolor sit amet, consectetuer dipiscing elit.  Cum parturienta dis montes, nascetur ridiculus mus.  1 de enero de 2002 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Cum parturienta dis montes, nascetur ridiculus mus.  > <h2> Footer </h2> </div> </div> 1 de enero de 2002 </ p> </ div> <div "footer" id => <h2> pie de página </ h2> </ div> </ div>

2. Código css

Ahora vamos a crear el código css:


  / * estilo de dos columnas * / 
  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  cuerpo 
  ( 
  font-size: 100%; 
  font-weight: normal; 
  ; font-family: Arial, Helvetica, sans-serif; 
  ) 
  * Html, el cuerpo 
  ( 
  height: 100%; 
  ; min-height: 100% / * firefox * /; 
  ) 


 margin : 0 ; padding : 0 ; height : 100 %; } #page { margin : 0 auto ;  padding : 0 ;  width : 1009px ;  height : 100 %; } html # page (margin: 0; padding: 0; altura: 100%;) # page (margin: 0 auto; padding: 0; ancho: 1009px; altura: 100%;) 
 ; } a :hover { text-decoration :underline } ul,ol,li { margin : 0 ; padding : 0 ; } h1,h2,h3,h4,h5,h6 { margin : 0 ; padding : 10px 0 0 20px ; } h1 { font-size : 28px ; } h2 { font-size : 24px ; } h3 { font-size : 18px ; } h4 { font-size : 12px ; } h5 { font-size : 10px ; } p { margin : 0 ; line-height : 18px ; padding : 0 0 10px 20px ; font-size : 12px ; } #page { margin : 0 auto ;  padding : 0 ;  width : 1009px ;  height : 100 %; } #header { margin : 0 ; padding : 0 ; width : 100 %; height : 151px ; display :block ; background-color : #eeeeee ; } #sidebar { float :left ; margin : 0 ; padding : 0 ; display :inline /*internet explorer*/ ; width : 200px ; height : 100 %; background-color : #cccccc ; } #sidebar ul { list-style-type :none ; } #sidebar ul li { display : inline /*internet explore*/ ; } #sidebar ul li a { padding : 3px 4px ; display :block ; margin : 0px 0 0 16px ; text-decoration :none ; color : #0000E8 } #sidebar ul li a :hover { color : #CC0000 } #main { margin : 0 ; padding : 0 ; float :left ; display :block ; width : 809px ; height : 100 %; background : #dddddd } #footer { margin : 0 ; padding : 0 ; display :block ; width : 100 %; height : 50px ; background : #eeeeee ; overflow :hidden ; } un (text-decoration: none;) a: hover (text-decoration: underline) ul, ol, li (margin: 0; padding: 0;) H1, H2, H3, H4, H5, H6 (margin: 0; padding: 10px 0 0 20px;) h1 (font-size: 28px;) h2 (font-size: 24px;) h3 (font-size: 18px;) h4 (font-size: 12px;) h5 (font-size: 10px;) p (margin: 0; line-height: 18px; padding: 0 0 10px 20px; font-size: 12px;) # page (margin: 0 auto; padding: 0; ancho: 1009px; altura: 100%; () # cabecera margin: 0; padding: 0; width: 100%; altura: 151px; pantalla: bloque; background-color: # eeeeee;) (# sidebar flotador: izquierda; margin: 0; padding: 0; pantalla: en línea / * Internet Explorer * /; ancho: 200px; altura: 100%; background-color: # cccccc;) # sidebar ul (list-estilo-type: none;) # sidebar ul li (display: "inline" / * Internet explorar * /;) # sidebar ul li a (padding: 3px 4px; pantalla: bloque; margin: 0px 0 0 16px; text-decoration: none; color: # 0000E8) # sidebar ul li a: hover (color: # CC0000) # principal (margin: 0; padding: 0; flotador: izquierda; pantalla: bloque; ancho: 809px; altura: 100%; de fondo: # dddddd) # pie (margin: 0; padding: 0; pantalla: bloque; ancho: 100%; altura: 50 px; fondo: # eeeeee; desbordamiento: oculto;)