France Hardware : Forums de discussion - Découvrez notre nouveau comparateur d'offres Internet
Retrouvez les prix près de chez vous :  
Index du forum | Liste des membres | Liste des groupes | Inscription | F-A-Q | Recherche
Pseudo :    Password :     
29 511 membres enregistrés - 2 069 318 posts - 122 026 topics
Index des forums FH  | Index des forums DegroupNews
      Programmation
           Langages Web
                ajouter une légende sous une image
126 connectés(record : 2799 le 29 May 2016 - 15 h 34)

Vous devez vous connecter pour répondre au topic.
ajouter une légende sous une image

loz
Put something exciting between your legs!

Messages : 7 998
Inscrit le 07/11/01
Ville : Fontaine (sud)
Non connecté
  Posté le 29 March 2014 - 23 h 58 m 26 s
Bonsoir,
Voyez-vous un moyen simple d'ajouter une légende sous une image.
En l'occurrence j'ai fait un petit site sans prétention pour une amie, agrémenté de quelques photos alignées à droite. Comment lui ajouter du texte sans foirer l'habillage du texte ?
Exemple : http://carocury.free.fr/liens.html



Vous cherchez des cours et des stages de photo à Grenoble ? http://photo-grenoble.com

Woofy
Totalement inutile, complètement indispensable

Messages : 31 539
Inscrit le 11/01/02
Ville : Lyon
Non connecté
  Posté le 30 March 2014 - 00 h 23 m 35 s
A part faire une <div> pour isoler l'image et y inclure le texte dessous (donc l'image + le texte dans la div, que tu positionne comme tu as positionné ton image), je ne vois pas trop.




loz
Put something exciting between your legs!

Messages : 7 998
Inscrit le 07/11/01
Ville : Fontaine (sud)
Non connecté
  Posté le 30 March 2014 - 17 h 23 m 11 s
J'ai essayé mais j'ai pas trouvé les options pour que mon div ne repousse pas le texte au dessous...



Vous cherchez des cours et des stages de photo à Grenoble ? http://photo-grenoble.com

loz
Put something exciting between your legs!

Messages : 7 998
Inscrit le 07/11/01
Ville : Fontaine (sud)
Non connecté
  Posté le 01 April 2014 - 22 h 54 m 42 s
Ayé j'ai trouvé !
Dans mon CSS :
    Code html    
1. #image_droite{float:right;margin-top:0px;margin-right:0px;padding-left:10px;font-style:italic}
Dans ma page :
    Code html    
1. <div id="image_droite"><img src="image/fichier.JPG"></img></br>Crédit photo Loz - 2012</div>


Merci !



Vous cherchez des cours et des stages de photo à Grenoble ? http://photo-grenoble.com

grabber
Coordinateur
MacBook Pro Powered

Messages : 9 506
Inscrit le 06/03/02
Ville : Angers
Non connecté
  Posté le 10 May 2014 - 17 h 51 m 27 s
sinon tu peux également incruster ta légende dans l'image très simplement.
pour cela, change un peu de méthode :
- tu conserves ton div pour le "bloc image"
- ton div contient ton image
- tu mets ta legende dans un span à l'intérieur du div (comme ci-dessus, tu mets juste <span> a la place du <br> et un </span> à la fin...)
- tu mets dans ta css ton div en position relative
- tjr dans la css, tu mets le span en position absolute et display block avec width 100% et bottom: 0 et z-index à 2.

et hop ! légende dans l'image.

si tu veux un petit overlay au dessus de l'image, tu n'as qu'a mettre un fond transparent à ton span via : background: rgba(255,255,255,0.4) pour faire du blanc avec 40% d'opacite par exemple

et tu peux aussi faire nettement plus propre semantiquement, en utilisant un peu de jquery. dans ce cas, tu mets ta legende dans le alt de l'image et via jquery tu recuperes ca et tu ajoutes le texte dynamiquement au dessus de l'image. l'avantage est que dans ton html, tu fais sauter ce div qui ne sert a rien et tu ne surcharges pas avec du texte hors balise ce qui n'est pas propre du tout ;) niveau référencement ce sera nettement mieux, semantiquement tu seras dans les clous aussi :)

pas mal d'autres solutions a base de css pour faire cela. solution aussi via php, par exemple au lieu d'afficher betement tes images brutes, tu peux les passer dans un script qui ajoute la legende directement dans l'image via image magick ou gd. tres simple a faire.

tout depend de ton but : du referencement ? de l'affichage basique ? de l'optimisation de semantique ? du choix ou non d'utiliser javascript ? ou php ?

voila :)

PS : je sais pas si c'est toi qui a fait le lien de photo de ta signature mais là y'a du boulot... les images redimensionnes hyper grosses associées a un hébergement lowcost de base de chez de base donnent vraiment un resultat "au secours" avec les images qui se chargent ligne par ligne comme en 1992 version modem 56k !!! c'est quand même dommage pour un photographe que son site manque a ce point d’esthétisme. une lightbox c'est gratuit pour les photos !!!



:firefox: :ol:

grabber
Coordinateur
MacBook Pro Powered

Messages : 9 506
Inscrit le 06/03/02
Ville : Angers
Non connecté
  Posté le 10 May 2014 - 17 h 54 m 10 s
pour les second tiret, il faut bien comprendre que l'image est en background de ton div ;)



:firefox: :ol:

Page genérée en 0.1011 secondes par RahForum 2.0 | Gzip off |  Stats |  Metaforums |  RSS
© 2004 Cerbere Systems.
Prix Matériel Informatique | Informatique Lyon | Informatique Grenoble | Informatique Annecy | Informatique Marseille | Informatique Bordeaux | Forum Informatique
ADSL | Actualité ADSL | Deligo | Appareil photo | Commande Au Volant
Creative Commons
Message Boards and Forums Directory