Enkel 2 kolumn css layout, css, design, css layout |

Enkel 2 kolumn css layout

Detta är en handledning om hur man använder CSS för att skapa en enkel två kolumn layout.

Layouten består av ett huvud, en huvudinnehållet kolumn, en sidofältet och en sidfot. En ganska grundläggande layout, och inte alls svårt att skapa med CSS när du vet hur man handskas med det oundvikliga Internet Explorer buggar.

1. Grundläggande struktur

Först av allt, vi skapar den grundläggande HTML struktur:


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


  Efter att vi lagt upp en del i de olika avsnitten: 

  > <div id = "page"> 
  > <div id = "header"> 
  <h1> Företagets namn </ h1> 
  <h4> Skriv din slogan </ h4> 
  </ div> 

  > <div id = "sidebar"> 
  <h2> Navigation </ h2> 
  <ul> 
  > Home </a> </li> <li> <a href = "#"> hemsida </ a> </ li> 
  > About us </a> </li> <li> <a href = "#"> Om oss </ a> </ li> 
  > Srevices </a> </li> <li> <a href = "#"> Srevices </ a> </ li> 
  > Contact </a> </li> <li> <a href = "#"> Kontakta </ a> </ li> 
  > Sitemap </a> </li> <li> <a href = "#"> Sitemap </ a> </ li> 
  </ ul> 
  </ div> 

  > <div id = "main"> 
  <h2> innehåll </ h2> 
  <p> lorem ipsum dolor sit amet, consectetuer dipiscing 
  Elit.  Cum DIS parturient Montes, nascetur ridiculus mus.  1 januari,  
  2002 lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Cum DIS  
  parturient Montes, nascetur ridiculus mus.  1 januari 2002 </ p> 
  </ div> 
  > <div id = "footer"> 
  <h2> Footer </ h2> 
  </ div> 
  </ div>

2. Css-koden

Nu skapar vi css-kod:


  / * stil två kolumn layout * / 
  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  kropp 
  ( 
  font-size: 100%; 
  font-weight: normal; 
  ; font-family: Arial, Helvetica, sans-serif; 
  ) 
  * Html, body 
  ( 
  height: 100%; 
  ; min-height: 100% / * Firefox * /; 
  ) 


  html, # page 
  (  
  margin: 0; 
  padding: 0; 
  height: 100%; 
  ) 
  # page 
  ( 
  ; Margin: 0 auto; 
  Padding: 0; 
  Width: 1009px; 
  Height: 100%; 
  ) 


  ; } en (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;  
  ) 

  # 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;) 

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

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

  # sidebar ul li a: hover 
  : #CC0000 } (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; 
  )