[Résolu] Problème positionnement d'une note avec "vertical-align: top"

Problème positionnement d'une note avec "vertical-align: top" [Résolu] - HTML/CSS - Programmation

Marsh Posté le 18-05-2012 à 20:06:27    

Bonjour,
 
http://www.francoisnisse.be/nosite/pb_verticalalign.jpg
 
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 :

Code :
  1. font-size: 0.65em;
  2. vertical-align: top;
  3. text-decoration: none;
  4. font-weight: 700;


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
Reply

Marsh Posté le 18-05-2012 à 20:06:27   

Reply

Marsh Posté le 22-05-2012 à 22:47:51    

Up!

Reply

Marsh Posté le 23-05-2012 à 10:18:49    

balise <sup> et/ou vertical-align:super


Message édité par pop-pan le 23-05-2012 à 10:19:19

---------------
Plop !
Reply

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:  
 
http://www.francoisnisse.be/medias/imgs/pb_verticalalign2.jpg
 
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 !


Message édité par fnisse le 23-05-2012 à 13:57:20
Reply

Marsh Posté le 23-05-2012 à 14:43:34    

no pb :)
sinon tu peux juste faire
<sup>(<a href="#1">1</a> )</sup>


---------------
Plop !
Reply

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.

Reply

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)


---------------
Plop !
Reply

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).


Message édité par fnisse le 23-05-2012 à 17:32:28
Reply

Marsh Posté le 23-05-2012 à 19:09:22    

normalement non:
http://jsfiddle.net/3TEjc/


---------------
Plop !
Reply

Marsh 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.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed