Comment mettre une légende sous une image?

Bonjour,
Je voudrais mettre la légende "Felix Baumgardner...." sous l'image.
Cela ne fonctionne pas avec <figure> ....<figcaption>.
Mon seul recours est donc Alsacréation.
Merci de m'aider.

Greg_Lumiere a écrit :
Par contre quelle déception de voir ce post insipide qui ne contient pas un gramme de code.

Bonjour Greg. Eh oui, je suis toujours à coder.
Je pensais que la réponse était si simple .... qu'il n'y avait pas besoin de code.

Donc voila:

<iframe class="floatright" width="560" height="315" src="https://www.youtube.com/embed/BbNXAGZjaSI" frameborder="0" allowfullscreen></iframe>
<span class="gras">Tout objet en chute libre dans l'atmosphère passe en autoration incontrolée.</span> Les parachutistes connaissent ce danger: ............et ne pourront plus ouvrir leur parachute. <br />
<a href="https://youtu.be/xRJHBAiIywk?t=22s">Autorotation d'un parachutiste</a><br />
Chute de Felix Baumgardtner, depuis 39 km d'altitude.

Je ne mets pas le CSS, aucun intérêt pour ce passage.

C'est une partie la 2ème page de mon site.
Déjà 1700 visiteurs, en 3 semaines.

Merci pour ton aide.
Modifié par abeille (28 May 2016 - 20:23)

abeille a écrit :

Je pensais que la réponse était si simple .... qu'il n'y avait pas besoin de code.

Je peux te dire que je ne m'attendais pas à une iFrame. En plus tu parles de figure dans ton premier message mais elle est où dans ton scheme ??? (j'ai du rater un truc là ; ben non, à la relecture, je ne vois pas de figure).

abeille a écrit :
Je ne mets pas le CSS, aucun intérêt pour ce passage.

T'as bien raison ! Je vais essayer de deviner comment sont placés tes éléments les uns-par rapport aux autres et les effets de cascade.

En partant de l'hypothèse que ta balise figure est en cours de voyage sur orbite, en partant de l'hypothèse que tous tes éléments ne subissent aucun effet de cascade qui modifierait le layout et en partant aussi de l'hypothèse que tes éléments sont placés dans leur ordre naturel et relativement (de façon implicite) par rapport à leur parent,
je dirais qu'il te faille placer ton span en position absolue et lui fixer ses coordonnées et ton iFrame en position relative.

Maintenant si je garde mon hypothèse sur la balise figure mais que je considère que tu es dans un layout de type table ou flexbox, je pencherais pour l'utilisation de la propriété vertical-align sur le fameux span.

Mais peut-on vraiment se fier à une réponse basée sur tant d'hypothèses ?

abeille a écrit :
Déjà 1700 visiteurs, en 3 semaines.

