Jednoduché 2 sloupce css layoutu, css, design, css layout |

Jednoduché 2 sloupce css layout

Toto je návod, jak používat CSS k vytvoření jednoduchého dva sloupce layoutu.

Uspořádání se skládá z hlavičky, což je hlavní obsah sloupce, a sidebar, a zápatí. A docela základní layout a vůbec obtížné vytvořit s CSS jednou víte, jak se vyrovnat s nevyhnutelným Internet Explorer chyb.

1. Základní struktura

V prvé řadě jsme vytvořit základní strukturu HTML:


 > <div id = "header" > </div> <div id = "sidebar" > </div> <div id = "main" > </div> <div id = "footer" > </div> </div> <div id = "page"> <div id = "header"> </ div> <div id = "sidebar"> </ div> <div id = "main"> </ div> <div id = "footer "> </ div> </ div> 
  Za to, že jsme některé obsah jednotlivých sekcí:  > <div id = "header" > <h1> Company Name </h1> <h4> Type your slogan </h4> </div> <div id = "sidebar" > <h2> Navigation </h2> <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About us </a> </li> <li> <a href = "#" > Srevices </a> </li> <li> <a href = "#" > Contact </a> </li> <li> <a href = "#" > Sitemap </a> </li> </ul> </div> <div id = "main" > <h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetuer dipiscing  elit. <div id = "page"> <div id = "header"> <h1> Název </ h1> <h4> Napište svůj slogan </ h4> </ div> <div id = "sidebar"> <h2> Navigace </ h2> <ul> <li> <a href = "#"> Domů </ a> </ li> <li> <a href = "#"> O nás </ a> </ li> < li> <a href = "#"> Srevices </ a> </ li> <li> <a href = "#"> Kontakt </ a> </ li> <li> <a href = "#"> sitemap </ a> </ li> </ ul> </ div> <div id = "main"> <h2> Obsah </ h2> <p> Lorem ipsum lítost sit amet, consectetuer dipiscing Elit.  Cum dis parturient Montes, nascetur ridiculus mus.  1. ledna 2002 Lorem ipsum lítost sit amet, consectetuer adipiscing Elit.  Cum dis parturient Montes, nascetur ridiculus mus.  > <h2> Footer </h2> </div> </div> 1. ledna 2002 </ p> </ div> <div id = "footer"> <h2> Footer </ h2> </ div> </ div>

2. CSS kód

Nyní vytvořte css kód:


  / * styl dva sloupce layoutu * / 
  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  tělo 
  ( 
  font-size: 100%; 
  font-weight: normal; 
  ; font-family: Arial, Helvetica, sans-serif; 
  ) 
  * Html, body 
  ( 
  výška: 100%; 
  ; min-height: 100% / * firefox * /; 
  ) 


  html, # page 
  (  
  margin: 0; 
  padding: 0; 
  výška: 100%; 
  ) 
  # page 
  ( 
  ; Margin: 0 auto; 
  Padding: 0; 
  Šířka: 1009px; 
  Výška: 100%; 
  ) 


 ; } a :hover { text-decoration :underline } ul,ol,li { margin : 0 ; padding : 0 ; } h1,h2,h3,h4,h5,h6 { margin : 0 ; 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 ; padding : 0 0 10px 20px ; font-size : 12px ; } #page { 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 ; } #sidebar ul li { display : inline /*internet explore*/ ; } #sidebar ul li a { padding : 3px 4px ; display :block ; margin : 0px 0 0 16px ; text-decoration :none ; color : #0000E8 } #sidebar ul li a :hover { color : #CC0000 } #main { margin : 0 ; padding : 0 ; float :left ; display :block ; width : 809px ; height : 100 %; background : #dddddd } #footer { margin : 0 ; padding : 0 ; display :block ; width : 100 %; height : 50px ; background : #eeeeee ; overflow :hidden ; } a (text-decoration: none;) a: hover (text-decoration: underline) ul, ol, li (margin: 0; padding: 0;) H1, H2, H3, H4, H5, H6 (margin: 0; 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; padding: 0 0 10px 20px; font-size: 12px;) # page (margin: 0 auto; padding: 0; šířka: 1009px; výška: 100%; ) # hlavicka (margin: 0; padding: 0; width: 100%, výška: 151px; display: block; background-color: # eeeeee;) # sidebar (float: left; margin: 0; padding: 0; zobrazení: inline / internet explorer * * /; šířka: 200px, výška: 100%; background-color: # cccccc;) # sidebar ul (list-style-typu: none;) # sidebar ul li (zobrazení: inline / * internet prozkoumat * /;) # sidebar ul li a (padding: 3px 4px; display: block; margin: 0px 0 0 16px; text-decoration: none; color: # 0000E8) # sidebar ul li a: hover (color: # CC0000) # main (margin: 0; padding: 0; float: left; display: block; šířka: 809px, výška: 100%; background: # dddddd) # footer (margin: 0; padding: 0; display: block; šířka: 100%, výška: 50px; background: # eeeeee; overflow: hidden;)