Discussion :

[Gluups]

Bonjour tout le monde,

Si un document HTML présente une succession de paires dd / dfn, et que je veux voir apparaître dfn à la droite de dd, que dois-je appliquer comme feuille de style ?

N.B. La balise dfn est incluse dans la balise dd.

[darkstar123456]

Bonjour,

C'est un peu light comme description et comme demande... Avez-vous essayé par vous-même ?

De plus, dd est censé contenir la définition de dfn.
A partir de là, je considère donc qu'on a une phrase dans dd et donc j'ai du mal à comprendre la définition...

Sinon, si vous avez besoin d'un terme et d'une définition, pourquoi ne pas utiliser dd et dt ??
Dans ce dernier cas, je conseillerais d'utiliser Flexbox dont voici un très bon guide : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[Gluups]

Bonjour,

Non, je ne choisis pas le HTML, le site est déjà en ligne, je peux seulement lui ajouter du style avec l'extension Stylus, dans Firefox.

Dans la page on a ceci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<dd class="posts">178 <dfn>Réponses</dfn></dd>
<dd class="views">26219 <dfn>Vues</dfn></dd>

Pour partie je m'en sorti par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.views::after
{
    content:"vues";
}

mais ça me paraît être un peu du bricolage ...

[darkstar123456]

Bonjour,

Je ne comprends pas en quoi ce CSS règle quoi que ce soit, il ajoute juste du contenu

Toujours est-il que si je comprends bien vous voulez simplement que le contenu de chaque dd s'affiche sur une ligne ? (aligné à gauche donc)
Vu que c'est le comportement par défaut de dfn, il faut juste écraser la CSS qui a créé le retour à la ligne.

Une fois de plus, vous ne souhaitez pas donner du code donc ça va être difficile de répondre avec précision mais pour couvrir +/- toute la CSS possible j'imagine qu'il faudrait alors écrire :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
dfn
{
    display: inline;
}

[Gluups]

Le code que j'ai fourni est un copier/coller de la source du site.

J'ai mis inline pour dd et pour dfn, mais ça n'a pas l'air de changer grand chose, il y a bien le texte mais en provenance de :after.

Ça se peut effectivement qu'il y ait un autre style qui s'applique, donc il va falloir que je fasse une page de test pour comprendre ce qui se passe. Pour celle-là, la solution en place est "ballot", mais efficace.

***
Effectivement en ne mettant que ce que j'ai cité dans un fichier HTML test, le texte s'affiche.
Donc, pour comprendre plus il faudrait étudier toutes les feuilles de styles appelées.
Bah, écrire "vues" après un bloc de style "views", après tout ce n'est pas si absurde.

[darkstar123456]

un sélecteur ::after ne peut exister qu'à deux conditions : avoir un attribut content et display.
Sachant cela, j'imagine que le display qu'on ne voit pas est de type block.

On peut donc d'adapter ma réponse précédente :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.views::after {
   display: inline;
}

Une fois de plus, on a jamais droit au code donc si le sélecteur est différent de celui ci-dessus, ça ne pourrait pas fonctionner
Il faudrait alors soit adapter le sélecteur, soit ajouter !important, comme ceci :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.views::after {
   display: inline !important;
}

N'hésitez pas à partager plus de code (à condition qu'il soit cohérent avec le souci ^^) ou directement l'URL du site c'est encore plus simple
Ca permet d'apporter des réponses plus précises (et plus rapidement)