Prosta 2 kolumny css layout, css, design, layout css |

Prosta 2 kolumny css układ

Jest to podręcznik o sposobach korzystania z CSS stworzyć prosty układ dwóch kolumn.

Układ składa się z nagłówka, treści głównej kolumnie, a bocznym i stopki. A całkiem podstawowego układu, a nie na wszystkie trudne do stworzenia z CSS, gdy wiesz, jak radzić sobie z nieuniknionym Internet Explorer błędów.

1. Podstawowe struktury

Przede wszystkim tworzymy podstawowy 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> 


  Po tym, wprowadzone pewne treści w różnych działach: 

  > <div id = "page"> 
  > <div id = "header"> 
  <h1> Nazwa firmy </ h1> 
  <h4> Wpisz swoje hasło </ h4> 
  </ div> 

  > <div id = "sidebar"> 
  <h2> Navigation </ h2> 
  <ul> 
  > Home </a> </li> <li> <a href = "#"> Strona główna </ a> </ li> 
  > About us </a> </li> <li> <a href = "#"> O nas </ 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 = "#"> Sitemap </ a> </ li> 
  </ ul> 
  </ div> 

  > <div id = "main"> 
  <h2> treści </ h2> 
  <p> Lorem ipsum dolor sit amet, consectetuer dipiscing 
  Elit.  Cum dis rodząca Montes, nascetur ridiculus mus.  1 stycznia,  
  2002 Lorem ipsum dolor sit amet, consectetuer adipiscing Elit.  Cum dis  
  rodząca Montes, nascetur ridiculus mus.  1. stycznia 2002 </ p> 
  </ div> 
  > <div id = "footer"> 
  <h2> Stopka </ h2> 
  </ div> 
  </ div>

2. Css Kod

Teraz stworzymy css code:


  / * styl dwie kolumny układu * / 
  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  ciało 
  ( 
  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%; 
  ) 
  # strona 
  ( 
  ; 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;  
  ) 

  # strona 
  ( 
  ; 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 zbadania * /;) 

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

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

  # główne 
  ( 
  margin: 0; 
  padding: 0; 
  float: left; 
  display: block; 
  width: 809px; 
  height: 100%; 
  background: # dddddd 
  ) 
  # stopki 
  ( 
  margin: 0; 
  padding: 0; 
  display: block; 
  width: 100%; 
  height: 50px; 
  ; background: # eeeeee; 
  overflow: hidden; 
  )