[Résolu] Inline-block dans un <p>

Bonjour à tous
On peut parfaitement mettre une balise stylée "inline-block" dans une balise <p>... à condition de lui donner un nom du genre <span> ou <img>.
Ainsi une balise <figure> n'est pas acceptée dans un <p> par le navigateur, qui ferme la balise <p> lorsqu'il renctonre <figure>
Le seul contournement que j'ai trouvé c'est quelque chose comme:

<p>......
   <span class="figure"><img...><span class="figcaption">contenu de figcaption</span></span>
</p>

en les stylant convenablement en CSS.

Question: connaissez vous un moyen moins barbare de faire ça?

Salut

J'imagine que tu n'a d'autres choix que de passer par des éléments <p></p> ?

JENCAL a écrit :
Salut

J'imagine que tu n'a d'autres choix que de passer par des éléments <p></p> ?

Quand j'ai le choix, bien entendu je mets une balise <figure>

J'ai découvert ce problème par un biais détourné: j'ai une balise

<abbr>texte</abbr>

Pour faire apparaître la signification de cette abréviation autrement par un tilte="" un peu obsolète dans le monde des mobiles, j'ai écrit

<abbr>texte<span>le texte explicatif</span></abbr>

en stylant ça correctement, on ne voit le texte explicatif que quand on clique sur la balise.
J'ai stylé le <span> sous forme d'un inline-block;position:absolute; qui va s'afficher au dessous de la ligne qui contient le texte d'appel.

C'est tout à fait ce que je veux, mais je me suis demandé si je ne pourrais pas aller plus loin et mettre une image dans le texte explicatif.
Pas de problème pour une image, mais pas possible de mettre une figure.
J'ai cherché une solution, j'ai trouvé celle que j'ai exposée plus haut et je me suis simplement demandé si on pouvait faire autrement.
J'ai également un mécanisme beaucoup plus lourd qui consiste à avoir une <aside> après le </p> qui suit l'appel.

Ce serait tout de même plus simple pour la personne qui écrit la page de mettre le texte explicatif dans la balise <abbr> ou juste après </abbr>, mais on tombe sur la limite des balises qu'on peut mettre dans un <p>
Cette liste avait un sens avant CSS3 et display:inline-block; mais maintenant on peut se poser la question. C'est bien sûr lié au fait que le moteur du HTML et celui du CSS sont traités de façon séparée dans les navigateurs.
Modifié par PapyJP (28 May 2019 - 12:55)

Merci de ta réponse
En fait les "grosses" choses sont appelées par <dfn> et activent une <aside> modale, mais pour qu'elle soit affichée juste au dessous il faut un script qui aille
1) retrouver la bonne <aside>
2) la positionner au bon endroit dans la page
3) la rendre visible
ça marche très bien, je voulais simplement si on pouvait faire plus simple

Les "petites" choses, à mon avis, relèvent de <abbr>, sauf qu'on ne peut pas faire de mise en page sur les title='..." et que les title ne marchent pas sur mobile.

<abbr>Pharaon<span>Désignant originellement la "grande maison" le mot "per-aâ" <img src="https://www.universalis.fr/data/medias/formule/ev171016a.png" alt="per-aâ"> est utilisé pour désigner le souverain à partir de la période Amarnienne <i>(vers 1370 avant J.-C. )</i></span></abbr> 

Il suffit de styler

abbr span {
   position:absolute;
   ....
  display:none;
}
abbr.active span {display:table;}

et d'ajouter un eventLIstener à tous les éléments <abbr> pour activer/déactiver ces balises sur clic.
Sauf à utiliser des <span class="defitition"> et <span class="abbreviation">, ou <a class=..;"> je ne vois pas de balises plus appropriées que <dfn> et <abbr> pour traiter ces situations. De plus c'est plus facile pour la personne qui écrit le texte et pour la personne qui écrit les scripts si ces objets peuvent être désignés par une balise spécifique.

Autant que j'aie compris, <button> n'a pas sa place dans <p>, et par ailleurs, pour moi, <button> est sémantiquement un objet identifiable comme tel et pas un simple bout de texte avec une présentation particulière.

On pourrait sans doute inventer une nouvelle balise, c'est théoriquement possilbe, mais à mon avis ça créerait encore plus de confusion pour le lecteur.
Modifié par PapyJP (29 May 2019 - 18:34)

Bonjour à tous
Je réactive ce fil, car en poursuivant mes essais je tombe sur une situation étrange et j'aimerais votre opinion.

Mon objectif, c'est d'avoir à l'intérieur d'un <p> une zone de texte cliquable, telle qu'un clic sur cette zone fasse apparaître au dessous un popin <aside>.

Si j'écris

<p>le début du texte <dfn>la zone cliquable<aside>la zone popin</aside></dfn> la fin du texte</p>

comme <aside> est une balise de type bloc, le navigateur ferme la balise <p> et génère

<p>le début du texte <dfn>la zone cliquable</dfn></p>
<aside>la zone popin</aside>
la fin du texte
<p></p>

Pour contourner ce comportement (parfaitement normal) j'ai donc développé deux solutions
1) une pour les popin ne contenant que des balises de type inline, dans laquelle le popin se trouve à l'intérieur de la zone cliquable, son positionnement étant géré par CSS
2) une dans laquelle le popin est un <aside> (en dehors du <p> bien entendu).
- un script JS apparie la zone cliquable et le popin
- quand on clique sur la zone cliquable, le script met la valeur du "top" à la valeur du bas de la zone cliquable.
Comme on doit prévoir que l'utilisateur puisse changer la taille ou l'orientation de cette fenêtre, cette valeur doit être recalculée sur onsize et onorientationschange, ce qui est un peu lourd

Pour essayer de faire gérer la position du popin par CSS j'ai fait l'essai suivant :
Lorsque le script apparie la zone cliquable et la popin,, il met le popin à l'intérieur de la zone cliquable, c'est à dire que je fais en JS ce que le navigateur n'accepte pas si je le fais directement en HTML: un <aside> dans un <p>
Et de façon très étonnante, cela semble marcher du moins sous FireFox.

Avant de tester si cette solution "hérétique" fonctionne sous d'autres navigateurs, j'aimerais votre avis.

Felipe avait proposé d'utiliser la balise <button>.
Je n'avais pas saisi que <button> est une balise qui est considérée comme "inline" mais qui est en fait un "inline-block" à l'intérieur de laquelle on peut mettre un <aside>
C'est effectivement la bonne solution: en écrivant

<p>début du texte
  <button class="note">texte d'appel
      <aside>le contenu à afficher</aside>
   </button>
fin du texte</p>

Avec un peu de CSS pour styler ça et un addEventListener sur la balise <button> ça donne ce que je veux.
Merci à tous pour votre aide, et en premier lieu à Felipe.

Note: intéressant de noter que la balise <button> ne contenait initialement que du texte. Le fait que maintenant elle puisse contenir autre chose n'a pas changé le fait que les navigateurs la considèrent toujours comme inline
Modifié par PapyJP (05 Jun 2019 - 10:52)