Comment créer un site web tableless css modèle 5 de la colonne

Configuration de l'HTML

1. Construire un élément conteneur pour contenir tous vos colonnes dans le corps de votre document HTML. Placez ce conteneur div entre l'ouverture et le corps de fermeture tags:

   
   

   
   
   
   
   ...
   

2. Placez cinq autres divs intérieur du conteneur div: un pour chaque colonne. Donnez-leur la classe "colonne," que nous allons utiliser plus tard pour leur donner un style.

   "

3. Assurez-vous que vous avez une feuille de style référencé ou balise de style dans la section de la tête de votre document:

   
   

   OU

   
   

   La première méthode est recommandée, sauf si vous travaillez sur une page que vous ne pouvez pas changer à cet égard en raison des directives de l'entreprise.

Mettre en place le CSS

1. Appliquer le style de conteneur suivant dans la feuille de style ou entre les balises de style dans l'étape précédente.

   div # colonne contenant {
   largeur: 95%

   GO

   margin: 0 auto

   GO

   overflow: auto

   GO

   border: 1px solid # 000

   GO

   }

   Ce conteneur existe pour tenir les colonnes de sorte qu'ils peuvent être placés sur l'écran, par exemple, dans une mise en page centrée. Dans cet exemple, le récipient est la largeur de l'écran du navigateur, et centrée à 95%. Il ya une frontière de sorte qu'il est facile de voir où le conteneur se trouve sur la page. En utilisant une technique mise au point par l'expert du CSS Paul O'Brian et rendu populaire sur SitePoint.com, la "overflow: auto" règle oblige les colonnes à "clair" de sorte que le récipient ne tombe pas à hauteur d'entrée nulle.

2. Appliquer le style de colonne suivante sous le code dans l'étape précédente:

   div # colonne contenant div.column {
   largeur: 20%

   GO

   margin: 0

   GO

   padding: 0

   GO

   float: left

   GO

   }

   Ce code permet chaque colonne exactement un cinquième (20%) de la largeur du conteneur. Le "flotteur" déclaration rend les colonnes empiler de gauche à droite, la colonne de gauche est la première colonne qui apparaît dans votre code HTML.

3. Chargez le document dans votre navigateur préféré pour voir les résultats de votre code.