Cara Membuat Tiga Kolom Css Layout, Css, Tutorial, Desain Resources

Cara Membuat Tiga Kolom Css Layout

Ini adalah tutorial tentang cara menggunakan CSS untuk membuat layout sederhana tiga kolom.
Tata letak yang terdiri dari judul, isi kolom yang utama, yang sidebar, dan footer. J pretty dasar tata letak, dan sama sekali tidak sulit untuk membuat dengan CSS setelah Anda tahu bagaimana untuk menangani dengan pasti terjadi Internet Explorer bug.

Strep pertama: kami membuat struktur dasar html


  > <div id = "page"> 
  > <div id = "header"> 
  > <div id = "sub-header"> 
 
  </ div> 
  </ div> 
  > <div id = "nevigation"> 
  <ul> 
  > Home </a> </li> <li> <a href = "#"> Rumah </ a> </ li> 
  > About us </a> </li> <li> <a href = "#"> Tentang kami </ a> </ li> 
  > Services </a> </li> <li> <a href = "#"> Layanan </ a> </ li> 
  > Products </a> </li> <li> <a href = "#"> Produk </ a> </ li> 
  > Sitemap </a> </li> <li> <a href = "#"> Sitemap </ a> </ li> 
  > Contact Us </a> </li> <li> <a href = "#"> Hubungi Kami </ a> </ li> 
  </ ul> 
  </ div> 
  > <div id = "content"> 
  > <div id = "sub-content"> 
  > <div id = "column1"> 
  <h2> Tentang Kami </ h2> 
  <p> Lorem ipsum duka duduk amet, consectetur  
  Adipiscing elit.  Ut viverra dui NEC risus. 
  Dalam sebuah neque eu tortor lacinia rhoncus.  Di  
  interdum placerat purus.  Lorem ipsum kedukaan 
  sit amet, consectetur adipiscing elit. 
  Suspendisse potenti.Lorem ipsum  
  duka duduk amet, </ p> 

  <p> Lorem ipsum duka duduk amet, consectetur  
  Adipiscing elit.  Ut viverra dui NEC risus. 
  Dalam sebuah neque eu tortor lacinia rhoncus.  Di  
  interdum placerat purus.  Lorem ipsum kedukaan 
  sit amet, consectetur adipiscing elit. 
  Suspendisse potenti.Lorem ipsum  
  > Readmore </a> </p> duka duduk amet, <a href = "#"> Selengkapnya </ a> </ p> 
  </ div> 
  > <div id = "column2"> 
  <h2> Layanan </ h2> 
  <p> Lorem ipsum duka duduk amet, consectetur  
  Adipiscing elit.  Ut viverra dui NEC risus. 
  Dalam sebuah neque eu tortor lacinia rhoncus.  Di  
  interdum placerat purus.  Lorem ipsum kedukaan 
  sit amet, consectetur adipiscing elit. 
  Suspendisse potenti.Lorem ipsum  
  duka duduk amet, </ p> 

  <p> Lorem ipsum duka duduk amet, consectetur  
  Adipiscing elit.  Ut viverra dui NEC risus. 
  Dalam sebuah neque eu tortor lacinia rhoncus.  Di  
  interdum placerat purus.  Lorem ipsum kedukaan 
  sit amet, consectetur adipiscing elit. 
  Suspendisse potenti.Lorem ipsum  
  > Readmore </a> </p> duka duduk amet, <a href = "#"> Selengkapnya </ a> </ p> 
  </ div> 
  > <div id = "column3"> 
  <h2> Hubungi Detil </ h2> 
  <p> Lorem ipsum duka duduk amet, consectetur  
  Adipiscing elit.  Ut viverra dui NEC risus. 
  Dalam sebuah neque eu tortor lacinia rhoncus.  Di  
  interdum placerat purus.  Lorem ipsum kedukaan 
  sit amet, consectetur adipiscing elit. 
  Suspendisse potenti.Lorem ipsum  
  duka duduk amet, </ p> 

  <p> Lorem ipsum duka duduk amet, consectetur  
  Adipiscing elit.  Ut viverra dui NEC risus. 
  Dalam sebuah neque eu tortor lacinia rhoncus.  Di  
  interdum placerat purus.  Lorem ipsum kedukaan 
  sit amet, consectetur adipiscing elit. 
  Suspendisse potenti.Lorem ipsum  
  > Readmore </a> </p> duka duduk amet, <a href = "#"> Selengkapnya </ a> </ p> 
  </ div> 
  </ div> 
  </ div> 
  > <div id = "bottom"> 
  > <div id = "sub-bottom"> 
   Developer's Paradise <span> Copyright © Developer surga  
  Dirancang Oleh Developer surga </ span> 
  </ div> 
  </ div> 
  </ div>

