• Organisation article

    En rédigeant la page sur la position des images agrandies , j'ai publié une image entre deux paragraphes et je voudrais revenir sur cette disposition, qui n'est pas possible sans ouvrir le code source; il n'y a pas d'icône pour cela, dans la barre d'outils; on peut placer deux images côte à côte mais pas un paragraphe texte.

    J'ai préparé une image en 450x600px et je vais placer un paragraphe texte, de la même dimension, à coté: en code source, je vais écrire:

    <img src="http://ekladata.com/b3klUYWMJJVbcUd6tt_1k2b4YJo/13-1.jpg" style="width:450px; float:left;">

    <p style="width:450px; height:600px; float:left; border:1px solid black; text-align:center; font-size:12pt;">Mon texte explicatif</p>

    Mon texte explicatif

    Cela casse un peu la monotonie d'articles où les photos sont alignées les unes sous les autres et où on joue de l'ascenseur pour les faire défiler.

    On peut décorer ce paragraphe texte et même le faire apparaitre au survol de l'image... voir plus vas.

    Par défaut, chaque élément se place sous le précédent mais l'attribut: float:left; les fait rester sur le même niveau.


    Survolez cette photo

    Principe.

    Le paragraphe texte est placé au dessus de la photo et rendu transparent; il devient opaque au survol.

    Code.

    <p><img style="width: 450px; float: left;" src="http://ekladata.com/KkaBiMMlFrGLBw8JuN3zyKU8pgs/13-2.jpg" alt="" /></p>
    <p id="c1" style="width: 450px; height: 600px; float: left; border: 1px solid black; text-align: center; font-size: 12pt; color: white; text-shadow: 1px 1px black;">Principe...</p>
    <style><!--
    #c1{transition:all 0.5s linear;transform:translate(-450px,0px); opacity:0;}
    #c1:hover{opacity:1; background-color:rgba(192,192,192,0.5);}
    --></style>