• tableau html 1

    Pour illustrer ma proposition précédente, voici un exemple plus concret, sur une page qui sera de 80% de la largeur de ma page soit environ 1500px.

    Je vais directement proposer les mesures adaptatives car, tant qu'à créer quelque chose, autant aller directement au but final.

    Le cadre simulera une page de blog avec une colonne latérale de chaque côté, ce qui donnera:



    Le bandeau



    Colonne latérale gauche.

    avec les modules que vous avez installés.



    Colonne centrale article.

    Le sujet de la page explicative concerne cette partie.

    Nous allons installer, en tant qu'article, un menu qui dirigera vers des pages qui traiteront du sujet résumé dans chaque cadre.

    La décoration sera sommaire car ce n'est pas le sujet et que chacun peut la réaliser selon ses goûts.

    Les deux colonnes latérales font 15% de la largeur du montage (ou du blog.
    La zone centrale fait donc le reste: dans un blog, elle sera donc de 100%-15%-15%=70%
    Mon exemple étant de 80% de ma page; cette zone fait ici:80%-15%-15%=50% ce qui doit donner une valeur approximative de 950px.

    Je vais reprendre ce cadre en bleu clair pour y installer un menu.

    Dans le code, je suis obligé de mettre une hauteur précise à cette zone, pour la publier mais, dans le cas de votre blog, la hauteur est automatique et vous ajouterez les résumés sans vous soucier de la hauteur ... sauf si vous publiez un article par jour !



    Colonne latérale droite.

    avec les modules que vous avez installés.

    Un clic sur le lien de chaque cadre vous ouvrira une nouvelle page ou changera la page, selon ce que vous choisirez comme structure.
    Le nombre de résumés est à votre convenance, selon ce que vous mettez dedans.

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

    ...