Langkah kedua: kami membuat struktur dasar css


  ; padding : 0 ; } * (Margin: 0; padding: 0;) 

  h1, h2, h3, h4 ( 
  , Times New Roman, Times, serif ; font: 100% "Georgia", Times New Roman, Times, berkait; 
  ; color: # fff; 
  text-transform: uppercase; 
  letter-spacing: 2px 
  ) 

  h1 ( 
  font-size: 400%; 
  text-align: center; 
  ; padding: 35px 0 0 0; 
  ) 

  %; } h2 (font-size: 150%;) 
  %; } h3 (font-size: 137%;) 
  %;text-align :center ; color : # 848484 ; } h4 (font-size: 120%; text-align: center; color: # 848484;) 

  ; } ul, ol, li (list-style-type: none;) 

  ; color : #00CCFF } a (text-decoration: none; color: # 00CCFF) 

   text-decoration :underline ; } a: hover (text-decoration: underline;) 

  p ( 
  ; color: # fff; 
  font-size: 12px; 
  , Times New Roman, Times, serif ; font-family: "Georgia", Times New Roman, Times, berkait; 
  ; color: # fff; 
  10px 0 ; padding: 0 0 10px 0; 
  line-height: 22px; 
  ) 


  body ( 
  "Georgia" , Times New Roman, Times, serif ; font: 100% normal "Georgia", Times New Roman, Times, berkait; 
  ; latar belakang: # 191919; 
  ) 


  # halaman (  
  ; latar belakang: # 323232; 
  width: 971px; 
  ; margin: 0 auto; 
  height: 100%; 
  # 353535 ; border-left: 1px solid # 353535; 
  # 353535 ; border-right: 1px solid # 353535; 
  12px 0 ; padding: 12px 0 12px 0; 
  ) 


  # header ( 
  auto 0 auto ; margin: 0px auto 0 auto; 
  width: 943px; 
  ; background: # 222; 
  # 424242 ; border: 1px solid # 424242; 
  ) 

  # sub-header ( 
  margin: 1px; 
  padding: 1px; 
  ; background: # 333; 
  overflow: hidden; 
  height: 150px; 
  ) 


  # (nevigation 
  auto 0 auto ; margin: 5px auto 0 auto; 
  width: 943px; 
  ; background: # 222; 
  # 424242 ; border: 1px solid # 424242; 
  ) 
  # nevigation ul ( 
  margin: 1px; 
  padding: 0px; 
  ; background: # 333; 
  overflow: hidden; 
  ) 
  # nevigation li ( 
  ; /*ie*/ display: inline; / * yakni * / 
  ) 

  # nevigation li a ( 
  float: left; 
  margin: 0; 
  ; padding: 7px 10px; 
  ; display: block; 
  ; color: # fff; 
  text-transform: uppercase; 
  letter-spacing: 2px; 
  ) 
  { # nevigation li a: hover ( 
  ; latar belakang: # 424242; 
  text-decoration: none; 
  ; color: # 00CCFF; 
  ) 


  # isi ( 
  width: 943px; 
  0 auto ; margin: 5px auto 0 auto; 
  ; background: # 222; 
  # 424242 ; border: 1px solid # 424242;  
  ) 

  # (sub-konten 
  margin: 1px; 
  padding: 1px; 
  ; background: # 333; 
  overflow: hidden; 
  ) 


  column1 # ( 
  width: 302px; 
  ; latar belakang: # 424242; 
  0 0 ; margin: 0 1px 0 0; 
  padding: 5px; 
  float: left; 
  ) 
  column2 # ( 
  width: 302px; 
  ; latar belakang: # 424242;  
  0 0 ; margin: 0 1px 0 0; 
  padding: 5px; 
  float: left; 
  ) 
  column3 # ( 
  width: 303px; 
  ; latar belakang: # 424242; 
  margin: 0; 
  padding: 5px; 
  float: left; 
  ) 


  # bawah ( 
  width: 943px; 
  0 auto ; margin: 5px auto 0 auto; 
  ; background: # 222; 
  # 424242 ; border: 1px solid # 424242; 
  ) 

  # sub-bawah ( 
  margin: 1px; 
  0px ; padding: 20px 0 0 0px; 
  ; background: # 333; 
  overflow: hidden; 
  height: 50px; 
  ; color: # fff; 
  text-align: center; 
  text-transform: uppercase; 
  letter-spacing: 2px; 
  )

Akhirnya kami telah membuat tiga kolom css layout. Contoh Lihat dan download file ini.

Saya akan berterimakasih jika Anda dapat mengambil kedua untuk membantu mempromosikan blog saya dan berbagi link ini dengan salah satu jaringan situs favorit Anda dengan menggunakan link di bawah ini ...

Share & Support: