• Tableau 3

    Regardons comment ajouter un résumé dans notre menu; la hauteur de la zone article est ici réglée sur 170vh soit 3 résumés en hauteur.

    Nous partons avec, par exemple, 4 résumés, disposés en 2 par ligne; dans la page suivante, nous allons ajouter un résumé.

    Résumé 1

    tableau html 1Que vous dire dans ce premier article?
    Pour me simplifier la tâche, j'écris ces lignes de texte et je vais placer la vignette du résumé par l'icône "image" de la barre d'outil, en choisissant sa position, à gauche du texte.

    Je vais créer un lien par l'icône maillon de chaîne, sur un bouton ou un mot.
    j'ai choisi de l'ouvrir dans une nouvelle page.

    Lire la suite

    Résumé 2

    tableau html 1Vous pourrez vous préparer, sur une feuille de bloc-note, le code d'un résumé type, que vous modiferez au fur et à mesure de vos résumés et de vos articles.
    Je ne peux vous en écrire un puisqu'il dépend de la taille que vous donnerez à ces résumés et à leur nombre par ligne.
    Cependant,, comme dans le cas d'un tableau, vous adapterez image et texte facilement dans le code type.
    C'est ce que je fais avec le code du lien sur bouton !
    Il va nous falloir regarder comment changer de ligne pour afficher les résumés en dessous.

    Lire la suite

    Résumé 3

    tableau html 1En positionnant ce troisième résumé, il m'a fallu revoir la largeur des résumés car les bordures s'ajoutent aux dimensions du cadre et il faut en tenir compte pour que 2 résumés passent dans la largeur de la zone article.
    Au lieu de 25vw, j'ai modifié à 24.8vw, ce qui est minime.
    Si je publie un nouvel article/résumé, je n'ai qu'à ajouter son code en première ligne du code source pour qu'il pousse tout le monde.

    Lire la suite


    Il ne me reste plus qu'à indiquer le principe du code de cette structure mais je vais le faire dans une nouvelle page explicative, afin d'en décortiquer l'écriture.

    Ceci n'est qu'un indication du principe car vous pouvez modifier chaque élément selon vos goûts.
    Clic sur l'image.

    <div id="m1">
    <p class="ex1"><strong><span style="text-decoration: underline;">R&eacute;sum&eacute; 1</span></strong><br /><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" />texte1<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 class="ex1"><strong><span style="text-decoration: underline;">R&eacute;sum&eacute; 2</span></strong><br /><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: 20%;" src="http://ekladata.com/d42A8raY0ZY6Re8FO72SuuF34kY.jpg" alt="tableau html 1" />texte2<br /><br /><a href="http://pourquoipas732.eklablog.com/ombre-p1236308" target="_blank"><span style="font-size: 14pt; border: 0.1vh solid black; background: lime; color: black!important;">Lire la suite</span></a></p>
    <p class="ex1"><strong><span style="text-decoration: underline;">R&eacute;sum&eacute; 3</span></strong><br /><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: 20%;" src="http://ekladata.com/Eu6lDhj1wGLS4CQIv0If1eD9wE4.jpg" alt="tableau html 1" />texte3<br /><br /><a href="http://pourquoipas732.eklablog.com/accueil-c21574769" target="_blank"><span style="font-size: 14pt; border: 0.1vh solid black; background: lime; color: black!important;">Lire la suite</span></a></p>
    <p class="ex1"><br />texte4<br /><strong><span style="background-color: #ffff00;">Clic sur l'image.</span></strong><br /><br /><a href="http://ekladata.com/1O6YOcioQEeEGk_9QoiEdMR66Hw.jpg" target=" blank"><img style="border: 0.2vw solid white; box-shadow: 0.1vw 0.1vh 0.2vw black; border-radius: 20%;" src="http://ekladata.com/hghtTaQDjisNWmVXToS287ptSlw.jpg" alt="" /></a></p>
    </div>

    <style><!--
    #m1{width:50vw; height:170vh; transform:translate(25vw,0vh); background:url('http://ekladata.com/AHhv6xStUIreQonx5ATb-mDlvh0/00018.jpg'); border:0.1vw solid black; text-align:center;}
    .ex1{float:left; width:24.5vw; height:50vh; margin: 0.1vw; background:#B0C4DE; border:0.1vw solid black; font-size: 12pt;}
    --></style>