How to Create CSS Drie Column Layout, CSS, Tutorials, Design Resources

How to Create CSS Drie Column Layout

Dit is een tutorial over het gebruik van CSS om een eenvoudige drie kolommen.
De lay-out bestaat uit een header, een inhoud kolom, een sidebar en een voettekst. Een mooie basis lay-out, en helemaal niet moeilijk te maken met CSS als je eenmaal weet hoe ze moeten omgaan met de onvermijdelijke Internet Explorer bugs.

STREP eerst: we maken een eenvoudige HTML-structuur


 > <div id = "header" > <div id = "sub-header" > </div> </div> <div id = "nevigation" > <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About us </a> </li> <li> <a href = "#" > Services </a> </li> <li> <a href = "#" > Products </a> </li> <li> <a href = "#" > Sitemap </a> </li> <li> <a href = "#" > Contact Us </a> </li> </ul> </div> <div id = "content" > <div id = "sub-content" > <div id = "column1" > <h2> About Us </h2> <p> Lorem ipsum dolor sit amet, consectetur                    adipiscing elit. <div id = "page"> <div id = "header"> <div id = "sub-header"> </ div> </ div> <div id = "nevigation"> <ul> <li> <a href = "#"> Home </ a> </ li> <li> <a href = "#"> Over ons </ a> </ li> <li> <a href = "#"> Diensten </ a> </ li> <li> <a href = "#"> Producten </ a> </ li> <li> <a href = "#"> Sitemap </ a> </ li> <li> < een href = "#"> Contact </ a> </ li> </ ul> </ div> <div id = "content"> <div id = "sub-content"> <div id = "kolom1" > <h2> Over ons </ h2> <p> Lorem Ipsum dolor sit Amet, consectetur adipiscing elit.  Ut viverra dui neg risus. In eu neque een tortor lacinia rhoncus.  In interdum placerat purus.  Lorem Ipsum dolor sit Amet, consectetur adipiscing elit. Suspendisse potenti.Lorem Ipsum dolor sit Amet, </ p> <p> Lorem Ipsum dolor sit Amet, consectetur adipiscing elit.  Ut viverra dui neg risus. In eu neque een tortor lacinia rhoncus.  In interdum placerat purus.  > Readmore </a> </p> </div> <div id = "column2" > <h2> Services </h2> <p> Lorem ipsum dolor sit amet, consectetur                    adipiscing elit. Lorem Ipsum dolor sit Amet, consectetur adipiscing elit. Suspendisse potenti.Lorem Ipsum dolor sit Amet, <a href = "#"> Readmore </ a> </ p> </ div> <div id = "column2"> <h2 > Diensten </ h2> <p> Lorem Ipsum dolor sit Amet, consectetur adipiscing elit.  Ut viverra dui neg risus. In eu neque een tortor lacinia rhoncus.  In interdum placerat purus.  Lorem Ipsum dolor sit Amet, consectetur adipiscing elit. Suspendisse potenti.Lorem Ipsum dolor sit Amet, </ p> <p> Lorem Ipsum dolor sit Amet, consectetur adipiscing elit.  Ut viverra dui neg risus. In eu neque een tortor lacinia rhoncus.  In interdum placerat purus.  > Readmore </a> </p> </div> <div id = "column3" > <h2> Contact Detail </h2> <p> Lorem ipsum dolor sit amet, consectetur                    adipiscing elit. Lorem Ipsum dolor sit Amet, consectetur adipiscing elit. Suspendisse potenti.Lorem Ipsum dolor sit Amet, <a href = "#"> Readmore </ a> </ p> </ div> <div id = "column3"> <h2 > Contact Detail </ h2> <p> Lorem Ipsum dolor sit Amet, consectetur adipiscing elit.  Ut viverra dui neg risus. In eu neque een tortor lacinia rhoncus.  In interdum placerat purus.  Lorem Ipsum dolor sit Amet, consectetur adipiscing elit. Suspendisse potenti.Lorem Ipsum dolor sit Amet, </ p> <p> Lorem Ipsum dolor sit Amet, consectetur adipiscing elit.  Ut viverra dui neg risus. In eu neque een tortor lacinia rhoncus.  In interdum placerat purus.  > Readmore </a> </p> </div> </div> </div> <div id = "bottom" > <div id = "sub-bottom" > <span> Copyright &copy; Developer's Paradise                    Designed By Developer's Paradise </span> </div> </div> </div> Lorem Ipsum dolor sit Amet, consectetur adipiscing elit. Suspendisse potenti.Lorem Ipsum dolor sit Amet, <a href = "#"> Readmore </ a> </ p> </ div> </ div> </ div> <div id = "bottom"> <div id = "sub-bottom"> <span> Copyright © Developer's Paradise Designed By Developer's Paradise </ span> </ div> </ div> </ div>

