IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Formatage "division" possible ?


Sujet :

CSS

  1. #1
    Membre du Club Avatar de Couin
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    avril 2014
    Messages
    94
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Technicien maintenance

    Informations forums :
    Inscription : avril 2014
    Messages : 94
    Points : 58
    Points
    58
    Par défaut Formatage "division" possible ?
    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
    Retrouvez-moi tous les dimanches à 22H pour une heure de mix en live tout au vinyle sur eurodance90.fr

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    8 349
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 8 349
    Points : 12 962
    Points
    12 962
    Par défaut
    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

  3. #3
    Membre du Club Avatar de Couin
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    avril 2014
    Messages
    94
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Technicien maintenance

    Informations forums :
    Inscription : avril 2014
    Messages : 94
    Points : 58
    Points
    58
    Par défaut
    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 :
    Nom : fraction2.jpg
Affichages : 81
Taille : 6,2 Ko

    Mais je n'ai réussi qu'à faire ça (le petit tableau pour la division est en 2 lignes d'une cellule chacune) :
    Nom : fraction.jpg
Affichages : 81
Taille : 6,2 Ko
    Retrouvez-moi tous les dimanches à 22H pour une heure de mix en live tout au vinyle sur eurodance90.fr

  4. #4
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    8 349
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 8 349
    Points : 12 962
    Points
    12 962
    Par défaut
    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

  5. #5
    Membre du Club Avatar de Couin
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    avril 2014
    Messages
    94
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Technicien maintenance

    Informations forums :
    Inscription : avril 2014
    Messages : 94
    Points : 58
    Points
    58
    Par défaut
    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

    Nom : 218634160_566032767748038_186519567126768101_n.png
Affichages : 74
Taille : 118,8 Ko
    Retrouvez-moi tous les dimanches à 22H pour une heure de mix en live tout au vinyle sur eurodance90.fr

  6. #6
    Membre actif Avatar de jreaux62
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    133
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 133
    Points : 265
    Points
    265
    Par défaut
    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; }

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 488
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 488
    Points : 38 925
    Points
    38 925
    Par défaut
    Bonjour,
    Citation Envoyé par jreaux62
    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>.

  8. #8
    Membre actif Avatar de jreaux62
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    133
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 133
    Points : 265
    Points
    265
    Par défaut
    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; }

  9. #9
    Membre du Club Avatar de Couin
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    avril 2014
    Messages
    94
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Technicien maintenance

    Informations forums :
    Inscription : avril 2014
    Messages : 94
    Points : 58
    Points
    58
    Par défaut
    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.
    Nom : css.jpg
Affichages : 46
Taille : 7,1 Ko

    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 .
    Retrouvez-moi tous les dimanches à 22H pour une heure de mix en live tout au vinyle sur eurodance90.fr

  10. #10
    Membre actif Avatar de jreaux62
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    133
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 133
    Points : 265
    Points
    265
    Par défaut
    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.

  11. #11
    Membre du Club Avatar de Couin
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    avril 2014
    Messages
    94
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Technicien maintenance

    Informations forums :
    Inscription : avril 2014
    Messages : 94
    Points : 58
    Points
    58
    Par défaut
    Impeccable, ca marche nickel !

    Merci à tous et bon ouiken
    Retrouvez-moi tous les dimanches à 22H pour une heure de mix en live tout au vinyle sur eurodance90.fr

  12. #12
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 488
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 488
    Points : 38 925
    Points
    38 925
    Par défaut
    Citation Envoyé par Couin
    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>)

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 2
    Dernier message: 25/02/2020, 17h54
  2. Est-il possible de diviser une cellule d'un tableau en 2 dans sa diagonale?
    Par einsteineuzzz dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 16/04/2012, 09h36
  3. Réponses: 5
    Dernier message: 11/01/2008, 13h36
  4. Réponses: 6
    Dernier message: 28/05/2007, 19h00
  5. Ré-installation (du systeme) sans formatage, possible ?
    Par __fabrice dans le forum Administration système
    Réponses: 11
    Dernier message: 11/04/2005, 12h32

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo