5566 sujets
Sémantique web et HTML
Bonjour, oui c'est possible en CSS, un peu de cette manière sauf que tu ne le fait pas avec hover comme dans cet exemple mais tu le positionnes de façon permanente. (enfin l'idée est la).
Bonjour,
un grand classique. C'est expliqué sur ce site, avec la position relative et absolute.
https://www.xul.fr/css/texte-sur-image.php
Sinon, sans coder, on peut le faire sur ce site :
https://www.iloveimg.com/compress-image
Il y a la possibilité de mettre du texte sur une image, dans la fonction "Watermark". Ce site est une mine d'or pour retoucher les images.
Figcatption sert pour légender, pas pour superposer du texte à une image.
Quand c'est destiné à être définitif, je le fais parfois avec Gimp, qui donne plus de possibilités sur le texte.
un grand classique. C'est expliqué sur ce site, avec la position relative et absolute.
https://www.xul.fr/css/texte-sur-image.php
Sinon, sans coder, on peut le faire sur ce site :
https://www.iloveimg.com/compress-image
Il y a la possibilité de mettre du texte sur une image, dans la fonction "Watermark". Ce site est une mine d'or pour retoucher les images.
Figcatption sert pour légender, pas pour superposer du texte à une image.
Quand c'est destiné à être définitif, je le fais parfois avec Gimp, qui donne plus de possibilités sur le texte.
@Bongota Bonjour, c'est exact qu'il faut utiliser la position relative et absolute. Par contre le code donné dans ton premier lien est tout sauf à suivre. Il n'est pas valide en HTML5 et comporte de mauvaises pratiques.
La balise <center> est obsolète depuis 1999 soit 25ans.
Pas d'attribut alt pour la balise <img>, cet attribut est obligatoire même vide.
Le style inline est à éviter, il est préférable d'utiliser un fichier CSS séparer.
Pour ces raisons je déconseille d'utiliser le code donné dans cet exemple. => Obsolète
>> Figcatption sert pour légender, pas pour superposer du texte à une image.
Je ne suis pas d'accord. Le HTML sert de structure et le CSS sert à mettre en forme la structure HTML. Si il est pertinent d'utiliser les balises figure et figcaption car plus sémantique que <div>, il peut être, dans certain cas, intéressant visuellement de modifier la position de la légende. Le CSS est à propos dans ce cas.
Il n'est dit nul par que l'on ne peut pas superposer une légende sur une image.
La règles indiquée dans la doc MDN est cependant à respecter.
A vous,
La balise <center> est obsolète depuis 1999 soit 25ans.
Pas d'attribut alt pour la balise <img>, cet attribut est obligatoire même vide.
Le style inline est à éviter, il est préférable d'utiliser un fichier CSS séparer.
Pour ces raisons je déconseille d'utiliser le code donné dans cet exemple. => Obsolète
>> Figcatption sert pour légender, pas pour superposer du texte à une image.
Je ne suis pas d'accord. Le HTML sert de structure et le CSS sert à mettre en forme la structure HTML. Si il est pertinent d'utiliser les balises figure et figcaption car plus sémantique que <div>, il peut être, dans certain cas, intéressant visuellement de modifier la position de la légende. Le CSS est à propos dans ce cas.
Il n'est dit nul par que l'on ne peut pas superposer une légende sur une image.
La règles indiquée dans la doc MDN est cependant à respecter.
a écrit :
l'élément <figcaption> doit être le premier ou le dernier élément fils pour cet élément <figure>.
A vous,
Bonjour,
Comme personne ne donnait vraiment un lien, je l'ai fait, sans effectivement vérifier en profondeur sa validité.
Le but était juste de donner l'astuce position relative position absolute avec un peu de code qui va avec. Après, les balises Alt, le inline, c'est à chacun de rectifier. Beaucoup de codes proposés sur le net sont donnés avec un style inline, sans balises Alt et parfois avec des valeurs données en px afin de simplifier. L'important étant de donner la réponse à une question, sans surcharger le code pour le respect de la validité.
Si on fait un site sans avoir conscience que les exemples ne sont que des exemples qui répondent à une question, mais que l'on doit soi-même compléter et valider le code donné, effectivement, problème. Combien de codes j'ai pris sur le net afin de résoudre un problème, mais que j'ai été obligé de compléter pour la validité, je ne compte plus.
Oui, on peut avec figcaption aussi superposer une image, mais ce serait bien de donner l'astuce, plutôt que de chercher la validité du code.
Comme personne ne donnait vraiment un lien, je l'ai fait, sans effectivement vérifier en profondeur sa validité.
Le but était juste de donner l'astuce position relative position absolute avec un peu de code qui va avec. Après, les balises Alt, le inline, c'est à chacun de rectifier. Beaucoup de codes proposés sur le net sont donnés avec un style inline, sans balises Alt et parfois avec des valeurs données en px afin de simplifier. L'important étant de donner la réponse à une question, sans surcharger le code pour le respect de la validité.
Si on fait un site sans avoir conscience que les exemples ne sont que des exemples qui répondent à une question, mais que l'on doit soi-même compléter et valider le code donné, effectivement, problème. Combien de codes j'ai pris sur le net afin de résoudre un problème, mais que j'ai été obligé de compléter pour la validité, je ne compte plus.
Oui, on peut avec figcaption aussi superposer une image, mais ce serait bien de donner l'astuce, plutôt que de chercher la validité du code.