28111 sujets

CSS et mise en forme, CSS3

Salut

Pour mes images j'utilise depuis longtemps <figure>, mais uniquement pour les images car je m’étais mis en tête que c’était réservé aux images. Et en lisant l'article d'Alsa HTML5 : Éléments <figure> et <figcaption> je me suis rendu compte que non (pourquoi je m’étais mis ça en tête, grand mystère Smiley langue ). Du coup, dans la refonte du site de notre asso je voudrais mettre un bouton juste en dessous d'une image :

<figure>
		<img>
		<p class="bouton">
			<a>Plus d'info</a>
		</p>
	</figure>


Est-ce possible ? je dirais que oui, car dans l'article il y a des exemples où les balises <pre>, <code> et <video> sont mise dans <figure>. Donc j'imagine qu'une balise <p> c'est aussi possible.
Modifié par schtroumph (31 May 2018 - 11:35)
Je ne suis pas sur j'ai l'impression que ton bouton tu vas devoir le mettre dans figcaption pour renvoyer à une page par exemple ou ouvrir un quelconque contenu sur ton site , bien que le seul moyen de savoir c'est de tester Smiley cligne
Modérateur
Bonjour,

Ceci est tout à fait envisageable. En fait <figure> n'est ni plus ni moins que l'équivalent d'une <div> avec une "petite" valeur ajoutée: le sens. Elle fait partie des balises sémantiques introduites par la version 5 de html.

Cette balise indique un ensemble qui représente un tout dont les composantes prises à l'unité n'ont pas lieu d'être.

Par exemple, dans le cas classique de l'image et de sa légende, si on enlève du code l'image, la légende n'a plus de raison d'être.

C'est ce qui fait qu'il est possible d'y fourrer à peu près tout ce que l'ont souhaite.

Attention toutefois une règle prévaut, il faut toujours se demander si une autre balise ne serait pas plus appropriée. Ce peut être le cas par exemple:
- pour un texte accompagné de graphiques et autres auquel cas <article> ferait certainement mieux l'affaire
- une liste d'éléments auquel cas on se tournera plutôt vers <ul>
- un menu de navigation contiendra une liste dans une <nav>
- un contenu adjacent aura plus sa place dans un <aside> (qui pourra lui-même contenir des figures bien sûr)
etc et c'est Terra !

Dans votre exemple cela me paraît tout à fait justifié. En effet, le lien ne concerne que l'image présentée, il ne peut donc pas être sortit de cet encadrement. Même chose pour le paragraphe (PS: un <p> pour faire un bouton ? Drôle d'idée !) qui se rapporte complètement à l'image.
Modifié par Greg_Lumiere (31 May 2018 - 13:38)
Modérateur
Tryno a écrit :
Je ne suis pas sur j'ai l'impression que ton bouton tu vas devoir le mettre dans figcaption pour renvoyer à une page par exemple ou ouvrir un quelconque contenu sur ton site , bien que le seul moyen de savoir c'est de tester Smiley cligne
Oula surtout pas !!!

La fonction de Figcaption est de fournir une légende, c'est son seul rôle. Le détourner au profit d'un bouton, d'un lien ou toute autre idée saugrenue est à oublier d'office.

Il existe suffisamment de balises pour ne pas avoir à en arriver là Smiley langue Smiley biggrin


Afin d'enlever tout doute, il n'est pas obligatoire d'inclure une figcaption dans une figure.
Modifié par Greg_Lumiere (31 May 2018 - 13:38)
Greg_Lumiere a écrit :
Oula surtout pas !!!

La fonction de Figcaption est de fournir une légende, c'est son seul rôle. Le détourner au profit d'un bouton, d'un lien ou toute autre idée saugrenue est à oublier d'office.

Il existe suffisamment de balises pour ne pas avoir à en arriver là Smiley langue Smiley biggrin


Afin d'enlever tout doute, il n'est pas obligatoire d'inclure une figcaption dans une figure.


Je ne faisais que des supposition espérons que ton commentaire le décourage perso je n'aime pas trop détourner les balises je galère déjà assez à choisir la bonne balise a utilisée Smiley prie
Modérateur
@Tryno; Je ne sais pas quel "genre" de bouton il souhaite intégrer mais l'auteur n'a pas mentionné pour ce faire l'usage d'un figcaption. Je reste d'accord avec vous dans la mesure où le choix d'un paragraphe n'est pas beaucoup mieux Smiley cligne
Edit : Je voyais <p> et <a> comme des enfants directs de figure alors qu'en fait la class bouton sert à styliser le lien qui aura l'apparence du bouton. Du coup maintenant je vois bien le style de bouton.

Le choix de balise appropriée est une excellente activité cérébrale qui aide à se prémunir des dégénérescences cognitives Smiley ravi
Modifié par Greg_Lumiere (31 May 2018 - 14:15)
Non mais la volonté était de mettre un bouton sous l'image si j'ai bien compris le topic donc pour mettre quelque chose en dessous d'une image facilement figcaption est une bonne balise non ? (combiner avec figure bien sur)

Je ne pense pas être dégénérescent du moins pas encore Smiley roflol
Tryno a écrit :
Je ne suis pas sur j'ai l'impression que ton bouton tu vas devoir le mettre dans figcaption pour renvoyer à une page par exemple ou ouvrir un quelconque contenu sur ton site , bien que le seul moyen de savoir c'est de tester Smiley cligne

En fait dans mon 1° message je me suis mal exprimé. Je ne voulais pas demander si c'etait possible, mais si sémantiquement c’était propre. Car oui c'est possible et l'ensemble s'affiche bien (j'avais essayé pour voir ce que ca donnait Smiley langue ).

Greg_Lumiere a écrit :

Dans votre exemple cela me paraît tout à fait justifié. En effet, le lien ne concerne que l'image présentée, il ne peut donc pas être sortit de cet encadrement. Même chose pour le paragraphe (PS: un <p> pour faire un bouton ? Drôle d'idée !) qui se rapporte complètement à l'image.

Effectivement le bouton est en relation avec l'image.

Greg_Lumiere a écrit :
...(PS: un <p> pour faire un bouton ? Drôle d'idée !) qui se rapporte complètement à l'image.

Pour le <p> du bouton c'est comme pour le <figure>, ça fait longtemps que je fait comme ça, mais je ne me suis jamais posé la question s'il y avait mieux. Et apparemment il y a mieux Smiley smile

Greg_Lumiere a écrit :
@Tryno; Je ne sais pas quel "genre" de bouton il souhaite intégrer mais l'auteur n'a pas mentionné pour ce faire l'usage d'un figcaption. Je reste d'accord avec vous dans la mesure où le choix d'un paragraphe n'est pas beaucoup mieux Smiley cligne

Tu entend quoi par " quel "genre" de bouton " ?
Modifié par schtroumph (31 May 2018 - 14:19)
Modérateur
Tryno a écrit :
Non mais la volonté était de mettre un bouton sous l'image si j'ai bien compris le topic donc pour mettre quelque chose en dessous d'une image facilement figcaption est une bonne balise non ? (combiner avec figure bien sur)
Je ne suis pas d'accord. Le bouton en question ne sert pas à légender l'image mais à offrir un accès à une information complémentaire en rapport avec l'image.

Idéalement, on devrait plutôt se rapprocher de cette structure:

<figure>
  <img src="chien.png" title="" alt="un labrador noir qui court dans un parc publique">
  <figcaption>Mon chien dans toute sa splendeur</figcaption>
  <div class="button">
    <a href="/Mon-chien.php" title="ouvre une pop-up">Fiche d'identité de mon chien</a>
  </div>
</figure>


Tryno a écrit :
Je ne pense pas être dégénérescent du moins pas encore Smiley roflol
Ouf !
Modérateur
@schtroumph:
Pour "genre de bouton", je me suis répondu en edit...
<p> est une marque de paragraphe donc pour moi ça signifie du texte avec ou sans retour à ligne (br).
A mon sens un lien dans un paragraphe est acceptable si une partie du texte représente le lien. Par exemple:
<p>blabla <a href="Definition-wikipedia.fr">blabla</a> bla bla bla<br>blablabla bla bla blablabla</p>

<!-- ou encore -->
<p>blabla blabla bla bla bla blablabla bla bla blablabla. <a href="more.php">En savoir plus</a>.</p>
Vous voyez ?

Pour un bouton... bah quand y'a rien il reste toujours div/span.


Ce n'est pas parce que techniquement une chose fonctionne qu'elle correspond aux normes. Par exemple, si on considère ce bout de code comme étant ma page html dans son entier
<p>Hello world !</p>

Hé bien elle fonctionne ! Pourtant il manque des dizaines de choses pour la rendre valide (doctype, indication du language, en-tête, body etc...).
Modifié par Greg_Lumiere (31 May 2018 - 14:32)
Modérateur
Notez que
<div class="button"><a></a></div>

peut très bien être remplacé par
<a class="button></a>
si vous n'avez aucune d'intention d'ajouter quelque-chose dans la div et si côté Css votre bouton ne nécessite pas de conteneur unique.
Est ce que maintenant avec le besoin de mettre en responsive laisser la <div> n'est pas légèrement plus simple ?