Discussion :

[Couin]

Couin Couiiiinnn !

Petite question , est-il possible de faire un affichage au format division en html/css ?

Je m'explique, j'ai une page avec un table de catégories musicales et pour chaque catégorie j'affiche le nombre de musique "enabled" sur le nombre de musique de cette catégorie.

En gros, la forme est de type :

Code php :

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

$category ($nb_cat_song_enabled/$nb_cat_songs)

Ce qui donne par exemple :

Dance 90 (3503/3596)

C'est moche et ca prend beaucoup de place (car sur une meme ligne du tableau, il y a 4 catégories et du coup ca fait des renvoies à la lignes tout moche car données trop longues pour la taille du champs à l'écran).

Existe-t-il un moyen de faire un truc du genre :

3503
———
3596

(Bien sur le trait de division serait juste en dessous de la valeur, là j'ai dessiné avec des — , et l'écriture plus petites poru que la hauteur total soit sensiblement égale à la hauteur du nom de catégorie).

Un code du genre :

Code php :

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

<div class='division'>$nb_cat_song_enabled/$nb_cat_songs</div>

Et la class met la division en forme.

J'ai bien tenté un tableau dans la cellule, le résultat serait pas mal mais je n'arrive pas du tout à aligner verticalement le mini-tableau dans la cellule (du coup la division est plus basse que le nom).


Merkouiiiinnn
Couin

[mathieu]

pour afficher des formules, le plus joli que j'ai vu pour faire ça est le Latex.
après il y a plusieurs façon de faire le rendu, vous pouvez essayer ça : https://www.mathjax.org/#samples

[Couin]

Hello,

Merci pour cette réponse

Pour Latex, je suis arrivé sur cette page https://tex.stackexchange.com/questi...line/1654#1654
Malheureusement, le truc m'a défoncé la tête encore plus que le problème de départ

Sur cet exemple , la division est renvoyée à la ligne...

Je voudrais simplement faire ça :


Mais je n'ai réussi qu'à faire ça (le petit tableau pour la division est en 2 lignes d'une cellule chacune) :

[mathieu]

vous pouvez mettre la parenthèse entière dans la formule et la fraction sera alignée comme ça :
https://jsbin.com/mexasociwe/1/edit?html,output

[Couin]

Hello,

Super, merci on est très proche du résultat, il faut juste que je regarde plus en détail la doc de mathjax pour lui faire prendre une autre font que les chiffres à l'ancienne lol

[jreaux62]

Bonjour,

une solution full CSS :

Code html :

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

<div class="division">(Dance 90 <span>3503<hr />3596</span>)</div>

Code css :

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

1
2
3
.division { display:flex; flex-direction:row; flex-wrap:nowrap; }
.division span { display:flex; flex-direction:column; align-items:center; font-size:70%; }
.division span hr{ width:30px; margin:0; padding:0; height:1px; border:0; background:#000; }

[NoSmoking]

Bonjour,

une solution full CSS :

Code html :

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

<div class="division">(Dance 90 <span>3503<hr />3596</span>)</div>

oui mais le code HTML est non valide, élément de type block<hr> dans élément de type inline<span>.

[jreaux62]

Alors, remplacer le <hr> par <ins></ins> et ça fait la farce.

Code html :

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

<div class="division">(Dance 90 <span>3503<ins></ins>3596</span>)</div>

Code css :

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

1
2
3
.division { display:flex; flex-direction:row; flex-wrap:nowrap; }
.division span { display:flex; flex-direction:column; align-items:center; font-size:70%; margin-left:5px; }
.division span ins { width:100%; margin:0; padding:0; height:1px; border:0; background:#000; }

[Couin]

COUIN !

Merci pour la solution css, du coup, avec un peu d'adaptation du code, plus besoin de chercher pour la font vu que ca affiche bien.


Par contre, en mettant

Code php :

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

<ins style="background:orange;width:<? echo $divisionwidth; ?>px; "></ins>

à la place de

Code php :

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

<hr style="background:orange;width:<? echo $divisionwidth; ?>px; " />

La barre de fraction n’apparaît pas. Pour le moment je laisse donc hr .

[jreaux62]

il faut aussi modifier le CSS :

Code css :

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

.division span ins { .... }

Et tant qu'à (bien) faire, y ajouter le background à la couleur que tu veux (au lieu de l'ajouter inline) :

Code :

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

.division span ins { width:100%; margin:0; padding:0; height:1px; border:0; background:orange; }

N.B. Pas sûr que ton $divisionwidth soit nécessaire.
J'ai testé avec width:100%;, et ça me semblait bon.

[Couin]

Impeccable, ca marche nickel !

Merci à tous et bon ouiken

[NoSmoking]

il faut juste que je regarde plus en détail la doc de mathjax pour lui faire prendre une autre font que les chiffres à l'ancienne lol

il te faut surcharger le CSS par défaut de mathjax, quelque chose comme :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.myclass mjx-container[jax="CHTML"][display="true"] {
    display: inline-block;
    text-align: center;
    margin: 1em 0;
}
.myclass mjx-container[jax="CHTML"][display="true"] mjx-math {
    padding: 0;
    font-size: .5em;
    font-family: monospace;  /* la font que tu veux */
}
.myclass .MJX-TEX {
    font-family: inherit;
}

cela devrait le faire avec une ligne HTML comme :

Code html :

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

<div class="myclass">Oldies 90 (Sub3 $$4587\over10596$$)</div>

Pour revenir sur une écriture possible sans mathjax, j'avais par le passé, et je l'ai retrouvé, utilisé ceci pour les fractions :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.fraction {
  display: inline-flex;
  position: relative;
  flex-direction: column;
  text-align: center;
  font-size: .75em;
  color: red;
  transform: translate(0, -25%);
}
.fraction sub {
  border-top: 1px solid currentColor;
  font: inherit;
}

en écrivant les fractions ainsi :

Code html :

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

<p>(Dance 90 <span class="fraction">4587<sub>10596</sub></span>)