Simple 2 coloana css layout, css, design, css layout |

Simple 2 coloana css layout

Acesta este un ghid privind modul de utilizare CSS pentru a crea un simplu două coloana layout.

Structura constă dintr-un antet, o coloana de continutul principal, o bara laterală, şi un subsol. Un aspect destul de bază, şi nu de la toate greu pentru a crea o dată cu CSS ştii cum să se ocupe de inevitabil Internet Explorer de bug-uri.

1. Structura de bază

Mai întâi de toate, vom crea structura de bază HTML:


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


  După asta, am pus o parte a conţinutului în diferite secţiuni: 

  > <div id = "page"> 
  > <div id = "header"> 
  <h1> Numele companiei </ h1> 
  <h4> Tip vă sloganul </ H4> 
  </ div> 

  > <div id = "sidebar"> 
  <h2> de navigare </ h2> 
  <ul> 
  > Home </a> </li> <li> <a href = "#"> Prima pagina </ a> </ li> 
  > About us </a> </li> <li> <a href = "#"> Despre noi </ 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 = "#"> Harta site-ului </ a> </ li> 
  </ ul> 
  </ div> 

  > <div id = "main"> 
  <h2> Continut </ h2> 
  <p> Lorem ipsum dolor sit amet, consectetuer dipiscing 
  Elit.  Cum DIS naştere Montes, nascetur ridiculus Mus.  1 ianuarie,  
  2002 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Cum DIS  
  naştere Montes, nascetur ridiculus Mus.  1 ianuarie, 2002 </ p> 
  </ div> 
  > <div id = "footer"> 
  <h2> Footer </ h2> 
  </ div> 
  </ div>

2. Css Codul

Acum vom crea css code:


  / * stil două coloana layout * / 
  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  corp 
  ( 
  font-size: 100%; 
  font-weight: normal; 
  ; font-family: Arial, Helvetica, sans-serif; 
  ) 
  * Html, organism 
  ( 
  înălţime: 100%; 
  ; min-height: 100% / * Firefox * /; 
  ) 


  html, # pagină 
  (  
  margin: 0; 
  padding: 0; 
  înălţime: 100%; 
  ) 
  # pagină 
  ( 
  ; Margin: 0 auto; 
  Padding: 0; 
  Width: 1009px; 
  Înălţime: 100%; 
  ) 


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

  # pagină 
  ( 
  ; Margin: 0 auto; 
  Padding: 0; 
  Width: 1009px; 
  Înălţime: 100%; 
  ) 

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

  # bara laterală 
  ( 
  float: left; 
  margin: 0; 
  padding: 0; 
  ; display: inline / * Internet Explorer * /; 
  width: 200px; 
  înălţime: 100%; 
  ; background-color: # cccccc; 
  ) 

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

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

  # sidebar-ul li o 
  (  
  ; 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; 
  înălţime: 100%; 
  background: # dddddd 
  ) 
  # subsol 
  ( 
  margin: 0; 
  padding: 0; 
  display: block; 
  width: 100%; 
  height: 50px; 
  ; background: # eeeeee; 
  overflow: hidden; 
  )