La mise en forme CSS nécessite que vous pensiez à la mise en page de votre site Web dans son ensemble, puis que vous preniez les morceaux et que vous les assembliez. Apprenez à créer une mise en page simple à 3 colonnes avec CSS.
01 sur 09Dessinez votre mise en page
Vous pouvez dessiner votre mise en page sur papier ou dans un programme graphique. Si vous avez déjà une conception filaire ou encore plus étendue à l'esprit, simplifiez-la aux boîtes de base qui composent le site. Cette conception qui accompagne cet article comporte trois colonnes dans la zone de contenu principale, ainsi qu'un en-tête et un pied de page. Si vous regardez de plus près, vous pouvez voir que les trois colonnes ne sont pas égales en largeur.
Une fois votre mise en page établie, vous pouvez commencer à penser aux dimensions. Cet exemple de conception va avoir les dimensions de base suivantes:
- Pas plus de 900 pixels de large
- Gouttière 20 px à gauche
- 10 px entre les colonnes et les lignes
- Colonnes d'une largeur de 250 px, 300 px et 300 px
- La rangée supérieure mesure 150px
- La rangée du bas mesure 100px
Écrire en HTML / CSS de base et créer un élément de conteneur
Puisque cette page sera un document HTML valide, commencez avec un conteneur HTML vide.
Ajoutez les styles CSS de base pour mettre à zéro les marges, les bordures et les marges de page. Bien qu'il existe d'autres styles CSS standard pour les nouveaux documents, ces styles sont le minimum dont vous avez besoin pour obtenir une mise en page propre. Ajoutez-les à la tête de votre document:
Pour commencer à construire la mise en page, insérez un élément conteneur. Il arrive parfois que vous puissiez supprimer le conteneur ultérieurement, mais pour la plupart des dispositions à largeur fixe, l'utilisation de l'élément conteneur facilite la gestion sur différents navigateurs Web. Donc, dans le corps, mettez ceci: Et dans la feuille de style CSS, mettez: Le conteneur définit la largeur du contenu de la page Web, ainsi que les marges autour de l'extérieur et le remplissage à l'intérieur. Pour ce document, le conteneur a une largeur de 870px avec une gouttière de 20 pixels sur la gauche. La gouttière est configurée avec un style de marge, mais le remplissage du conteneur est mis à zéro pour éviter que des éléments soient aussi larges que le conteneur. #récipient { largeur: 870px; marge: 0 0 0 20px; / * en haut à droite en bas à gauche * / rembourrage: 0; } Si vous enregistrez votre document maintenant, il sera difficile de voir le conteneur car il ne contient rien. Si vous ajoutez du texte de substitution, vous pourrez voir l'élément conteneur plus clairement. La manière dont vous décidez de styler la ligne d'en-tête dépend beaucoup de son contenu. Si la ligne d'en-tête va simplement contenir un logo et un titre, utilisez une balise de titre ( Le code HTML de la ligne d'en-tête se situe en haut du conteneur et se présente comme suit: Ensuite, pour définir les styles, une bordure rouge a été ajoutée en bas de manière à ce que vous puissiez voir où elle se termine, les marges et le remplissage ont été mis à zéro, la largeur définie à 100% et la hauteur à 150px: #container h1 { marge: 0; rembourrage: 0; largeur: 100%; hauteur: 150px; float: gauche; border-bottom: # c00 solide 3px; } N'oubliez pas de faire flotter cet élément avec le flottant: left; propriété. La clé pour écrire des mises en forme CSS est de tout faire flotter, même les choses qui ont la même largeur que le conteneur. De cette façon, vous savez toujours où les éléments se trouveront sur la page. Un sélecteur de descendant CSS appliquait les styles uniquement aux éléments H1 contenus dans l'élément #container. Lorsque vous créez une mise en page à trois colonnes avec CSS, vous devez la diviser en groupes de deux. Donc, pour cette mise en page à trois colonnes, les colonnes du milieu et de droite sont regroupées et placées à côté de la colonne de gauche dans une mise en page à deux colonnes où la colonne de gauche mesure 250px de large et la colonne de droite 610px de large (300 pour les deux colonnes). , plus 10px pour la gouttière entre eux). Le HTML ressemble à ceci: Ut aliquip ex ea commodo conséquat. Velit esse cillum dolore ut enim ad minim veniam, lorem ipsum dolor sit amet. En répréhender, il est en volupté quis nostrud exercice eu fugiat nulla pariatur. Velit esse cillum dolore ullamco laboris nisi ut aliquip ex ea commodo conséquat. Tout en minimisant le risque, il est imposé temporairement à Ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Le texte de substitution dans les colonnes les rend plus visibles lors des tests. Le CSS ressemble à ceci: #container # col1 { largeur: 250px; float: gauche; } #container # col2outer { largeur: 610px; Flotter à droite; marge: 0; rembourrage: 0; } La colonne de gauche est flottée à gauche, tandis que l'autre est flottée à droite. Étant donné que la largeur totale des deux colonnes est de 860 px, il existe une gouttière de 10 px entre elles. Pour créer les trois colonnes, ajoutez deux div à l'intérieur de la deuxième colonne plus large, tout comme vous avez ajouté 2 div à l'intérieur de la colonne conteneur à la dernière étape. Le HTML ressemble à ceci: Tout en minimisant le risque, il est imposé temporairement à Ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Nam libero tempore, quia voluptas sont assis aspernatur dicta sunt explicabo.Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. Itaque earum rerum hic tenetur un sapiente delectus, il est perspicace et indiscret, il est incarcéré, mais il est incohérent. Et le CSS ressemble à ceci: # col2outer # col2mid { largeur: 300px; float: gauche; } # col2outer # col2side { largeur: 300px; Flotter à droite; } Étant donné que ces deux boîtes de 300px de large sont à l’intérieur d’une boîte de 610px de large, il y aura encore une gouttière de 10px entre elles. Maintenant que le reste de la page est stylé, vous pouvez l'ajouter dans le pied de page. Utilisez une dernière div avec un identifiant de "pied de page" et ajoutez du contenu afin que vous puissiez le voir. Vous pouvez également ajouter une bordure en haut pour que vous sachiez où elle commence. Le HTML: Le CSS: #container #footer {
float: gauche;
largeur: 870px;
border-top: # c00 solide 3px;
} 08 de 09 Maintenant que la mise en page est terminée, vous pouvez commencer à ajouter vos propres styles et contenus personnels. N'oubliez pas que les bordures de l'en-tête et du pied de page ont été ajoutées pour afficher les sections de présentation, pas spécifiquement pour la conception. Voici le document entier, HTML et CSS: Ut aliquip ex ea commodo conséquat. Ut enim ad minim veniam. Nam libero tempore. Style du conteneur
Utiliser une étiquette de titre pour l'en-tête
) est plus logique que d'utiliser un
Ma rangée d'en-tête
Pour obtenir trois colonnes, commencez par créer deux colonnes
Ajouter deux colonnes à l'intérieur de la seconde colonne
Ajouter dans le pied de page
Ajoutez vos styles et contenu personnels
Le HTML / CSS final
Ma rangée d'en-tête
