Simple 2 kolonna css tqassim, css, disinn, css tqassim |

Simple 2 kolonna css layout

Din hija tutorja dwar kif tuża CSS li jinħoloq sempliċi żewġ kolonna tqassim.

Il-format jikkonsisti minn header, a kontenut prinċipali kolonna, a sidebar, u footer. A pretty-tqassim bażiku, u mhux fil kollha diffiċli li jinħolqu mal CSS darba tafu kif tittratta l-inevitabbli Internet Explorer bugs.

1. Istruttura bażika

First of all, we joħolqu l-istruttura bażika 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> 
  Wara li, nitfgħu xi kontenut fil-taqsimiet differenti:  > <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> Company Name </ h1> <h4> Tip tiegħek slogan </ H4> </ div> <div id = "sidebar"> <h2> Navigazzjoni </ h2> <ul> <li> <a href = "#"> Home </ a> </ li> <li> <a href = "#"> About us </ a> </ li> < li> <a href = "#"> Srevices </ a> </ li> <li> <a href = "#"> Kuntatt </ a> </ li> <li> <a href = "#"> Sitemap </ a> </ li> </ ul> </ div> <div id = "main"> <h2> Content </ h2> <p> Lorem ipsum id-disposizzjonijiet ta sit amet, consectetuer dipiscing elit.  Cum diż parturient Montes, nascetur ridiculus mus.  Jannar 1, 2002 id-disposizzjonijiet ta Lorem ipsum sit amet, consectetuer adipiscing elit.  Cum diż parturient Montes, nascetur ridiculus mus.  > <h2> Footer </h2> </div> </div> Jannar 1, 2002 </ p> </ div> <div id = "footer"> <h2> Footer </ h2> </ div> </ div>

2. Css Kodiċi

Now we joħolqu css code:


  / * stil żewġ kolonna layout * / 
  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  ġisem 
  ( 
  font-size: 100%; 
  font-weight: normal; 
  ; font-familja: 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: imbagħad (text-decoration: jenfasizzaw) 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; wisa ': 100%; għoli: 151px; display: block; background-color: # eeeeee;) (# sidebar float: xellug; margin: 0; padding: 0; display: inline / * Internet Explorer * /; width: 200px; height: 100%; background-color: # cccccc;) # (lista sidebar ul-style-type: none;) # sidebar ul li (display: inline / * internet jesploraw * /;) # sidebar ul li a (padding: 3px 4px; display: block; marġini: 0px 0 0 16px; text-decoration: none; color: #) 0000E8 # sidebar ul li a: imbagħad jerġgħu (color: # CC0000) # prinċipali (margin: 0; padding: 0; float: xellug; display: block; width: 809px; height: 100%; background: # dddddd) # footer (margin: 0; padding: 0; display: block; width: 100%; għoli: 50px; background: # eeeeee; overflow: moħbija;)