Jednoduché 2 stĺpce css layoutu, css, design, css layout |

Jednoduché 2 stĺpce css layout

Toto je návod, ako používať CSS k vytvoreniu jednoduchého dva stĺpce layoutu.

Zostava sa skladá z hlavičky, čo je hlavný obsah stĺpca, a sidebar, a päty. A docela základné layout a vôbec ťažké vytvoriť s CSS raz viete, ako sa vyrovnať s nevyhnutným Internet Explorer chýb.

1. Základná štruktúra

V prvom rade sme vytvoriť základnú štruktúru 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 sme niektoré obsah jednotlivých sekcií:  > <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ázov </ h1> <h4> Napíšte svoj slogan </ h4> </ div> <div id = "sidebar"> <h2> Navigácia </ h2> <ul> <li> <a href = "#"> Domov </ 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 ľútosť sit amet, consectetuer dipiscing Elit.  Cum dis parturient Montes, nascetur ridiculus mus.  1. januára 2002 Lorem ipsum ľútosť sit amet, consectetuer adipiscing Elit.  Cum dis parturient Montes, nascetur ridiculus mus.  > <h2> Footer </h2> </div> </div> 1. januára 2002 </ p> </ div> <div id = "footer"> <h2> Footer </ h2> </ div> </ div>

2. CSS kód

Teraz vytvorte css kód:


 margin : 0 ; padding : 0 ; } body { font-size : 100 %; font-weight :normal ; font-family :Arial , Helvetica, sans-serif ; } * html, body { height : 100 %; min-height : 100 % /*firefox*/ ; } / * Štýl dva stĺpce layoutu * / * (margin: 0; padding: 0;) body (font-size: 100%; font-weight: normal; font-family: Arial, Helvetica, sans-serif;) * html, tela (height: 100%, min-height: 100% / * firefox * /;) 
 margin : 0 ; padding : 0 ; height : 100 %; } #page { margin : 0 auto ;  padding : 0 ;  width : 1009px ;  height : 100 %; } html, # page (margin: 0; padding: 0; výška: 100%;) # page (margin: 0 auto; padding: 0; šírka: 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; šírka: 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; zobrazenie: inline / internet explorer * * /; šírka: 200px, výška: 100%; background-farba: # cccccc;) # sidebar ul (list-style-type: none;) # sidebar ul li (zobrazenie: inline / * internet preskúmať * /;) # 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; šírka: 809px, výška: 100%; background: # dddddd) # Footer (margin: 0; padding: 0; display: block; šírka: 100%, výška: 50px; background: # eeeeee; overflow: hidden;)