dd et dfn, et css

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.

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/

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:

---

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:

---

1 2 3 4

.views::after { content:"vues"; }

---

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

Bonjour,

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

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:

---

1 2 3 4

dfn { display: inline; }

---

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.

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:

---

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:

---

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)

Bon, je remets le code :

Code:

---

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

---

Tout seul, il affiche bien

Code:

---

1 2	178 Réponses 26219 Vues

---

Pour savoir quel style est en jeu, en fait je pourrais éplucher ce que me dit l'inspecteur, après avoir pressé F12.

Si ça te dit, c'est sur mozfr.org
Si tu veux voir les détails par fil je peux te refiler ce que j'ai fait comme feuille de style.

Comme j'ai fait, le style n'est pas très classe, mais il affiche ce que je veux. Donc peut-être que je creuserai, par curiosité, mais plus tard.

Le code HTML est incomplet
dd ne peut être utilisé qu'à l'intérieur de dl

Citation:

---

Pour savoir quel style est en jeu, en fait je pourrais éplucher ce que me dit l'inspecteur, après avoir pressé F12.

---

Ben oui, en essayant par magie ça risque de prendre du temps, d'où le fait que je parle depuis le début d'avoir du code...

Sinon je ne comprends pas ta demande
Avoir dfn à côté de dd ? Bon ça veut rien dire mais j'imagine que c'est avoir ça sur une ligne et c'est déjà dans l'affichage sur le site si je vais voir les forums : https://forums.mozfr.org/

Pièce jointe 619439

Au pire, fais une capture d'écran modifiée en expliquant ce que tu veux parce que c'est pas très clair pour l'instant.
Oublie pas non plus que ta feuille de style est locale et que donc je ne la vois pas. Et si tu as utilisé des règles trop globales, tu peux très bien avoir modifié l'apparence de certaines choses mais ma boule de cristal ne m'en a malheureusement pas averti :(

NB : dfn dans ce cas-ci est utilisé juste à des fins d'accessibilités et n'est pas affiché par défaut

Je ne comprends pas, tu continues à réclamer des choses que j'ai déjà données.
Je voulais obtenir le mot "réponses" derrière le nombre de réponses, et le mot "vues" derrière le nombre de vues.

Et c'est bien ce que j'ai obtenu, mais ... en utilisant le pseudo-style :after, ce qui n'est peut-être pas très orthodoxe si on considère que l'information est déjà dans le code de la page.

La page est là :
https://forums.mozfr.org/viewforum.php?f=5

Par défaut, elle utilise un affichage compact, mais il est possible d'afficher le nombre de vues et qui a ouvert le fil, en chargeant le style ci-dessous avec l'extension Stylus.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

[title="Aller au dernier message"] { /*margin-top:20px;*/ }   .views, .posts, .lastpost { display:inline!important; margin-left:30px; }   dd.lastpost span dfn { display:block!important; font-size:22px!important; }   dd.lastpost span::before { content: "Dernier message "; }   .views::after { content:"vues"; }   .list-inner .responsive-show { color:red; display:none!important; }       .posts { margin-left:50px!important; }   .topic-poster, .responsive-hide, .left-box { display:block!important; }   div:contains("Dernier message") { font-style:italic; background-color:red!important; }   dd, dfn { display:inline; }

---

Je réclame du code c'est parce que l'explication était mauvaise et le code insuffisant.
Je t'avoue que je n'ai pas non plus envie d'installer un plugin sur mon navigateur juste pour ce problème.

Bref, pour répondre à la demande d'afficher le "réponses" et "vues", voici le code :

Code:

---

1 2 3

ul.topiclist dfn { position: static; }

---

Comme tu le constateras, on est très loin des codes donnés précédemment. C'est pour ça qu'on a besoin de TOUT le code de départ pour pouvoir répondre à une question.
Quand t'as un problème avec ta voiture, tu vas avec elle chez le garagiste. Tu lui demandes pas de la réparer par téléphone et sans rien expliquer. Ici c'est la même chose ;)

Pièce jointe 619446

Ah, ça commence à s'éclairer.
Et donc, le code, c'est dans la page que tu l'as trouvé, j'imagine ?

Il y a une chose qui m'intrigue.

Si je mets juste

Code:

---

1 2 3 4

dfn { position:static; }

---

c'est comme si je flutais dans un violon.

Je me serais attendu à ce que ça s'applique à tous les styles dfn, qu'ils soient ou non sous un style ul.topiclist, non ?

Citation:

---

Et donc, le code, c'est dans la page que tu l'as trouvé, j'imagine ?

---

Effectivement ! On peut le voir en bas de la capture d'écran, c'est la console avec F12 comme tu l'as dit.
Pour changer l'affichage de quelque chose d'existant il faut d'abord savoir comment c'est affiché (et en plus, comment c'est sélectionné)

Citation:

---

Je me serais attendu à ce que ça s'applique à tous les styles dfn, qu'ils soient ou non sous un style ul.topiclist, non ?

---

Et bien non, c'est justement l'inverse ! Comme je l'expliquais dans un post précédent, il s'agit d'une sorte de "précision" dans le sélecteur
Si une propriété est définie avec une certaine précision dans le sélecteur, il faudra AU MOINS (mais on peut faire plus) de précision pour pouvoir modifier cet élément.

Par exemple, si j'écris dfn { background: green; }, ça va coloriser tous les tags dfn en vert
Sauf que si un sélecteur plus précis existe, il sera écrasé par ce dernier.
Donc si j'écris ul.topiclist dfn { color: white; } dans ce cas-ci, le sélecteur est précis mais il n'y a pas d'attribut background, donc le font sera vert également
Mais si j'écris : ul.topiclist dfn { background: yellow; color: red; } alors tous les dfn auront un fond vert, sauf ceux si spécifiquement qui auront un fond jaune.

Si plusieurs sélecteurs sont identiques, alors ce sont les dernières propriétés qui seront prises en compte :

Code:

---

1 2 3 4 5 6 7 8 9

dfn { background: red; } ul.topiclist dfn { background: red; color: white; } ul.topiclist dfn { background: yellow; color: red; border: 3px solid brown; } ul.topiclist dfn { color: yellow; } /**   Ces styles afficheront les DFN avec un fond rouge   les DFN dans ul.topiclist seront affichés sur fond rouge, avec un texte jaune, et avec une bordure brune de 3px d'épaisseur */

---

Il est possible de bypasser ce comportement en utilisant le mot-clé !important mais c'est à éviter autant que possible
Dans ton cas, il s'agit d'un truc local donc tu pourrais le faire pour pas t'embêter mais souvent ça rend l'écriture toutes les règles plus lourdes donc on évite
Exemple d'utilisation :

Code:

---

dfn { background: green !important; }

---

Bonjour,
il y a : Règles d'application des styles CSS et gestion des conflits

Ah, voilà de la lecture :)

À ce que dit Darskstar il y a un endroit où j'ai envie de dire "ben justement !", mais là il faut que je prenne un peu plus mon temps ...