Bonjour,
Je rencontre un problème bizarre : dans un texte où je voudrais mettre en "exposant" le "ème" ou "ième" ou "er" après un nombre ou le chiffre 1, j'ai utilisé la balise <sup> qui apparemment est faite pour cela.
Mais elle se révèle totalement sans effet, on reste à 1er, 22ème, sans modification. Testé avec FF, IE et Chrome, même résultat. Mais l'exemple du W3C donne le résultat attendu, quel que soit le navigateur.
J'ai résolu le problème en redéfinissant dans le CSS
sup { vertical-align: text-top;
font-size: smaller; }
mais je trouve que ce n'est pas très logique.
J'ai l'impression que l'anomalie est liée au fait que je travaille dans un ensemble "flex", mais je ne sais pas pourquoi, ni comment pouvoir y utiliser directement la balise sup prédéfinie.
Dans mon CSS :
Dans le html, le bloc_ppal contient un header, le [b] .cont_deuxcol [/i] et le footer
Modifié par oldmerou (24 Feb 2015 - 14:52)
Je rencontre un problème bizarre : dans un texte où je voudrais mettre en "exposant" le "ème" ou "ième" ou "er" après un nombre ou le chiffre 1, j'ai utilisé la balise <sup> qui apparemment est faite pour cela.
Mais elle se révèle totalement sans effet, on reste à 1er, 22ème, sans modification. Testé avec FF, IE et Chrome, même résultat. Mais l'exemple du W3C donne le résultat attendu, quel que soit le navigateur.
J'ai résolu le problème en redéfinissant dans le CSS
sup { vertical-align: text-top;
font-size: smaller; }
mais je trouve que ce n'est pas très logique.
J'ai l'impression que l'anomalie est liée au fait que je travaille dans un ensemble "flex", mais je ne sais pas pourquoi, ni comment pouvoir y utiliser directement la balise sup prédéfinie.
Dans mon CSS :
.bloc_ppal {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
/*min-height: 100vh; toute la hauteur du viewport (compatible IE9+) */
background-color: #EEF3F9;
margin: auto;
width: 80%;
}
.cont_deuxcol {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.article .main0, article .main1, article .main2 , aside{
display: flex;
flex-flow: column wrap;
margin-top: 10px;
padding: 10px;
border: dotted 1px #7F0510;
border-radius:5px;
box-shadow: 0 0 5px 5px rgba(127,05,16,0.10);
}
article .main1 {
flex:2;
}
article .main2 {
flex:1;
} Dans le html, le bloc_ppal contient un header, le [b] .cont_deuxcol [/i] et le footer
<article class="cont_deuxcol">
<div class="main1"> <!-- le conteneur du texte principal-->
<h1>L'armée</h1>
<p> Ayant reçu le matricule 622 au recrutement de Fontenay-le-Comte, il est appelé l'année suivante. Affecté au 11<sup>ème</sup> Régiment d'Infanterie, il rejoint son corps le 18 novembre 1882 à Montauban, où il reçoit le matricule 2441 du corps. A cette époque, si le régiment est basé à Montauban, une partie des effectifs tient garnison dans l'est de l'Algérie et l'ouest de la Tunisie. En particulier le 3<sup>ème</sup> bataillon est stationné à Guelma, La Calle et Souk-Ahras. </p>
</div>
<div class="main2">
</<div>
Quelqu'un a-t-il une idée sur la cause de mon souci? Et comment utiliser sup (et sub) sans avoir à les redéfinir.
Merci par avance.
Modifié par oldmerou (24 Feb 2015 - 14:52)
, mais j'eusse préféré une réponse sur le fond.Le sujet ne semble pas passionner grand monde 
.
d'avoir embêté tout le monde avec ça. Mais finalement j'en tire plusieurs enseignements : 1/ le mieux est souvent, comme on dit, l'ennemi du bien, et je n'aurais pas eu ce problème sans le reset (mais peut-être d'autres?) 2/ il y a plus d'idées dans plusieurs têtes que dans la mienne seule, et accessoirement on apprend des choses intéressantes que l'on n'attendait pas (par exemple les bonnes pratiques typographiques