Simple css layout 2 colonnes, css, design, css layout |

Simple 2 colonne css layout

Il s'agit d'un tutoriel sur comment utiliser les CSS pour créer un simple en deux colonnes.

La présentation se compose d'un en-tête, une colonne de contenu, une barre latérale, et un pied de page. Une jolie mise en page de base, et pas du tout difficile de créer avec des CSS, une fois que vous savez comment faire face à l'inévitable Internet Explorer bugs.

1. La structure de base

Tout d'abord, nous créons de la structure HTML de base:


 > <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> 
  Après cela, nous avons mis un peu de contenu dans les différentes sections:  > <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> Nom de l'entreprise </ h1> <h4> Tapez votre slogan </ h4> </ div> <div id = "sidebar"> <h2> Navigation </ h2> <ul> <li> <a href = "#"> Accueil </ a> </ li> <li> <a href = "#"> A propos de nous </ a> </ li> < li> <a href = "#"> Srevices </ a> </ li> <li> <a href = "#"> Contact </ a> </ li> <li> <a href = "#"> Plan du site </ a> </ li> </ ul> </ div> <div id = "main"> <h2> Contenu </ h2> <p> Lorem ipsum dolor sit amet, consectetuer dipiscing elit.  Cum dis parturiente montes, nascetur ridiculus mus.  Janvier 1, 2002 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Cum dis parturiente montes, nascetur ridiculus mus.  > <h2> Footer </h2> </div> </div> Le 1 er janvier 2002 </ p> </ div> <div id = "footer"> <h2> pied de page </ h2> </ div> </ div>

2. Code Css

Maintenant, nous allons créer le code css:


  / * à deux colonnes * / 
  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  corps 
  ( 
  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; display: block; background-color: # eeeeee;) # sidebar (float: left; margin: 0; padding: 0; visualisation: inline / * Internet Explorer * /; width: 200px; height: 100%; background-color: # cccccc;) # sidebar ul (list-style-type: none;) # sidebar ul li (display: inline / * internet explorer * /;) # 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;)