Simple 2 column CSS layout, css, design, css opmaak |

Simple 2 column CSS layout

Dit is een tutorial over het gebruik van CSS om een eenvoudige twee kolommen.

De lay-out bestaat uit een header, een inhoud kolom, een sidebar en een voettekst. Een mooie basis lay-out, en helemaal niet moeilijk te maken met CSS als je eenmaal weet hoe ze moeten omgaan met de onvermijdelijke Internet Explorer bugs.

1. Basisstructuur

Allereerst maken we de eenvoudige HTML-structuur:


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


  Na dat we bepaalde inhoud in de verschillende secties: 

  > <div id = "page"> 
  > <div id = "header"> 
  <h1> Bedrijfsnaam </ h1> 
  <h4> Typ uw slogan </ h4> 
  </ div> 

  > <div id = "sidebar"> 
  <h2> Navigatie </ h2> 
  <ul> 
  > Home </a> </li> <li> <a href = "#"> Home </ a> </ li> 
  > About us </a> </li> <li> <a href = "#"> Over ons </ a> </ li> 
  > Srevices </a> </li> <li> <a href = "#"> Srevices </ a> </ li> 
  > Contact </a> </li> <li> <a href = "#"> Contact </ a> </ li> 
  > Sitemap </a> </li> <li> <a href = "#"> Sitemap </ a> </ li> 
  </ ul> 
  </ div> 

  > <div id = "main"> 
  <h2> Inhoud </ 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> Voettekstnavigatie </ h2> 
  </ div> 
  </ div>

2. Css-code

Nu maken we css-code:


  / * stijl twee kolommen * / 
  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  lichaam 
  ( 
  font-size: 100%; 
  font-weight: normal; 
  ; font-family: Arial, Helvetica, sans-serif; 
  ) 
  * Html, body 
  ( 
  height: 100%; 
  ; min-height: 100% / * Firefox * /; 
  ) 


  html, # pagina 
  (  
  margin: 0; 
  padding: 0; 
  height: 100%; 
  ) 
  # pagina 
  ( 
  ; Margin: 0 auto; 
  Padding: 0; 
  Width: 1009px; 
  Height: 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; 
  Height: 100%; 
  ) 

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

  # sidebar 
  ( 
  float: links; 
  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 verkennen * /;) 

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

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

  # belangrijkste 
  ( 
  margin: 0; 
  padding: 0; 
  float: links; 
  display: block; 
  width: 809px; 
  height: 100%; 
  achtergrond: # dddddd 
  ) 
  # footer 
  ( 
  margin: 0; 
  padding: 0; 
  display: block; 
  width: 100%; 
  height: 50px; 
  ; background: # eeeeee; 
  overflow: hidden; 
  )