Simpelt 2 kolonne css layout, css, design, css layout |

Simpelt 2 kolonne css layout

Dette er en tutorial om hvordan man bruger CSS til at skabe en enkel to kolonne layout.

Indretningen består af en overskrift, en hovedindhold kolonne, en sidebjælke, og en sidefod. Et ganske grundlæggende layout, og slet ikke svært at skabe med CSS, når du ved, hvordan man skal håndtere den uundgåelige Internet Explorer bugs.

1. Grundlæggende struktur

Først og fremmest, vi skaber den grundlæggende HTML-struktur:


 > <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> 
  Efter, at vi lægger noget af indholdet i de forskellige sektioner:  > <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> Firmanavn </ h1> <h4> Skriv dit slogan </ h4> </ div> <div id = "sidebar"> <h2> Navigation </ h2> <ul> <li> <a href = "#"> Hjem </ a> </ li> <li> <a href = "#"> Om os </ 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> indhold </ h2> <p> lorem ipsum dolor sit amet, consectetuer dipiscing Elit.  Cum dis parturient Montes, nascetur ridiculus mus.  1. januar 2002 lorem ipsum dolor sit amet, consectetuer adipiscing Elit.  Cum dis parturient Montes, nascetur ridiculus mus.  > <h2> Footer </h2> </div> </div> 1. januar 2002 </ p> </ div> <div id = "footer"> <h2> Footer </ h2> </ div> </ div>

2. CSS koden

Nu skal vi skabe css kode:


 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*/ ; } / * style to kolonne layout * / * (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 * /;) 
 margin : 0 ; padding : 0 ; height : 100 %; } #page { margin : 0 auto ;  padding : 0 ;  width : 1009px ;  height : 100 %; } html, # page (margin: 0; padding: 0; height: 100%;) # page (margin: 0 auto; padding: 0; width: 1009px; height: 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; width: 1009px; height: 100%; ) # header (margin: 0; padding: 0; width: 100%; height: 151px; sprogudgaven: blok; background-color: # eeeeee;) # sidebar (float: left; margin: 0; padding: 0; sprogudgaven: inline / * Internet Explorer * /; width: 200px; height: 100%; background-color: # cccccc;) # sidebar ul (list-style-type: none;) # sidebar ul li (display: inline / * internet udforske * /;) # sidebar ul li a (padding: 3px 4px; sprogudgaven: blok; margin: 0px 0 0 16px; text-decoration: none; color: # 0000E8) # sidebar ul li a: hover (color: # cc0000) # main (margin: 0; padding: 0; float: left; sprogudgaven: blok; width: 809px; height: 100%; background: # dddddd) # footer (margin: 0; padding: 0; sprogudgaven: blok; bredde: 100%; height: 50px; background: # eeeeee; overflow: skjulte;)