Problème positionnement d'une note avec "vertical-align: top" [Résolu] - HTML/CSS - Programmation
Marsh Posté le 23-05-2012 à 10:18:49
balise <sup> et/ou vertical-align:super
Marsh Posté le 23-05-2012 à 13:46:07
Un grand merci pour ta réponse.
Tu m'amènes à quelque chose que j'avais oublié de mentionner. C'est que j'avais déjà essayé "vertical-align:
La différence d'interligne est mieux marquée lorsqu'on a la page entière devant les yeux. Le but est que l'interligne du paragraphe ne bouge pas bien évidemment.
Concernant la balise SUP, que devrais-je faire ?
Mon code ressemble à ceci:
<a class="anbp" href="#note1" id="appel1">1</a>
Comme je veux que l'appel de note ("1" ) soit un lien (c'est évident), je ne peux me passer de <a>.
La classe "anbp" reçoit ceci:
{
font-size: 0.65em;
vertical-align: super;
}
EDITION
Merci ! Grâce à toi et avec un minimum de réflexion, j'y suis arrivé :-)
<span class="banbpl">(</span><a class="anbp" href="#note1" id="appel1">1</a><span class="banbpr"> )</span>
devient
<sup>(</sup><sup><a class="anbp" href="#note1" id="appel1">1</a></sup><sup> )</sup>
Et j'utilise "vertical-align: super" pour SUP
Vous êtes des champions !
Marsh Posté le 23-05-2012 à 14:43:34
no pb
sinon tu peux juste faire
<sup>(<a href="#1">1</a> )</sup>
Marsh Posté le 23-05-2012 à 16:43:50
Très juste ! Et merci encore.
Pour être plus concis, c'est ce que je devrais faire, si ce n'est que j'ai maintenant :
<sup class="pgau">(</sup><sup><a class="anbp" href="#note1" id="appel1">1</a></sup><sup> )</sup>
la classe "pgau" me permettant seulement d'écrire un léger "margin-left" pour que mon appel de note ne colle pas au mot.
Marsh Posté le 23-05-2012 à 16:49:31
tu n'as pas besoin, tu peux appliquer le margin-left au style de sup
(ou un padding)
Marsh Posté le 23-05-2012 à 17:32:17
Oui, mais le margin-left ne doit valoir que pour la première parenthèse, la parenthèse ouvrante : "(". Si j'applique "margin-left" à SUP sans créer de sous-classe, j'aurai un truc comme MOT ( 1 ) au lieu de MOT (1).
Marsh Posté le 23-05-2012 à 19:09:22
ReplyMarsh Posté le 23-05-2012 à 20:52:44
Tu as parfaitement raison ! Je suis revenu à la forme plus concise que tu me proposais, une seule balise d'ouverture <sup>, pas de classe et ça fonctionne.
Merci mille fois l'ami pour être allé au bout de ton explication !
Aussi, je ne connaissais pas ce site (jsfiddle) : qu'est-ce que c'est bien !
Bonne soirée.
Marsh Posté le 18-05-2012 à 20:06:27
Bonjour,
Me voilà confronté à un problème CSS que je ne parviens pas à résoudre. Je me permets de vous présenter le cas, de la manière la plus concise que je pourrai.
Mon petit "1" (que j'ai placé entre parenthèses, ce qui ne change rien au cas) reçoit les attributs et valeurs CSS suivants :
J'aimerais pourtant que cet exposant dépasse l'alignement supérieur du texte de mon paragraphe, qu'il monte, à la façon du premier exemple, que j'extrais de la page http://semen.revues.org/9333. Mon "vertical-align: top" agit, le texte monte, mais il ne monte qu'un tout petit peu sans dépasser le texte qui l'entoure...
J'ai bien entendu essayé de trouver les déclarations d'un ordre plus général qui doivent influencer cette différence de positionnement de l'exposant entre mon site et le site dont je tire cet exemple. Sans succès jusqu'ici. Le code CSS de l'exemple utilise aussi le "vertical-align: top" et l'ancre ("a" ) ne reçoit rien de différent que chez moi, si ce n'est un "font-size" plus petit, mais toute modification de mon propre "font-size" ne change rien à la donne : quoi que je fasse, mon petit "1" ne montera pas. Afin que cette question reste lisible, je ne vous encombre pas du code parent qui doit déterminer la différence et que je n'arrive pas à repérer... Je vous le soumettrai bien évidemment au besoin, dès que quelqu'un aura une idée de ce qui peut faire défaut...
Merci d'avance.
Message édité par fnisse le 25-11-2012 à 12:18:37