Trucsweb.com

Trucsweb 1997-2017 - 20 ans de partage.

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, @media

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 aux colonnes en pure CSS [ajouter lien], 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é gauche (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 (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

    9/10 sur 1 revues.
           Visites : 32370 - Pages vues : 33756
    X

    Trucsweb.com Connexion

    X

    Trucsweb.com Mot de passe perdu

    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