Retour à Tutoriels HTML

TUTORIAL: Multi-Column Layout Using CSS Float - Partie 1

  • digitalMedia
  • a.k.a. dM
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Déc 29, 2003
  • Messages: 5169
  • Loc: SC-USA
  • Status: Offline

Message Février 28th, 2008, 4:07 pm

Il s'agit d'un didacticiel niveau intermédiaire qui traite d'une méthode de mise en page multi-colonne. Elle suppose que le lecteur a une bonne connaissance et compréhension du langage HTML et CSS.

Introduction

Il était une fois, les développeurs web utilisé l'élément HTML <table> aux colonnes distribution de contenu. Cette pratique est maintenant reconnue comme lourd et pas très sémantique .

Ces jours-ci, au lieu d'utiliser <table>, nous utilisons l'élément <div> comme un contenant pour le contenu. Une fois que vous obtenez le coup de lui, en utilisant <div> devient très libérateur et réduit grandement la quantité de balisage nécessaires à la présentation d'une page.

Basic Structure de la page

Pour ce tutoriel, visaient un tracé qui a été trois colonnes de contenu avec des espaces en haut et en bas pour un en-tête et pied de page. La page sera une largeur fixe et sera également centrée sur la zone navigateurs l'affichage ( Figure 1 ).

Attachments:
target_layout.gif

Figure 1 - The intended design.



Eh bien commencer par une structure de page XHTML dans sa forme la plus simple. Dans l'en-tête de notre document, bien pointez vers un fichier externe CSS.

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>My Website</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
 
  <body>
  </body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3.   <head>
  4.     <title>My Website</title>
  5.     <link rel="stylesheet" type="text/css" href="style.css" />
  6.   </head>
  7.  
  8.   <body>
  9.   </body>
  10. </html>


Créer les conteneurs dans le balisage

Le premier <div> allaient créer dans le body de cette page contiendra la zone de contenu tout entier. Cela nous permet de positionner notre disposition au sein de la zone d'affichage, où que nous voulons. Eh bien faites cela, et tous les récipients, une identité unique en utilisant les attribut "id" de l'élément <div>.

Code: [ Select ]
<body>
  <div id="page_container"></div>
</body>
  1. <body>
  2.   <div id="page_container"></div>
  3. </body>


Maintenant, dans notre "page_container», ajouter bien des conteneurs pour les zones de contenu spécifique que nous l'avons mentionné auparavant. Encore une fois, d'identifier de façon unique chaque bien.
Code: [ Select ]
<body>
  <div id="page_container">
    <div id="header"></div>
    <div id="left_column"></div>
    <div id="center_column"></div>
    <div id="right_column"></div>
    <div id="footer"></div>
  </div>
</body>
  1. <body>
  2.   <div id="page_container">
  3.     <div id="header"></div>
  4.     <div id="left_column"></div>
  5.     <div id="center_column"></div>
  6.     <div id="right_column"></div>
  7.     <div id="footer"></div>
  8.   </div>
  9. </body>


À ce stade, si nous devions rendre ce document, nous ne serions pas en mesure de voir quelque chose. Ajoutons-en quelques contenu mannequin afin que nous puissions voir whats happening. Eh bien utiliser un schéma typique de structuration de l'information y compris les titres, sous-titres, paragraphes et d'un menu.

Code: [ Select ]
<body>
<div id="page_container">
    <div id="header">
        <h1>My Web Site</h1>
    </div>
    <div id="left_column">
        <ul>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
        </ul>
    </div>
    <div id="center_column">
        <h2>My Document</h2>
        <p>Vivamus elementum ligula gravida neque. Cras adipiscing ligula non turpis. Sed cursus scelerisque libero. Sed at arcu. Vestibulum metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus id turpis. Sed purus. Integer eget ligula elementum felis aliquet rhoncus. Morbi augue.</p>
    </div>
    <div id="right_column">
        <h3>Sidebar</h3>
        <p>Vivamus non urna eget nisi placerat vehicula. Vivamus semper molestie lacus. Proin a tellus et massa placerat ultricies. Curabitur viverra convallis felis.</p>
    </div>
    <div id="footer">
        <p>Copyright Information</p>
    </div>
</div>
</body>
  1. <body>
  2. <div id="page_container">
  3.     <div id="header">
  4.         <h1>My Web Site</h1>
  5.     </div>
  6.     <div id="left_column">
  7.         <ul>
  8.             <li><a href="#">Menu 1</a></li>
  9.             <li><a href="#">Menu 2</a></li>
  10.             <li><a href="#">Menu 3</a></li>
  11.         </ul>
  12.     </div>
  13.     <div id="center_column">
  14.         <h2>My Document</h2>
  15.         <p>Vivamus elementum ligula gravida neque. Cras adipiscing ligula non turpis. Sed cursus scelerisque libero. Sed at arcu. Vestibulum metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus id turpis. Sed purus. Integer eget ligula elementum felis aliquet rhoncus. Morbi augue.</p>
  16.     </div>
  17.     <div id="right_column">
  18.         <h3>Sidebar</h3>
  19.         <p>Vivamus non urna eget nisi placerat vehicula. Vivamus semper molestie lacus. Proin a tellus et massa placerat ultricies. Curabitur viverra convallis felis.</p>
  20.     </div>
  21.     <div id="footer">
  22.         <p>Copyright Information</p>
  23.     </div>
  24. </div>
  25. </body>


