Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1570 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°2142928
fnisse
Posté le 18-05-2012 à 20:06:27  profilanswer
 

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
mood
Publicité
Posté le 18-05-2012 à 20:06:27  profilanswer
 

n°2143359
fnisse
Posté le 22-05-2012 à 22:47:51  profilanswer
 

Up!

n°2143383
pop-pan
yay!
Posté le 23-05-2012 à 10:18:49  profilanswer
 

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


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

---------------
Plop !
n°2143403
fnisse
Posté le 23-05-2012 à 13:46:07  profilanswer
 

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
n°2143407
pop-pan
yay!
Posté le 23-05-2012 à 14:43:34  profilanswer
 

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


---------------
Plop !
n°2143436
fnisse
Posté le 23-05-2012 à 16:43:50  profilanswer
 

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.

n°2143437
pop-pan
yay!
Posté le 23-05-2012 à 16:49:31  profilanswer
 

tu n'as pas besoin, tu peux appliquer le margin-left au style de sup
(ou un padding)


---------------
Plop !
n°2143449
fnisse
Posté le 23-05-2012 à 17:32:17  profilanswer
 

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
n°2143463
pop-pan
yay!
Posté le 23-05-2012 à 19:09:22  profilanswer
 

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


---------------
Plop !
n°2143470
fnisse
Posté le 23-05-2012 à 20:52:44  profilanswer
 

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.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
flash cs5.5 chrono probleme[AC 2003] Probleme d'ouverture après modification de droits
probléme récéption données java socketC++ Builder répertoire problème !!
[VB] problème de timerProbleme OpenGL
Problème d'insertion de donnée ODB dans un QTableView[resolu] Nettoyer du code html pour enlever certaines balise inutiles
[Résolu] Problème de code ou tout à fait normal ? 
Plus de sujets relatifs à : [Résolu] Problème positionnement d'une note avec "vertical-align: top"


Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)