Trucsweb.com

Trucsweb.com

CSS

Structure CSS adaptative

RDFFav

Structure HTML5 en colonnes CSS, fluide et adaptative (responsive)

Variation du gabarit CSS, entête et pied de page avec alignement de colonnes en terme HTML5.aside, main, structure, @mediaStructure HTML5 en colonnes CSS, fluide et adaptative (responsive)

Schéma Saeulenordnungen

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...


Exemple

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.

, Analyste programmeurConception oznogco multimédia (https://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

  • Excellent article. Simple, efficace. La partie cliente "torchée" on va pouvoir se concentrer sur l'essentiel ! 2 petites remarques ; dans l'exemple à 2 colonnes "Exemple deux colonnes" c'est la colonne de droite qui reste, pas celle de gauche. Et il manque un petit lien dans le texte en haut (chercher [ajouter lien]). En tout cas merci ☺
    64x64
    Lulu
    Date (GMT) : 2019-11-23 08:06:19 (UTC +0000)
    Date local : Sat Nov 23 2019 09:10:03 GMT+0100 (heure normale d
    • Salut, Merci Lulu pour votre commentaire élogieux et merci pour le lien manquant. Je règle ça aujourd'hui. Pour l'« Exemple deux colonnes » il n'y a pas d'erreur dans le code. C'est ma dyslexie naturelle qui m'a induit en erreur. J'ai écrit « gauche », probablement en raison du float:left, mais elle est carrément à droite, c'est-à-dire aligné à gauche, mais à droite du premier DIV main. Il suffit de changer le texte : <aside> <p>Côté droit (aside)</p> </aside>
      64x64
      oznog
      Date (GMT) : 2019-11-23 15:20:24 (UTC +0000)
      Date local : Sat Nov 23 2019 10:24:05 GMT-0500 (heure normale d


    • Bonjour. Je travaille actuellement sur le site web d'un organisme sans but lucratif qui m'emploie. J'aime beaucoup votre script pour 2 colonnes. J'aimerais savoir comment mettre un espace entre les 2 colonnes et les faire apparaître de hauteur égale. D'avance, un gros MERCI.
      64x64
      Serge Baguidy-Gilbert
      Date (GMT) : 2020-02-22 00:15:25 (UTC +0000)
      Date local : Fri Feb 21 2020 19:19:34 GMT-0500 (heure normale d
      • Salut, Pour l'espace entre deux colonnes c'est « column-gap ». column-gap : 20px; https://developer.mozilla.org/fr/docs/Web/CSS/column-gap Pour équilibrer les colonnes, en principe c'est automatique, mais encore faut-il avoir seulement du texte de même grandeur, par exemple seulement des paragraphes. Il suffit d'une image comme mon exemple ou autre éléments à hauteur variable comme un entête (h1) pour venir embrouiller l'équilibre. Vous pouvez forcer un saut de colonne avant ou après des balises spécifiques (break-after, inside ou before) pour éviter de couper en deux un bloc de contenu, sans plus. break-inside: avoid; break-after: always; Sinon, vous devez utiliser un système de grille, avec display:table ou encore Flex. Mais le contenu ne passe pas d'une colonne à l'autre contrairement à « column-count ». Lire « How TO - Equal Height » https://www.w3schools.com/howto/howto_css_equal_height.asp Quant au JavaScript, c'est possible, mais très complexe. Je vous conseille d'utiliser « jQuery Masonry » https://masonry.desandro.com/v2/docs/intro.html. Je vous invite à lire ce tutoriel sur le sujet : « Système de Grille CSS adaptatif et équipollent » http://www.trucsweb.com/tutoriels/css/css-grille/ Bonne journée.
        64x64
        oznog
        Date (GMT) : 2020-02-23 17:16:05 (UTC +0000)
        Date local : Sun Feb 23 2020 12:21:13 GMT-0500 (heure normale d


      Ajouter un commentaire
      Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
      Votre évaluation du tutoriel

      9/10 sur 3 revues.
             Visites : 52012 - Pages vues : 53837
      X

      Trucsweb.com Connexion

      Connexion

      X

      Trucsweb.com Mot de passe perdu

      Connexion

      X

      Trucsweb.com Conditions générales

      Conditions

      Responsabilité

      La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

      Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

      Droit applicable et juridiction compétente

      Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

      X

      Trucsweb.com Trucsweb

      X

      Trucsweb.com Glossaire

      X

      Trucsweb.com Trucsweb

      X

      Trucsweb.com Trucsweb

      Conditions

      Aucun message!

      Merci.

      X
      Aucun message!
      X

      Trucsweb.com Créer un compte

      Créer un compte

      .
      @