Image hors du texte mais quand même centrée.
Résolu
aliosh4
Messages postés
16
Date d'inscription
Statut
Membre
Dernière intervention
-
aliosh4 Messages postés 16 Date d'inscription Statut Membre Dernière intervention -
aliosh4 Messages postés 16 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
c'est un peu particulier, voilà :
j'ai une variable $texte (qui affiche un long texte) et une variable $image (de type "./image/img001.jpg").
Je voudrais savoir s'il est possible d'afficher $image où je veux, à l'intérieur du texte, et que le texte comprenne et ne chevauche pas l'image.
Du genre
___________
|------ __------|
|------|jpg|----|
|------|jpg|----|
|----------------|
|_-_-_-_-_-_-|
Si vous voyez ce que je veux dire (je suis nul en dessin, désolé). Bref, mettre une image en plein milieu d'un texte, de sucroît quand l'image n'est pas implanté dans $texte.
J'ai pensé à découper le texte mais celui-ci est dynamique.
L'image, elle, ne changerai pas en dimensions (à priori).
Quelques éléments de non-réponse :
- mettre l'image en background ne règle pas l'histoire du chevauchement, ou alors il faut définir une zone de "non-texte" dans le texte mais je ne vois pas... ;
- j'ai essayé pas mal de combinaisons avec les position relative/absolute, les display inline, inline-block sans succès mais peut-être que ce n'est qu'une histoire de css...
Qu'en pensez-vous ?
Possible ou pas ?
c'est un peu particulier, voilà :
j'ai une variable $texte (qui affiche un long texte) et une variable $image (de type "./image/img001.jpg").
Je voudrais savoir s'il est possible d'afficher $image où je veux, à l'intérieur du texte, et que le texte comprenne et ne chevauche pas l'image.
Du genre
___________
|------ __------|
|------|jpg|----|
|------|jpg|----|
|----------------|
|_-_-_-_-_-_-|
Si vous voyez ce que je veux dire (je suis nul en dessin, désolé). Bref, mettre une image en plein milieu d'un texte, de sucroît quand l'image n'est pas implanté dans $texte.
J'ai pensé à découper le texte mais celui-ci est dynamique.
L'image, elle, ne changerai pas en dimensions (à priori).
Quelques éléments de non-réponse :
- mettre l'image en background ne règle pas l'histoire du chevauchement, ou alors il faut définir une zone de "non-texte" dans le texte mais je ne vois pas... ;
- j'ai essayé pas mal de combinaisons avec les position relative/absolute, les display inline, inline-block sans succès mais peut-être que ce n'est qu'une histoire de css...
Qu'en pensez-vous ?
Possible ou pas ?
A voir également:
- Image hors du texte mais quand même centrée.
- Apparaitre hors ligne instagram - Guide
- Extraire texte d'une image - Guide
- Gps hors ligne - Guide
- Image iso - Guide
- Transcription audio en texte word gratuit - Guide
3 réponses
J'ai réussi à la faire mais avec l'image sur le côté et non centré.
Autrement dit:
Voici le code que j'ai testé:
Voir ici: http://tests.arthezius.fr/img_float.php
Autrement dit:
_________________ |------ __------| |jpg|-----------| |jpg|-----------| |---------------| |_-_-_-_-_-_-_-_|
Voici le code que j'ai testé:
<div style="width:500px;"> <div style="float:left;height:150px;"></div> <p style="margin:0px 5px;float:left;clear:left;"> <img src="http://static.ccm2.net/www.commentcamarche.net/_skin/_local/img/logo.png" /> </p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pulvinar orci eros. Curabitur consectetur risus at nulla fermentum vitae vestibulum quam euismod. Donec tristique vestibulum massa, at varius enim lacinia quis. Aliquam eget arcu leo, at pretium justo. Vestibulum id arcu nisl, ac aliquam erat. Nunc consectetur turpis eu leo malesuada sodales. Nam mauris est, sodales eu bibendum eu, condimentum vel nisl. Vestibulum et nisi magna. Cras rutrum porttitor fringilla. Mauris accumsan consectetur egestas. Aenean sit amet vestibulum velit. Duis in magna nisl. Fusce vitae congue nibh. Fusce placerat purus in ante iaculis congue vitae eget nisl. Maecenas quis orci massa. Quisque quis volutpat tortor. Duis eu sagittis sem. Vestibulum accumsan iaculis accumsan. Aenean euismod massa risus. Integer id tellus sed urna sodales tempus in ac ligula. Donec non aliquet justo. Donec cursus est elementum nisl pharetra facilisis. Morbi eget risus et lorem lacinia vehicula id sit amet lectus. Nulla urna velit, accumsan at ornare eget, varius nec nisi. In tincidunt neque vitae augue fermentum condimentum. Nunc tellus risus, pharetra sit amet sollicitudin quis, facilisis et metus. Cras ac lectus neque. Ut id leo leo, id rhoncus leo. Praesent convallis imperdiet luctus. Sed imperdiet interdum tellus, eu cursus leo suscipit non. Mauris sit amet metus ut diam sollicitudin suscipit. Nulla volutpat, enim a hendrerit dapibus, tortor elit porttitor justo, vitae egestas diam elit eu nibh. Integer vel nulla eget nibh porta condimentum ac accumsan metus. </div>
Voir ici: http://tests.arthezius.fr/img_float.php
Une variante pour la version "image à droite" :
Et le coup du pour définir la hauteur de l'image m'aide beaucoup également. Du coup même si je n'ai pas le centre je peux au moins jouer sur les côtés.
Je dis cela parce que maintenant, l'image en question est en position:absolute;, a des coordonnées précises sur l'écran (héhé... c'est une autre histoire).
Merci à toi, j'imagine que c'est le maximum que l'on puisse faire si l'image est hors du texte. Je m'arrange volontiers avec ça :)
aliosh'