Le Pic
Projet Internet et Citoyenneté

Accueil > LES OUTILS > SPIP, la doc > Mise en pages>

Fiche N°17 : Affichage adaptatif d’une suite centrée de blocs d’informations

Comment afficher une suite de blocs d’informations de taille identique centrés quel que soit leur nombre.


Vous voulez afficher côte à côte des blocs de taille identique de façon harmonieuse et auto-adaptable ? Utiliser un conteneur avec la déclaration CSS3 "display : flex ;" (les contenus sont alors dits flexibles) est la meilleure solution : l’affichage des blocs se fait avec des marges gauches et droites identiques.
Ce procédé permet ainsi l’ adaptation à toutes les tailles d’écran (la "responsivité").

Côté HTML :

<div class="conteneur_service>
   <div class="bouton_service">Titre1</div>
   <div class="bouton_service">Titre2</div>
   <div class="bouton_service">Titre3</div>
   <div class="bouton_service">Titre4</div>
</div>

Côté CSS :

.conteneur_service {
   display:flex;
   justify-content: space-around; /* aménage les espaces autour des blocs */
   flex-wrap: wrap;               /* ligne suivante pour afficher les blocs restants */
   margin-bottom: 18px;           /* espace au-dessous des blocs */
}
.bouton_service {
   width: 105px; height: 105px;
   margin: 5px;                /* marges externes minimales autour du bouton */
   padding: 12px;
   background-color:yellow;
   border: solid 1px black;
   font-size: 13.5px;
   line-height: 25px;
   text-align: center;
   font-weight: bold;
}

Nota :
En page Sommaire de notre site, les boutons cliquables vers les services proposés aux associations adhérentes du PIC sont des contenus flexibles.