28172 sujets

CSS et mise en forme, CSS3

Positionnement d'images en fonction du texte

Bonjour à vous

Admettons que mon blog Wordpress s'affiche en deux colonnes, la première portant le texte, la seconde les images. J'aimerais que certaines images apparaissent pile à l'endroit où le texte parle d'elles. Et que d'autres images donc apparaissent à d'autres endroits, en fonction du positionnement du texte.

Pour être clair : 5 lignes dans mon texte parlent d'une image, boum juste à côté se positionne l'image correspondante. 25 lignes plus tard, le texte énonce une autre image, boum cette seconde image se positionne au même niveau.

Y a t il un moyen de faire cela en évitant le positionnement manuel ? Par exemple y a t il un moyen de placer des "balises/repères" dans le texte, auquel les images "identifiées" s'accrocheraient pour s'afficher à côté ?

En espérant être clair et en vous remerciant grandement pour vos lumières.
Benoit
Avec une maquette ou un schema ça serait plus simple de comprendre ce que tu souhaites.

C'est un truc comme ça que tu veux ? (Agrandi l'onglet "Result" pour voir ce que ça donne)
Modifié par 0xbabe (05 Apr 2015 - 20:02)
Ta proposition fonctionne (je cherchais très loin ce qui était en fait très simple!). Par contre à chaque fois que je place le code de l'image dans le texte, le texte qui suit se met à la ligne. Comment éviter cela ?

par un premier idéogramme : Mu, le vide. (2) </p><div class="img">
<a href="IMG_0425b.jpg"><img src="IMG_0425b.jpg"/></a>
<a href="IMG_0426b.jpg"><img src="IMG_0426b.jpg"/></a>
</div><p>Barthes se fascinera pour le Japon qu'il décrira

Modifié par Benoit / (06 Apr 2015 - 23:11)
Le texte devrait rester collé au texte précédent, sans passer à la ligne donc.
Modifié par Benoit / (06 Apr 2015 - 11:53)
Merci, tu as énoncé une bonne solution à mon problème;
Je l'ai même mis à jour avec un left: 60%; plutôt que le right:0;
Car les images se positionnaient d'office à l'extrémité droite de la fenêtre et ce n'était pas le but.
Modifié par Benoit / (08 Apr 2015 - 19:48)
Juste une dernière chose que je n'arrive pas à résoudre : ici les images se positionnent à des endroits différents, ce qui ne pose pas de souci, mais ça en pose si elles sont trop proches, l'une se superpose alors à l'autre. Comment faire si je veux que deux images qui se suivent se placent l'une en dessous de l'autre (séparées de 10 pixels par exemple). J'ai essayé de mettre les images dans une div mais ça n'a pas fonctionné.

Vestibulum ante ipsum primis <div class="image"><img src="http://lorempicsum.com/nemo/350/200/1">  <img src="http://lorempicsum.com/nemo/350/200/1"> </div> in faucibus orci luctus


.image {   position: absolute;
    width: 200px;
    left: 55%;}

Modifié par Benoit / (08 Apr 2015 - 20:03)
Ça a l'air beaucoup plus compliqué que prévu.
Quelqu'un aurait une idée ? Faut il obligatoirement passé par du code complexe ?
Sujet clos
Aller à