JSFiddle

  • Exemples de tables/tableaux

    Tout ce que vous vouliez savoir sur les tables, et même plus. Quelques nouveaux sélecteurs sont aussi présentés.

    <h1>Les tables HTML</h1>
    <p>Version disponible sur Codepen&nbsp;: <a href="http://codepen.io/michelmichaud/pen/NPKwqo?editors=110">http://codepen.io/michelmichaud/pen/NPKwqo</a></p>
    <h2>Introduction aux tables HTML</h2>
    <p>À la base ...</p>
  • Démo background ++ #2 is the latest revision

    On peut vraiment faire beaucoup de choses avec la propriété background (ou ses spécifications individuelles), surtout depuis qu'on peut mettre plusieurs images.

    <div class="un">
        <p>un asjd alkjs dlkjas lkdjlaksjdlkaj slkdlaksdlka slkdl aksldkaslkdalksjdlkals</p>
        <p>asjd alkjs dlkjas lkdjlaksjdlkaj slkdlaksdlka slkdl aksldkaslkdalksjdlkals</p>
        <div class="deux">
            <p>deux asjd alkjs dlkjas lkdjlaksjdlkaj ...</p></div></div>
  • Démo background

    On peut vraiment faire beaucoup de choses avec la propriété background (ou ses spécifications individuelles), surtout depuis qu'on peut mettre plusieurs images.

    <div class="un">
        <p>un asjd alkjs dlkjas lkdjlaksjdlkaj slkdlaksdlka slkdl aksldkaslkdalksjdlkals</p>
        <p>asjd alkjs dlkjas lkdjlaksjdlkaj slkdlaksdlka slkdl aksldkaslkdalksjdlkals</p>
        <div class="deux">
            <p>deux asjd alkjs dlkjas lkdjlaksjdlkaj ...</p></div></div>
  • Test sur niveaux h, section et article

    Il y a une présentation automatique des éléments article, section et h imbriqués qui montre l'imbrication. Cet exemple permet de mieux comprendre la logique à appliquer dans l'utilisation de ces éléments.

    <p class="titre">En <code>h<i>n</i></code> « correct » selon l'imbrication des <code>section</code>s</p>
    <div>
        <h1>Apples (h1)</h1>
        <p>Apples are fruit.</p>
        <section>
            <h2>Taste (h2)</h2>
            <p>They taste lovely ...</p></section></div>
  • Démo de border-radius

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class="simple">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus ...</div>
  • Démo vertical-align (1) #69 is the latest revision

    La propriété vertical-align est intuitive seulement quand elle est appliquée dans une cellule d'une table, car dans ce cas elle indique comment aligner son contenu. Ailleurs, elle ne s'applique en principe que sur des éléments inline ou inline-block où elle permet de spécifier un alignement autre que celui par défaut qui suivrait la ligne de base dans le conteneur. En particulier, elle ne permet pas directement d'aligner le contenu d'un div ou autre bloc.

    <p>Par défaut, la boîte fait de la place pour ce qu'elle contient et aligne tout sur la base du ...</p>
  • Démo vertical-align (2)

    La propriété vertical-align est intuitive seulement quand elle est appliquée dans une cellule d'une table, car dans ce cas elle indique comment aligner son contenu. Ailleurs, elle ne s'applique en principe que sur des éléments inline ou inline-block où elle permet de spécifier un alignement autre que celui par défaut qui suivrait la ligne de base dans le conteneur. En particulier, elle ne permet pas directement d'aligner le contenu d'un div ou autre bloc.

    <p>top, bottom, text-top et text-bottom alignent le haut ou le bas de l'élément avec ce qui est demandé :</p>
    <div class="cinq">
        Texte ...</div>
  • Démo display

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class="sansbord">
        <h3>span (inline par défaut, donc width n'a pas d'effet)</h3>
        <span class="nature">nature</span>
        <span class="nature">nature</span>
        <span class="nature">nature</span>
        <span class="bloc">block</span>
        <span class="bloc">block</span>
        <span class="bloc">block</span>
        <span class="enligne">inline</span>
        <span class="enligne">inline</span>
        <span class="enligne">inline ...</span></div>
  • Propriété overflow

    No-Library (pure JS), HTML, CSS, JavaScript

    <div>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus ...</div>
  • Démo-clearfix #40 is the latest revision

    Démo de la nécessité d'une solution au problème de l'invisibilité des éléments float

    <!-- Cette démo utilise des div, mais le problème serait le même -->
    <!-- avec n'importe quel conteneur bloc (p, main, article, etc.) -->
    <div class="globale bloc-complet">
        TEXTE DE LA DIV GLOBALE
        <div class="col1">
            1111ja slkdja lsdlkajs ldkaj lskdj laks lkaslkdj alksj dlkajslkdj alksdj lkas kldjalks dlkajs dlkaj
            alksdj ...</div></div></!--></!-->