Tweede stap: we maken een fundamentele css structuur


 ; padding : 0 ; } h1,h2,h3,h4 { font : 100 % "Georgia" , Times New Roman, Times, serif ; 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 %; } h4 { font-size : 120 %;text-align :center ; color : # 848484 ; } ul,ol,li { list-style-type :none ; } a { text-decoration :none ; color : #00CCFF } a :hover { text-decoration :underline ; } p { color : #fff ; font-size : 12px ; font-family : "Georgia" , Times New Roman, Times, serif ; color : #fff ; padding : 0 0 10px 0 ; line-height : 22px ; } * (Margin: 0; padding: 0;) H1, H2, H3, H4 (font: 100% "Georgië", Times New Roman, Times, serif; color: # FFF; text-transform: hoofdletters; letter-spacing: 2px) H1 (font-size: 400%; text-align: center; padding: 35px 0 0 0;) H2 (font-size: 150%;) h3 (font-size: 137%;) h4 (font-size : 120%; text-align: center; color: # 848484;) ul, ol, li (list-style-type: none;) a (text-decoration: none; color: # 00CCFF) a: hover (text - decoration: underline;) P (color: # FFF; font-size: 12px; font-family: "Georgië", Times New Roman, Times, serif; color: # FFF; padding: 0 0 10px 0; line-height: 22px;) 
  % normal "Georgia" , Times New Roman, Times, serif ; background : # 191919 ; } body (font: 100% normaal "Georgië", Times New Roman, Times, serif; achtergrond: # 191919;) 
 background : # 323232 ; width : 971px ; margin : 0 auto ; height : 100 %; border-left : 1px solid # 353535 ; border-right : 1px solid # 353535 ; padding : 12px 0 12px 0 ; } # page (background: # 323232; width: 971px; margin: 0 auto; height: 100%; border-left: 1px solide # 353535; grens-rechts: 1px solide # 353535; padding: 12px 0 12px 0;) 
  margin : 0px auto 0 auto ; width : 943px ; background : # 222 ; border : 1px solid # 424242 ; } #sub-header { margin : 1px ; padding : 1px ; background : # 333 ; overflow :hidden ; height : 150px ; } # header (margin: 0px auto 0 auto; width: 943px; achtergrond: # 222; grens: 1px vaste # 424242;) # sub-header (margin: 1px; padding: 1px; achtergrond: # 333; overflow: hidden; hoogte : 150px;) 

 margin : 5px auto 0 auto ; width : 943px ; background : # 222 ; border : 1px solid # 424242 ; } #nevigation ul { margin : 1px ; padding : 0px ; background : # 333 ; overflow :hidden ; } #nevigation li { display : inline ; /*ie*/ } #nevigation li a { float :left ; margin : 0 ; padding : 7px 10px ; display : block ; color : #fff ; text-transform :uppercase ; letter-spacing : 2px ; } #nevigation li a :hover { background : # 424242 ; text-decoration :none ; color : #00CCFF ; } # nevigation (margin: 5px auto 0 auto; width: 943px; achtergrond: # 222; grens: 1px vaste # 424242;) # nevigation ul (margin: 1px; padding: 0px; achtergrond: # 333; overflow: hidden;) # nevigation li (display: inline; / * ie * /) # nevigation li a (float: links; margin: 0; padding: 7px 10px; display: block; color: # FFF; text-transform: hoofdletters; letter-spacing: 2px;) # nevigation li a: hover (background: # 424242; text-decoration: none; color: # 00CCFF;) 
 width : 943px ; margin : 5px auto 0 auto ; background : # 222 ; border : 1px solid # 424242 ; } #sub-content { margin : 1px ; padding : 1px ; background : # 333 ; overflow :hidden ; } # content (width: 943px; margin: 5px auto 0 auto; achtergrond: # 222; grens: 1px vaste # 424242;) # sub-content (margin: 1px; padding: 1px; achtergrond: # 333; overflow: hidden;) 
 width : 302px ; background : # 424242 ; margin : 0 1px 0 0 ; padding : 5px ; float :left ; } #column2 { width : 302px ; background : # 424242 ; margin : 0 1px 0 0 ; padding : 5px ; float :left ; } #column3 { width : 303px ; background : # 424242 ; margin : 0 ; padding : 5px ; float :left ; } # kolom1 (width: 302px; achtergrond: # 424242; margin: 0 1px 0 0; padding: 5px; float: links;) # kolom2 (width: 302px; achtergrond: # 424242; margin: 0 1px 0 0; padding: 5px ; float: links;) # kolom3 (width: 303px; achtergrond: # 424242; margin: 0; padding: 5px; float: links;) 
 width : 943px ; margin : 5px auto 0 auto ; background : # 222 ; border : 1px solid # 424242 ; } #sub-bottom { margin : 1px ; padding : 20px 0 0 0px ; background : # 333 ; overflow :hidden ; height : 50px ; color : #fff ; text-align :center ; text-transform :uppercase ; letter-spacing : 2px ; } # bottom (width: 943px; margin: 5px auto 0 auto; achtergrond: # 222; grens: 1px vaste # 424242;) # sub-bottom (margin: 1px; padding: 20px 0 0 0px; achtergrond: # 333; overflow: verborgen; height: 50px; color: # FFF; text-align: center; text-transform: hoofdletters; letter-spacing: 2px;)

Ten slotte hebben we drie kolom css opmaak. Voorbeeld bekijken en downloaden dit bestand.

Ik zou dankbaar zijn als u zou kunnen nemen van een tweede helpen bevorderen van mijn blog en delen deze link met een van uw begunstigde networking sites die gebruik maken van de link hieronder ...

Share & Support: