• "décoller" le texte des images : épisode 2

    Suite aux changements de la fenêtre d'édition d'Eklablog, mon ancien article est obsolète. Avec la nouvelle interface, le texte est automatiquement décollé de l'image si vous choisissez le bon alignement.

    J'utilise la même image que pour l'article précédent, toujours disponible sur open clipart.

    Pour insérer une image : > menu Ajouter une image 

    "décoller" le texte des images : épisode 2

    > url de l'image (parce que ici mon image est sur internet)

    "décoller" le texte des images : épisode 2

    Choisir un alignement : Gauche ou Droite. Par défaut cet alignement est flottant.

    "décoller" le texte des images : épisode 2

     

    "décoller" le texte des images : épisode 2Et là, tadaaaaaaaaaaam, le texte est à 5 pixels de l'image.

    Par contre, si vous cochez Aucun ou Centre, le texte est collé à l'image. Et pour le décoller, c'est compliqué.

     

     

     

    En effet, pour modifier une image déjà présente dans l'article, il faut sélectionner l'image par un simple clic (gauche), puis menu Insérer / éditer une image.

     

    "décoller" le texte des images : épisode 2

    Et là... mauvaise surprise, les possibilités de modifications sont limitées. En gros, on peut changer le nom ou la taille.

     

    Si vous changer l'alignement, pour qu'il deviennent flottant à gauche ou à droite, la solution la plus simple est de cliquer sur Ajouter une image dans le menu, puis de recommencer le processus utilisé au début de l'article.

    Autre solution passer par le code HTML. Voici notre image sans alignement avec la ligne de code correspondante : 

     

    texte à côté de l'image

     
    <p><img src="http://openclipart.org/image/800px/svg_to_png/17626/Peileppe_Castle.png" alt="" width="150" />texte &agrave; c&ocirc;t&eacute; de l'image</p>

      Voici maintenant l'image avec un alignement flottant à gauche et un décalage du texte à 5 pixels : 

    texte à côté de l'image

     

     

     

     

     
    <p><img style="float: left; padding-right: 5px;" src="http://openclipart.org/image/800px/svg_to_png/17626/Peileppe_Castle.png" alt="" width="150" />texte &agrave; c&ocirc;t&eacute; de l'image</p>

     

     

     

    « [appli] ProCam 2[appli] JETUIL CM1 »
    Pin It

    Tags Tags : , ,
  • Commentaires

    3
    Lundi 4 Mai 2015 à 19:00

    J'avais besoin de conseils pour modifier mon blog et je suis arrivée sur ton site : merci beaucoup pour toutes ces astuces qui permettent de gagner bien du temps !! cool

    2
    Mardi 11 Mars 2014 à 08:19

    Ton aide m'est précieuse...yes

    Merci!

    1
    Lundi 10 Mars 2014 à 22:09

    Merci, quel dommage ce changement des possibilités de modifications! Je commençais juste à maitriser, merci pour le code!

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :