Semplice 2 colonna css layout, css, design, layout css |

Semplice 2 colonna css layout

Questo è un tutorial su come utilizzare i CSS per creare un semplice layout a due colonne.

La struttura si compone di un header, un contenuto principale colonna, una barra laterale, e un piè di pagina. Una bella base di layout, e non a tutte le difficoltà a creare con i CSS, una volta di sapere come affrontare le inevitabili bug di Internet Explorer.

1. Struttura di base

Prima di tutto, abbiamo creato la struttura HTML di base:


  > <div id = "page"> 
  > </div> <div id = "header"> </ div> 
  > </div> <div id = "sidebar"> </ div> 
  > </div> <div id = "main"> </ div> 
  > </div> <div id = "footer"> </ div> 
  </ div> 


  Dopo di ciò, abbiamo messo alcuni contenuti nelle diverse sezioni: 

  > <div id = "page"> 
  > <div id = "header"> 
  <h1> Nome della società </ h1> 
  <h4> Scrivi il tuo slogan </ h4> 
  </ div> 

  > <div id = "sidebar"> 
  <h2> di navigazione </ h2> 
  <ul> 
  > Home </a> </li> <li> <a href = "#"> Home page </ a> </ li> 
  > About us </a> </li> <li> <a href = "#"> Chi siamo </ a> </ li> 
  > Srevices </a> </li> <li> <a href = "#"> Srevices </ a> </ li> 
  > Contact </a> </li> <li> <a href = "#"> Contatto </ a> </ li> 
  > Sitemap </a> </li> <li> <a href = "#"> Mappa del sito </ a> </ li> 
  </ ul> 
  </ div> 

  > <div id = "main"> 
  <h2> Contenuto </ h2> 
  <p> Lorem ipsum dolor sit amet, consectetuer dipiscing 
  Elit.  Cum dis parturient montes, nascetur ridiculus mus.  Dal 1 ° gennaio  
  2002 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Cum DIS  
  parturient montes, nascetur ridiculus mus.  Dal 1 ° gennaio 2002 </ p> 
  </ div> 
  > <div id = "footer"> 
  <h2> Footer </ h2> 
  </ div> 
  </ div>

2. Codice CSS

Ora abbiamo creato il codice CSS:


  / * stile di layout a due colonne * / 
  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  corpo 
  ( 
  font-size: 100%; 
  font-weight: normal; 
  ; font-family: Arial, Helvetica, sans-serif; 
  ) 
  * Html, il corpo 
  ( 
  altezza: 100%; 
  ; min-height: 100% / * Firefox * /; 
  ) 


  html, # pagina 
  (  
  margin: 0; 
  padding: 0; 
  altezza: 100%; 
  ) 
  # pagina 
  ( 
  ; Margin: 0 auto; 
  Padding: 0; 
  Width: 1009px; 
  Altezza: 100%; 
  ) 


  ; } a (text-decoration: none;) 

   text-decoration :underline } a: hover (text-decoration: underline) 

  ; padding : 0 ; } ul, ol, li (margin: 0; padding: 0;) 


  h1, h2, h3, h4, h5, h6 
  ( 
  margin: 0; 
  20px ; 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; 
  10px 20px ; padding: 0 0 10px 20px; 
  font-size: 12px;  
  ) 

  # pagina 
  ( 
  ; Margin: 0 auto; 
  Padding: 0; 
  Width: 1009px; 
  Altezza: 100%; 
  ) 

  # header 
  ( 
  margin: 0; 
  padding: 0; 
  larghezza: 100%; 
  height: 151px; 
  display: block; 
  ; background-color: # eeeeee; 
  ) 

  # sidebar 
  ( 
  float: left; 
  margin: 0; 
  padding: 0; 
  ; display: inline / * Internet Explorer * /; 
  width: 200px; 
  altezza: 100%; 
  ; background-color: # cccccc; 
  ) 

  # sidebar ul 
  ; } (List-style-type: none;) 

  display : inline /*internet explore*/ ; } # sidebar ul li (display: inline / * Internet esplorare * /;) 

  # sidebar ul li uno 
  (  
  ; padding: 3px 4px; 
  display: block; 
  16px ; margin: 0px 0 0 16px; 
  text-decoration: none; 
  color: # 0000E8 
  ) 

  # sidebar ul li a: hover 
  : #CC0000 } (Color: # cc0000)  

  # principale 
  ( 
  margin: 0; 
  padding: 0; 
  float: left; 
  display: block; 
  width: 809px; 
  altezza: 100%; 
  background: # dddddd 
  ) 
  # footer 
  ( 
  margin: 0; 
  padding: 0; 
  display: block; 
  larghezza: 100%; 
  height: 50px; 
  ; background: # eeeeee; 
  overflow: hidden; 
  )