Jednostavna 2 stupac CSS layout, CSS, dizajn, css layout |

Jednostavna 2 stupac CSS layout

Ovo je tutorial kako koristiti CSS za izradu jednostavnih dva stupca izgled.

Izgled se sastoji od zaglavlja, glavni sadržaj stupca, Sidebar, a fusnote. Ljepušan osnovni izgled, i nije uopće teško stvoriti sa CSS jednom kad znate kako se nositi s neizbježnim Internet Explorer bugova.

1. Osnovna struktura

Prije svega, mi stvaramo osnovnih HTML struktura:


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


  Nakon toga smo stavili neki sadržaj u različite odjeljke: 

  > <div id = "page"> 
  > <div id = "header"> 
  <h1> Naziv tvrtke </ H1> 
  <h4> Unesite vaš slogan </ H4> 
  </ div> 

  > <div id = "sidebar"> 
  <h2> Navigacija </ H2> 
  <ul> 
  > Home </a> </li> <li> <a href = "#"> Početna stranica </ a> </ li> 
  > About us </a> </li> <li> <a href = "#"> O nama </ a> </ li> 
  > Srevices </a> </li> <li> <a href = "#"> Srevices </ a> </ li> 
  > Contact </a> </li> <li> <a href = "#"> Kontakt </ a> </ li> 
  > Sitemap </a> </li> <li> <a href = "#"> Mapa stranica </ a> </ li> 
  </ ul> 
  </ div> 

  > <div id = "main"> 
  <h2> sadržaj </ H2> 
  <p> Lorem ipsum bol sjediti amet, consectetuer dipiscing 
  Elit.  Cum Dis porođajni montes, nascetur ridiculus mus.  1. siječnja  
  2002 Lorem ipsum bol sjediti amet, consectetuer adipiscing elit.  Cum Dis  
  porođajni montes, nascetur ridiculus mus.  1. siječanj 2002 </ p> 
  </ div> 
  > <div id = "footer"> 
  <h2> Footer </ H2> 
  </ div> 
  </ div>

2. Css Šifra

Sada stvaramo css code:


  / * stil dvije kolone layout * / 
  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  tijelo 
  ( 
  font-size: 100%; 
  font-weight: normalna; 
  ; font-family: Arial, Helvetica, sans-serif; 
  ) 
  * Html, body 
  ( 
  height: 100%; 
  ; min-height: 100% / * Firefox * /; 
  ) 


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


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

  # stranici 
  ( 
  ; Margin: 0 auto; 
  Padding: 0; 
  Width: 1009px; 
  Height: 100%; 
  ) 

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

  # sidebar 
  ( 
  plovak: lijevo; 
  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 istražiti * /;) 

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

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

  glavni # 
  ( 
  margin: 0; 
  padding: 0; 
  plovak: lijevo; 
  display: block; 
  width: 809px; 
  height: 100%; 
  background: # dddddd 
  ) 
  # footer 
  ( 
  margin: 0; 
  padding: 0; 
  display: block; 
  width: 100%; 
  height: 50px; 
  ; background: # eeeeee; 
  overflow: skriveni; 
  )