• Résolu Aligner texte au bord des photos


    Samedi 12 Janvier 2019 à 09:28
    Inspiration Nature

    Bonjour,

    Je souhaiterai aligner le texte dans les articles aux bords gauche des photos et je ne trouve pas. Y aurait il un code css pour faire cela? 

    Samedi 12 Janvier 2019 à 13:44
    stormalo

    Bonjour,

    Principe:
    Pour placer le texte à droite de l'image:
    le code css à appliquer sur l'image est float: left;

    Pour placer le texte à gauche de l'image:
    le code css à appliquer sur l'image est float: right;

    Ou et comment placer ce code ? ça dépend de ce que l'on veut faire:
    - au cas par cas : on édite l'image et on écrit le code élémentaire dans l'onglet "Avancé"
    - sur toutes les images du blog : on ajoute dans le css du thème  img {float: right;}
    - etc. de nombreuses solutions sont possibles : sur certains articles ou certaines pages, sur quelques images par ci par là etc.

    Il est également possible de créer des groupes de 2 cellules de tableau, jointes, et de mettre le texte dans l'une et la photo dans l'autre.

    Samedi 12 Janvier 2019 à 14:08
    Inspiration Nature

    Bonjour Stormalo,

    J'ai essayé tes codes mais ça me décale la photo, pas le texte. Hors je souhaite que ma photo reste centrée et que ce soit le texte qui se déplace et vienne s'aligner sur le bord de la photo. Faire un tableau dans chaque article, trop contraignant d'autant plus que mes textes sont très courts (uniquement description de la photo). Je vais laisser tel quel. Merci en tous cas de m'avoir répondu. 

    Samedi 12 Janvier 2019 à 14:15
    stormalo

    Désolé, je n'ai pas compris la question, car pour moi, dans le blog www.caroline-tejero.com, le texte est selon ma compréhension déjà aligné sur le bord gauche.de l'image.

    Un exemple sur un autre blog ou site ?

    Samedi 12 Janvier 2019 à 14:28
    Inspiration Nature

    C'est dans l'onglet "blog", je t'ai fais une capture d'écran. Comme tu peux voir, j'aurai souhaité que le texte commence à la ligne rouge, dans la continuité du bord gauche de la photo. 

    Samedi 12 Janvier 2019 à 15:08
    stormalo

    J'ai essayé ça :

    <div style="width: 250px; margin: 0 auto;">
    <p>Roue chromatique <br /><br /><img src="http://ekladata.com/V0s7b49ScchEBMzKxlxrD59Y3xY@250x231.png" alt="test" /></p>
    </div>

     

    En rouge la même largeur que l'image

    Samedi 12 Janvier 2019 à 15:12
    Inspiration Nature

    J'ai mis la taille de l'image (1200px), mais ça me dit qu'il y a erreur dans le code css.

    Samedi 12 Janvier 2019 à 15:26
    stormalo

    Normalement dans cet exemple il n'y a rien à écrire dans le css

    Voir réalisation sur cette page temporaire (tout est dans le code source de la page):

    http://atelierduchateau.eklablog.com/-p1414946

    Samedi 12 Janvier 2019 à 15:29
    Inspiration Nature

    J'ai trouvé le code source. Donc je dois le faire à chaque article?  Et je viens d'essayer dans un article, c'est ta photo qui apparait. 

    Samedi 12 Janvier 2019 à 17:44
    stormalo

    Oui, il faut que ce code soit reproduit dans chaque page et pour chaque images ou suite d'image qui ont la même largeur.

    Le principe est de créer un élément DIV (balises <div> . . .</div> contenant le texte et l'image) de même largeur que la photo et d'installer ce bloc de manière centrée dans le bloc de l'article ou de la page.

    On pourrait aussi passer partiellement par du css si on souhaite avoir la possibilité d'ajuster en une fois l'ensemble des cas qui utilisent ce codage.

    En résumé le principe est :

    <div style="width: 250px; margin: 0 auto;">
    <p>TEXTE<br /><br /><img src="adresse" /></p>
    </div>

    En gris clair ce qui pourrait être défini par css

    En noir Le texte

    En vert chaque <br /> (facultatif) représente un retour à la ligne sans espacement

    En bleu  http.:// adresse internet de l'image.




    Ce sujet est verrouillé. Vous ne pouvez donc pas poster de nouvelles réponses.