• Tableau 2

    Reprenons le code de la zone article de la page précédente avec ses résumés; ce code est celui de mon article explicatif et sera simplifié, si vous n'avez pas besoin des images et couleurs de fond.

    <div>
    <p id="m2">En-tête facultatif</p>
    <p id="m3" class="res">Résumé 1<br /><img style="float: left; margin: 0 0.2vw 0 0; border: 0.2vw solid white; box-shadow: 0.1vw 0.1vh 0.2vw black; border-radius: 50%;" src="http://ekladata.com/7zAvLRrD7hRrea03_Zc8b9FiUwE.jpg" alt="tableau html 1" />Votre texte<br /><br /><a href="http://pourquoipas732.eklablog.com/tableau-ou-html-p1238640" target="_blank"><span style="font-size: 14pt; border: 0.1vh solid black; background: lime; color: black!important;">Lire la suite</span></a></p>
    <p id="m4" class="res">Résumé 2</p>
    <p id="m5" class="res">Résumé 3</p>
    <p id="m6" class="res">Résumé 4</p>
    </div>
    <style><!--
    #m2{ width:100vw; height:10vh; background:#00FFFF; border:0.1vw solid black; text-align:center;}
    .res{float:left; width:49vw; height:50vh; border:0.1vw solid black; font-size: 12pt;}}
    #m3{background:#B0C4DE;}
    #m4{background:#66CDAA;}
    #m5{ background:#FAFAD2;}
    #m6{background:#FA8072;}
    --></style>

    <div> est votre zone article; c'est elle qui sert de référence pour les dimensions et les positionnements.

    Dans mon exemple, j'ai mis une image de fond mais, pour vous, le fond sera celui de votre blog.

    #m2 est un cadre d'en-tête pour indiquer, par exemple, le fonctionnement des résumés mais il n'est pas obligatoire.

    .res  est la classe des résumés (class), qui définit les paramètres généraux de chacun des résumés et s'ils ne comportent pas de différence (ici, couleur de fond), vous pouvez supprimer les identifiants (m3,m4,m5,m6).

    #m3, #m4, #m5, #m6 vous permettent d'identifier un résumé en particulier pour lui donner un attribut spécifique.

    Vous pouvez donc vous créer un résumé type, à vos dimensions et décoration:

    <p id="m3" class="res">Titre<br /><img style="float: left; margin: 0 0.2vw 0 0; border: 0.2vw solid white; box-shadow: 0.1vw 0.1vh 0.2vw black; border-radius: 50%;" src="http://ekladata.com/7zAvLRrD7hRrea03_Zc8b9FiUwE.jpg" alt="tableau html 1" />Votre texte<br /><br /><a href="http://pourquoipas732.eklablog.com/tableau-ou-html-p1238640" target="_blank"><span style="font-size: 14pt; border: 0.1vh solid black; background: lime; color: black!important;">Lire la suite</span></a></p>

    l'image éventuelle; le texte à côté; le lien vers ce que vous voulez.

    Supposons maintenant que chaque résumé ait la même présentation, que l'entête des articles ne vous est pas nécessaire et simplifions le code:
    Dans votre zone article, vous ajoutez, en premier, le code de votre nouveau résumé qui poussera les autres pour se placer en première position, en haut, à gauche.


    <p class="res"><img style="float: left; margin: 0 0.2vw 0 0;" src="http://...jpg" alt="." />Votre texte<br /><a href="http://lien" target="_blank">Lire la suite</a></p>
    <p class="res">R&eacute;sum&eacute; 2</p>
    <p class="res">R&eacute;sum&eacute; 3</p>
    <p class="res">R&eacute;sum&eacute; 4</p>
    <style><!--
    .res{float:left; width:49vw; height:50vh; border:0.1vw solid black; font-size: 12pt;}}
    --></style>

    Chaque résumé ayant la même classe (class=res"), vous n'aurez qu'à écrire une fois, au départ, la ligne CSS.

    L'image du résumé est mise par l'icône "image" et le positionnement choisi s'écrit tout seul; pour un lien sur la même page, supprimez target="_blank".

    Ce qui signifie que pour tout nouvel article, vous avez à créer:

    la page de votre article et à en récupérer l 'adresse.

    Modifier le code du résumé de votre nouvel article: <p class="res"><img src="http://...jpg" alt="." />Votre texte<br /><a href="http://lien nouvelle page" target="_blank">Lire la suite</a></p>

    et à écrire ce code, dans votre article/menu, en première ligne de la liste des résumés...

    .. .et pi c'est tout !