Mise à jour du gabarit CSS classique avec entête, pied de page et alignement de colonnes.
- Exemple simple et fluide à 3 colonnes
- Adapté en 2 colonnes sous les 800 pixels
- Puis en une seule colonne à partir de 600 pixels de large.
Il suffit de changer la valeur de la largeur du « conteneur » pour un design fixe (max-width) ou fluide (100%). Ce qui assure de préserver la fluidité (voir commentaires). Si le HTML5 n’est qu’une traduction du bon vieux DIV et la fluidité qu’un pourcentage, le secret des colonnes reste le même depuis plus d’une décennie. Un banal alignement à gauche float:left, tant des bandes que du contenu. Et bien sûr en respectant les dimensions au pixel près sinon c’est le saut de ligne automatique! C’est-à-dire en s’assurant que la somme des largeurs ne dépasse pas celle de la largeur disponible en calculant les marges (padding) et bordures...
Conteneur
Bootstrap l’appelle son « container » ou « container-fluid » (pleine largeur). Et la W3C n’a pas encore inventé de balise <container>. Historiquement pratique pour régler certains cas d’incompatibilité, il est de moins en mois utile. Notez qu’il ne gène en rien la structure tout en permettant d’encapsuler le contenu dans une largeur fixe ou maximum et bien centré dans la page. Raison de son usage rependu dans les gabarits industriels. À votre guise donc, mais personnellement, et particulièrement dans le cas d’une largeur dite « fluide » (100%), je n’utilise plus de conteneur. KISS (Keep it Simple, Stupid) comme on dit. Alors l’arborescence avec les nouvelles balises <header> <main> <aside> <footer> en terme HTML5 :
<body> <div class="conteneur"> <header/> <aside/> <main/> <aside/> <footer/> </div> </body>
Quatre trente sous pour une piastre! Mais c’est clean, pour rester sémantique! Quoi dire de plus, le code parle de lui-même. N’est-ce pas simple et merveilleux. On a donc un entête, une bande à gauche et à droite, un contenu et le pied de page. À l’aide de balises HTML5 à jour. En principe, il n’y manque que son style CSS mais l’ordre est déjà important. Par défaut si l’entête se place tout en haut à gauche en priorité, l’effet de cascades provoqué par l’aspect « adaptatif » (selon les dimensions de la fenêtre du navigateur) place les éléments un en dessous des autres en partant du haut (!). Pourquoi c’est important? Pour placer la bande de droite naturellement et automatiquement sous le contenu lors d’une consultation avec un mobile par exemple. Contrairement au « Flex » en pure CSS, il n’y a pas d’attribut pour définir l’ordre d’affichage de ces éléments HTML.
Exemple deux colonnes :
<body>
<div class="conteneur">
<header>
<p>En-tête (header)</p>
</header>
<main>
<p>Contenu (main)</p>
</main>
<aside>
<p>Côté droit (aside)</p>
</aside>
<footer>
<p>Pied de page (footer)</p>
</footer>
</div>
</body>
On est loin des colonnes encore une fois mais sans une seul ligne CSS, le HTML suffit à lui seule à se présenter sur un mobile. Et donc pour en venir avec les colonnes, voilà enfin la feuille de styles CSS :
<style type="text/css">
/* Définition des balises HTML5 pour vieux navigateurs */
aside, footer, header, main {display: block;}
.conteneur {
/* Largeur Fluide et liquide, changer le 1000px par 100% */
max-width:1000px;
/* Centre le conteneur dans la page */
margin:20px auto;
}
main {
float:left;
width:60%;
}
aside {
float:left;
width:40%;
}
footer {
/* forcer l’affichage sous le contenu et la colonne */
clear:both;
}
</style>
Structure adaptative avec le sélecteur @media.
La structure adaptative se résume à modifier la largeur des éléments selon la largeur de la fenêtre. Essentiellement a 100% lorsque la fenêtre est plus petite que 600 pixels.
<style type="text/css"> @media all and (max-width: 600px) { main { width:100%; } aside { width:100%; } } </style>
Exemple complet trois colonnes :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exemple de structure CSS en 3 colnnes</title>
<meta charset="utf-8">
<meta name="description" content="Trucsweb.com" />
<style type="text/css">
/* Définition des balise HTML5 pour vieux navigateurs */
aside, footer, header, main {display: block;}
/* Définition des balise HTML5 pour vieux navigateurs */
.conteneur {
/* Largeur Fluide et liquide, changer le 1000px par 100% */
max-width:1000px;
/* Centre le conteneur dans la page */
margin:20px auto;
}
header {
text-align:center;
background: #777;
color:#fff;
height:50px;
padding:5px;
}
main {
float:left;
width:60%;
text-align:center;
height:100%;
background:#ccc;
}
aside {
float:left;
width:20%;
text-align:center;
height:100%;
background:#eee;
}
footer {
/* forcer l’affichage sous le contenu et la colonne */
clear:both;
text-align:center;
background: #555;
color:#fff;
height:50px;
padding:5px;
}
@media all and (max-width: 600px) {
main {
width:100%;
}
aside {
width:100%;
}
}
@media all and (max-width: 801px) and (min-width: 601px) {
main {
width:80%;
}
.saut {
width:100%;
}
}
</style>
</head>
<body>
<header>
<p>En-tête (header)</p>
</header>
<aside>
<p>Côté droit (aside)</p>
</aside>
<main>
<p>Contenu (main)</p>
</main>
<aside class="saut">
<p>Côté gauche (aside)</p>
</aside>
<footer>
<p>Pied de page (footer)</p>
</footer>
</body>
</html>
Notez la classe « saut » dans la deuxième bande essentiellement pour la distinguer de la première, pour la figure a deux colonnes.
![[Photo]](https://www.trucsweb.com/documents/images/2024/js-bs-formulaire-fetch.png)
Formulaire Bootstrap 5 Ajax avec validation.![[Photo]](https://www.trucsweb.com/documents/images/2023/elephants-Salvador_Dali_1948.jpg)
Sécuriser l’accès « bureau à distance » sous IIS![[Photo]](https://www.trucsweb.com/documents/images/2023/trou_noir_galaxie_M87.jpg)
L’AI au temps du Far-Web![[Photo]](https://www.trucsweb.com/documents/images/2023/gilles-villeneuve-montreal1978.jpg)
Sélecteurs JavaScript querySelector() et querySelectorAll()![[Photo]](http://www.trucsweb.com/documents/images/2023/evolution_de_lhomme.jpg)
CSS - Animations![[Photo]](http://www.trucsweb.com/documents/images/2023/univers-copernic.jpg)
Mode de couleurs (Color modes) Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/2023/les_burgers_de_papa.jpg)
25 ans des Trucsweb - Bouton hamburger animé Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/logos/l_whatwg.svg)
Living Standard pour HTML de Apple, Google, Mozilla, Microsoft ...et la W3C![[Photo]](http://www.trucsweb.com/documents/images/2022/tim-berners-lee-web-b.jpg)
Le nouveau HTML « Living Standard » et le XML![[Photo]](http://www.trucsweb.com/documents/images/2022/v_jacques_dutronc-les_cactus.jpg)
Sécuriser un formulaire de contact au Far-Web!![[Photo]](http://www.trucsweb.com/documents/images/2022/Piet_Mondrian_1936-1942-Composition_no_12_avec_du_bleu.jpg)
![[Photo]](http://www.trucsweb.com/documents/images/2019/gazette_quebec_1790-2c.jpg)
![[Photo]](http://www.trucsweb.com/documents/images/2019/volcan-2.jpg)
![[Photo]](http://www.trucsweb.com/documents/images/2017/guitare-youtube.jpg)
![[Photo]](http://www.trucsweb.com/documents/images/2017/font-size2vmin.jpg)
![[Photo]](http://www.trucsweb.com/documents/images/2016/projet-amp.png)
![[Photo]](http://www.trucsweb.com/documents/images/2015/neith_generatrice.jpg)
![[Photo]](http://www.trucsweb.com/documents/images/2014/alice.png)
![[Photo]](http://www.trucsweb.com/documents/images/2014/viewport2.png)
![[Photo]](http://www.trucsweb.com/documents/images/2014/photo100.jpg)
![[Photo]](http://www.trucsweb.com/documents/images/2014/responsive-screen-mockup-pack.jpg)
AbuseIPDB
Connexion