Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Shop Recherche
1781 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Encadrer une photo avec un texte

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Encadrer une photo avec un texte

n°2372389
picotar
Timeo Danaos et dona ferantes
Posté le 25-12-2020 à 20:23:36  profilanswer
 

Voici un lien qui renvoie sur une page contenant deux textes identiques entourant une photo.
 
http://cyberillac.com/textecadre.html
 
Je voudrais sur le bloc du bas reproduire le bloc du haut de telle sorte que le texte encadre l'image.
Comment faire sachant qu'une des contraintes serait de ne pas avoir à découper le texte ligne à ligne manuellement pour lui garder sa cohérence de part et d'autre de la photo ?
Existe-t-il un moyen HTML, CSS, PHP, JAVASCRIPT pour réaliser cela ?
Merci pour vos suggestions.
 
 
 

mood
Publicité
Posté le 25-12-2020 à 20:23:36  profilanswer
 

n°2372560
MaybeEijOr​Not
but someone at least
Posté le 29-12-2020 à 13:12:50  profilanswer
 

Je ne crois pas que ce soit possible, le seul moyen serait de le faire en Javascript/css qui découperait le texte ligne par ligne mais automatiquement. Et cela me semble bien compliqué.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2372575
picotar
Timeo Danaos et dona ferantes
Posté le 29-12-2020 à 16:03:05  profilanswer
 

Merci, MaybeEijOrNot pour cette réponse honnête.
Je me doutais bien que l'affaire n'était pas simple.  
Cependant, l'idée du javascript/css me séduit. Un commencement de développement me serait bien utile pour démarrer une réflexion susceptible d'aboutir.
Merci encore.

n°2373085
picotar
Timeo Danaos et dona ferantes
Posté le 05-01-2021 à 16:43:02  profilanswer
 

Bonjour MaybeEijOrNot,
Votre réponse m'a donné l'idée de tenter le codage de cette mise en page en PHP. Après bien des hésitations et beaucoup de déboires, j'ai réussi à pondre cette page qui répond à ma question initiale.
Le texte encadre automatiquement la photo sans qu'il soit besoin de reconstruire les coupures dans le texte à la main.  
 
http://cyberillac.com/toureiffel.php
 
Si cela vous intéresse je vous donne accès au fichier PHP sur ce lien.
 
https://www.dropbox.com/s/w23epvclw [...] l.php?dl=0
 
Merci de votre aide.
 

n°2373135
MaybeEijOr​Not
but someone at least
Posté le 05-01-2021 à 21:41:30  profilanswer
 

Bonjour,
 
J'ai oublié de répondre. Mais pour la solution JS/CSS je pensais au CSS pour gérer la taille des cadres et éventuellement découper les mots, puis au JS pour vérifier via les propriétés CSS la taille qu'occupe réellement les chaînes de caractères pour les découper en sous-chaînes à placer dans les bons blocs.
 
Avec un schéma HTML :
1 bloc d'une ligne complète (supérieur)
1 bloc à gauche de l'image, 1 bloc au milieu avec l'image, 1 bloc à droite de l'image
1 bloc d'une ligne complète (inférieur)


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2373154
picotar
Timeo Danaos et dona ferantes
Posté le 06-01-2021 à 09:24:20  profilanswer
 

Bonjour,
 
Idée à creuser mais effectivement source d'une belle prise de tête !
Je reste sur ma solution à base de php.
Même si elle n'est pas parfaite et si elle mérite des compléments d'essai avec des textes plus longs ou plus courts et des variantes de positions relatives photo/texte, je la garde sous le coude pour une exploitation future.
Merci de votre participation à la résolution de cet intéressant problème de mise en page.  

n°2373195
rufo
Pas me confondre avec Lycos!
Posté le 06-01-2021 à 11:56:09  profilanswer
 

La solution proposée pourrait poser des soucis dans le cas d'écrans pas très larges. Le bloc de texte de droite pourrait passer à la ligne. Ca peut être compliqué à gérer en responsive design :/


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Cantine Calandreta : http://sourceforge.net/projects/canteen-calandreta
n°2373277
picotar
Timeo Danaos et dona ferantes
Posté le 07-01-2021 à 09:23:12  profilanswer
 

Exact Rufo, je n'avais pas pensé à faire un essai en réduisant la largeur de l'écran.
Bien vu.
Il me reste " sur le métier à remettre mon ouvrage "

n°2373514
picotar
Timeo Danaos et dona ferantes
Posté le 09-01-2021 à 16:10:04  profilanswer
 

Bonjour Rufo,
Je crois avoir résolu le problème d'affichage sur écran étroit en encapsulant toute la page avec un CSS définissant un bloc de largeur 1000px.
 
http://cyberillac.com/toureiffel.php
 
Le fichier PHP est ici :
https://www.dropbox.com/s/h7voqcve6 [...] l.php?dl=0
 
Merci de me dire ce que vous en pensez.

n°2373516
rufo
Pas me confondre avec Lycos!
Posté le 09-01-2021 à 16:51:39  profilanswer
 

Ben si la résolution fait moins de 1000px de large, tu l'as dans l'os :o


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Cantine Calandreta : http://sourceforge.net/projects/canteen-calandreta
mood
Publicité
Posté le 09-01-2021 à 16:51:39  profilanswer
 

n°2373517
picotar
Timeo Danaos et dona ferantes
Posté le 09-01-2021 à 17:43:45  profilanswer
 

Certes, difficile de faire apparaître en entier un texte de 1000 px sur un écran de 500px de large. !
Dans ce cas on peut toujours l'explorer en utilisant l'ascenseur latéral tandis qu'avant l'encapsulation de la page il y avait des sauts de lignes qui désorganisaient l'affichage. Maintenant, l'effet d'encadrement de la photo par le texte reste stable, même si on ne voit pas tout...
Je n'ai pas la prétention avec ce truc de concevoir en "responsive design".
Merci en tout cas d'avoir répondu à mes questions.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Encadrer une photo avec un texte

 

Sujets relatifs
Récupération de données depuis un fichier texte[Résolu] aide pour manipulation fichier texte en powershell
Récupérer la valeur texte d'un site.Recuperation des données d'un fichier texte
Mettre du texte en couleur sous WordpressProblème de caractères spéciaux tkinter et fichier texte (Resolu)
Photo Webcam toutes les 10 minutes sur site webbalise hypertexte? vers paragraphe texte
Erreur #nom? dans texte_box sur Etatutiliser les valeurs d'un fichier texte [ résolu ].
Plus de sujets relatifs à : Encadrer une photo avec un texte


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR