-
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):
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.