Tu sais les chiffres ne signifient pas grand chose pour moi. 1700 humains ou humains et robots (ou oups tu n'y avais pas pensé) ?
Ça me rappelle l'époque des compteurs de visite

a écrit :
Merci pour ton aide.

Mais de rien, si j'ai la réponse (ou plutôt une proposition de réponse) pourquoi devrais-je la garder pour moi alors que cette même information ne m'a pas coûtée ?!


Edit : Je me suis mélangé les pinceaux entre picture et figure. Corrigé.
Modifié par Greg_Lumiere (28 May 2016 - 20:38)

Au fait, c'est vraiment indispensable cette architecture ?
Perso iFrame + span bof bof

Une balise video ne conviendrait-elle pas plus ? Je la verrais bien dans une jolie balise figure qui aurait donnée naissance à une jolie figcaption pleine de sens. Une jolie petite famille accessible et pleine de charme.

Greg_Lumiere a écrit :
Décidement, je ne comprendrais jamais ça. Un élément se place à gauche par défaut. Son utilisation devrait-être rarissime.

Ah bon! Je ne savais pas ça!
Merci pour l'info.

Greg_Lumiere a écrit :

Tout ceci ne dit en rien si tu t'en sors avec ta légende. T'en es où à ce propos ?

Rien de neuf, je ne sais pas comment mettre ma légende sous l'image.
On s'est un peu perdu car tu me demandais mon code Css, mais c'est pas utile dans ce cas, il n'y a pas d'effet cascade sur cette page.
Modifié par abeille (29 May 2016 - 12:50)

Bonjour,

abeille a écrit :
Rien de neuf, je ne sais pas comment mettre ma légende sous l'image.
On s'est un peu perdu car tu me demandais mon code Css, mais c'est pas utile dans ce cas, il n'y a pas d'effet cascade sur cette page.

Nan, mais qu'est-ce que quoi ?
Mais c'est justement le CSS qu'il nous faut pour t'aider...
Effet cascade ? (incompréhension de l'acronyme ?)

SolidSnake a écrit :
Bonjour,

Nan, mais qu'est-ce que quoi ?
Mais c'est justement le CSS qu'il nous faut pour t'aider...
Effet cascade ? (incompréhension de l'acronyme ?)

Moi je veux bien, mais je ne pense que cela aidera à résoudre mon problème, en l'occurence, mettre une légende sous une image.
Ne craquez pas car je ne respecte pas trop l'indentation, sinon ça fait un code de centaines de lignes, et je trouve (perso) que c'est pas très pratique. JE préfère tout mettre sur une seule ligne.

body{margin: 0;
	background-color:#F2F2F2;
	font-family: tahoma, arial, helvetica, sans-serif;
	font-size: 150%;
	line-height: 150%;
	text-align: justify;}

body.index{margin: 0;background-image: url('accueil/photos/couleurjaune.jpg');}
body.contact{margin: 0; background-image: url('accueil/photos/couleurbleu.jpg');}
body.auteur{margin-left: 20%; margin-right:20%;}

.corpsdepage{background-color: #f2f2f2; margin-left:9% ;margin-right:9%; }
.titreaccueil{position: fixed; top: 14%; left: 15%;color: blue; font-size:200%;font-weight: bold;}
	

/*           +++++++++++ BANDEAU  ++++++++++++++ */
.bandeau_index{width: 100%;height:15%;position:fixed; top:0%; z-index: 1000;}

.bandeau{width: 100%;height:7%;position:fixed; top:0%; background-color: black;z-index: 1000;} 
.bandeau_contact{width: 100%;height:7%;position:fixed; top:0%; background-color: transparent; z-index: 1000;} 
.bandeau_auteur{width: 100%;height:7%;position:fixed; top:0%; background-color: #F2F2F2;z-index: 1000;} 

.boutonaccueil{position: fixed; top: 1%; left: 15%;}
.boutoncontact{position: fixed; top: 1%; left: 45%;}
.boutonauteur{position: fixed; top: 1%; left: 65%;}
.moi2{position: fixed; top: 1%; left: 75%;}
.moi{position: fixed; top: 4%; left: 64%; color: white; font-size:90%;}
.drapeaufrance{position: fixed; top: 1%; right: 8%;}
.drapeauespagne{position: fixed; top: 1%; right: 2%;}
		

.contacter{display: none;}
.sabonner{position: fixed; bottom: 4%; right: 4%; background-color: green; border: 1px solid blue; border-radius: 20px 20px 20px 20px;font-family: Pacific ;font-size: 60%;}
.pagesabonner{border: 1px solid green; border-radius: 20px 20px 20px 20px;}

.iconeretour{position: fixed; font-size: 2em; right: 0; bottom: 2%;}
.titrechapitre{ font-size: 170%; color: blue; font-weight: bold;text-decoration: underline;}

.sommaire{font-size: 140%; text-align: left;line-height: 140%;font-weight: bold; text-decoration: none;}/* formatage sommaire pages */
		
.textetitre{ position:absolute; top: 30%; left: 1%; right: 1%;text-align: center; color: white;font-size: 240%  }/* formatage texte titre des pages*/
.textetitrelune{ position:absolute; top: 20%; left: 1%; right: 1%;text-align: center; color: red;font-size: 240%  }/* formatage texte titre des pages*/

.titresommaire{font-size: 170%; text-align: left;text-decoration: underline;font-weight: bold;color: blue; line-height: 200%;} 

img {
  max-width: 100%;
       }


/*           ++++++++ PHOTOS ACCUEIL  ++++++++++ */
.bombeac{position: fixed;left: 12%;top: 30%;max-width: 100%;}
.aldrin{position: fixed; left: 30%;top: 30%;max-width: 100%;}
.iss{position: fixed;left: 48%;top: 30%;max-width: 100%;}
.et{position: fixed; left: 66%;top: 30%;max-width: 100%;} 
 



/*           +++++++++++ POLICES  ++++++++++++++ */
.fontgros{font-size: 200%;}
.fontpetit{font-size: 70%; line-height: 100%;}
.rouge{color: red}
.orange{color: orange;font-size: 130%;}
.gras{font-weight: bold;}
.blanc{color: #F2F2F2;}
.bleu{color: blue;}
.transparent{color:transparent;}
.souligner{text-decoration : underline;}

/*           +++++++++++ FLOAT  ++++++++++++++ */
.floatleft{float: left; border: 15px solid #F2F2F2;}
.floatright{float: right; border: 15px solid #F2F2F2;}
.floatleft a{float: left; border: 15px solid #F2F2F2;}
.floatright a{float: right; border: 15px solid #F2F2F2;}
.imagegauche{float: left; border: 15px solid #F2F2F2;}
.imagedroit{float: right; border: 15px solid #F2F2F2;}
.floatrightpasdebordure a{float: right; border: none;}
.floatrightpasdebordure img{float: right; border: none; text-align: left;}
.leftpasdebordure{float: left; border: 15px solid #e0e0e0; text-align: left;}
.bordure {border: 15px solid #e0e0e0;}

Voila, c'est vraiment très simple.

Merci pour votre aide.
Modifié par abeille (31 May 2016 - 15:33)