Nos balisage est maintenant terminée.

Ajout de styles de base

Créons un ensemble de base de sélecteurs et de définitions dans notre fichier CSS pour les éléments intrinsèques HTML et pour chacun des contenants. Nous voulons supprimer les marges inhérentes et le rembourrage de tous les éléments, enlever les balles des <ul> qui utilisaient pour notre menu, et permettent pour certaines couleurs d'arrière-plan simple dans nos domaines de contenu pour la clarté visuelle.

Code: [ Select ]
/* Intrinsic HTML Elements */
body{margin:0;padding:0;}
div{margin:0;padding:0;}
h1{margin:0;padding:0;}
h2{margin:0;padding:0;}
h3{margin:0;padding:0;}
p{margin:0;padding:0;}
ul{margin:0;padding:0;}
li{list-style-type:none;}
 
/* Uniquely Identified Containers */
#page_container{}
#header{background:#999;}
#left_column{background:#CCC;}
#center_column{background:#ECECEC;}
#right_column{background:#CCC;}
#footer{background:#999;}
  1. /* Intrinsic HTML Elements */
  2. body{margin:0;padding:0;}
  3. div{margin:0;padding:0;}
  4. h1{margin:0;padding:0;}
  5. h2{margin:0;padding:0;}
  6. h3{margin:0;padding:0;}
  7. p{margin:0;padding:0;}
  8. ul{margin:0;padding:0;}
  9. li{list-style-type:none;}
  10.  
  11. /* Uniquely Identified Containers */
  12. #page_container{}
  13. #header{background:#999;}
  14. #left_column{background:#CCC;}
  15. #center_column{background:#ECECEC;}
  16. #right_column{background:#CCC;}
  17. #footer{background:#999;}


Avec le code HTML et CSS en place, notre page devrait rendre comme le montre la Figure 2 . Notez que notre document n'a de sens "sémantique", semblable à un document imprimé sur papier. Le site Web a un titre, il ya un menu / table-de-contenu pour le site, les pages ont été consultées sur le Site a un titre, et il ya un heirarchy clair / structure d'information auxiliaire et tertiaire. La structure de cet arrangement devrait toujours être fondée sur les besoins de l'emplacement et / ou thats page en cours de création.

Attachments:
target_layout_02.gif

Figure 2 - Semantic markup with minimal styling. (Firefox 2.0.0.12)



Ajout de plus de styles - Largeurs, les flotteurs, et Clear

Tout d'abord, permet de définir une largeur et la position pour notre maquette en ajoutant des définitions de notre #page_container sélecteur dans notre fichier CSS. Là encore, l'imbrication de tous les contenus dans ce conteneur global nous permet une grande flexibilité.

Code: [ Select ]
#page_container{width:760px;margin:0 auto;}


Maintenant nous entrons dans le cœur de la création d'un "float" régime. Pour chaque <div> que nous allons utiliser comme une colonne, et d'ajouter deux définitions dans le code CSS, une largeur et un flotteur.

Notez que la somme des largeurs de ces trois éléments est égale à la largeur de la #page_container élément.

Code: [ Select ]
#left_column{width:180px;float:left;background:#CCC;}
#center_column{width:400px;float:left;background:#ECECEC;}
#right_column{width:180px;float:left;background:#CCC;}
  1. #left_column{width:180px;float:left;background:#CCC;}
  2. #center_column{width:400px;float:left;background:#ECECEC;}
  3. #right_column{width:180px;float:left;background:#CCC;}


Quand nous additionnons ces définitions, nous avons modifié les postions et les largeurs des éléments en colonne dans le rendu de flux. Pour revenir à la normale rendre débit dans le pare pas le contenant, devront aussi "clair" de l'élément suivant les effets du "float".

Code: [ Select ]
#footer{clear:both;background:#999;}


Nos trois colonnes maintenant aligner de gauche à droite et la plus longue colonne, dans ce cas, le right_column, pousse le pied de page bas de la page, dans le Pare ne contenant ( Figure 3 ).

Attachments:
target_layout_04.gif

Figure 3 - The final render of the float scheme with minimal styling. (Firefox 2.0.0.12)



Thats it! Thats how it works. Cette méthode fonctionnera dans tous les navigateurs du moment et se rendre plus ou moins identique.

Conclusion

Maintenant que weve a organisé un système de conteneurs, étaient libres de commencer à l'insertion de données et d'étoffer nos styles. On pourrait commencer ce processus en ajoutant un peu d'espace négatif autour de nos éléments textuels. Parce que comptaient sur une feuille de style pour définir notre présentation visuelle, on peut facilement arriver à cet effet par la simplification de certaines de nos définitions pour les éléments intrinsèques HTML tout en ajoutant un peu de rembourrage.

Code: [ Select ]
h1, h2, h3, p{margin:0;padding:10px;}


Une des premières choses que nous constatons est que les colonnes ne sont pas tous égaux en longueur et donc il ya des lacunes ci-dessous les plus courtes. Dans une application réelle de cette technique, ce problème visuel peut être facilement surmontées.

[url=http://www.ozzu.com/html-tutorials/tutorial-multi-column-layout-using-css-float-part-t85731.html]Aller à la partie 2