Mises en page de site web à une colonne simples en CSS
Dans cette leçon, nous allons nous entraîner à créer des mises en page de site web à une colonne simples. Faisons, par exemple, une mise en page comme celle-ci :
Passons à la mise en œuvre. Chaque mise en page
commence généralement par une div générale appelée
wrapper, contenant tout le reste du site :
<div id="wrapper">
</div>
Dans notre cas, le wrapper sera centré sur l'écran :
#wrapper {
width: 800px;
margin: 50px auto;
}
Il aura également une bordure :
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Créons maintenant la structure principale de la page. Elle sera constituée d'un menu et du contenu principal :
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Ajoutons le contenu de nos blocs :
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
Nous pouvons maintenant ajouter des styles à nos blocs. Ajoutons un style au menu :
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
Et maintenant, ajoutons des styles aux éléments de contenu :
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
Nous pouvons maintenant assembler tout le code :
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
Conseil 1
Il est plus pratique d'ajouter des marges de haut en bas.
Par exemple, nous avons un menu et un contenu,
et entre eux - un espace vide. Évidemment,
cet espace peut être créé par la marge inférieure
du menu, la marge supérieure du contenu,
ou leur influence simultanée. Dans ce cas,
il est préférable de définir une marge inférieure au menu, et au contenu
de supprimer le padding et la margin par défaut
pour le h1.
Conseil 2
Les éléments enfants ne doivent pas former d'espace entre
les éléments parents. Par exemple, nous avons un menu.
La marge inférieure de ce menu peut être formée
soit par la margin de la div avec le menu, soit par la margin
des liens. Il est préférable de choisir la première option, car
les liens ne doivent pas agir au-delà de leur parent.
Conseil 3
Supposons qu'il y ait un espace entre deux éléments
et que dans ce cas, visuellement, il n'y ait pas de différence
entre choisir pour l'espace - margin ou padding.
Dans ce cas, choisissez margin, car
c'est lui qui est destiné à créer des espaces entre
les éléments.
