CSS boite de légende d'imageFermé

Question

Bonjour, 


Je voudrais créer une boite contenant une image, centrée sur la page, de manière à encadrer l'image, comme ceci : https://hfcreation.files.wordpress.com/2012/07/imagelegende1.jpg

Le défi, c'est que les dimensions de l'image seront variables, et par conséquent la boite qui l'encadre doit avoir des dimensions adaptées, tout en restant centrée sur la page ! (je ne veux pas modifier mon css avec la largeur de la boîte à chaque fois que je publierai une image...)

Le deuxième défi, (et c'est là que je coince), c'est qu'on doit pouvoir continuer à écrire sous cette structure. (Elle doit donc, à mon avis, rester dans le flux car sinon ce qu'on écrit sous l'image se superpose). Or, le seul moyen que j'ai trouvé pour que ma boîte ne prenne pas 100% de la largeur de la page, c'est de lui donner une position absolute...

Quelqu'un a-t-il une idée ?

Bakux · Answer

Si tu veux une marge entre ta boite et ton image de 20px, tu peux definir la taille de la boite comme la taille de l'image + 2*20px

Ensuite je réfléchis un peu ...

Un nouveau · Answer

Justement, le problème c'est que la taille de l'image est une inconnue ! (Avec cette solution, chaque fois que je publierai une image, je devrai ajuster son cadre manuellement... Ce qui, a priori, n'est pas le but des feuilles de style !)

Bakux · Answer

Tu m'as pas compris, tu fais un script en PHP qui récupère la taille de l'image, comme ça tout est automatique

Un nouveau · Answer

Ah, t'as raison c'est vrai en php ça pourrait marcher. Mais je suis sur un blog wordpress.com (je n'ai accès qu'au code de chaque post), et je ne suis pas sûr qu'ils acceptent qu'on utilise du php. (?) Par ailleurs, j'avais un peu touché au php il y a 3-4 ans, mais je crois que j'ai tout oublié...

Bakux · Answer

Tu peux trouver du code facilement sur Internet, ca serait avec plaisir que je t'aiderais, mais je suis déjà en retard ;). Bonne chance

Un nouveau · Answer

C'est normal ;)
En tous cas merci pour ton aide ! J'avais pas du tout pensé à chercher du côté du php. Je vais voir ce que je vais pouvoir faire.
Et si au passage quelqu'un passe par là et connaît une astuce qui se contente du html/css, je suis preneur !
A+

CSS boite de légende d'image

6 réponses

Newsletters