AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Les Conversions

    Partagez
    Angelusia
    FémininAge : 31Messages : 1159

    le Sam 3 Nov - 13:13

    C'est encore moi.

    Cette fois je vous offre quelque chose qui peut être assez pratique lorsque vous codez votre forum.

    Qu'est-ce donc ?

    Rien de plus facile. Un topic qui vous permettra de savoir quel effet vous aurez en utilisant une même mesure avec une unité différente.

    Il en existe trois sortes : em, px et %.

    Le px et le % étant les plus couramment utilisées... Et le em, la moins connue. Pourtant c'est celle qui est la plus pratique et qui s'adapte à toute les résolutions d'écrans.

    Et maintenant, si nous passons au test pour voir la différence ?

    Imaginons, j'ai envie de me faire un carré, noir, à bordure rouge en ayant pour une mesure de 20 et une bordure de 1.

    En pixels



    En pourcentage



    Nous n'avons rien. Pourtant j'ai bien des mesures.

    Code:
    <div style="width: 20%; height: 20%; background-color: #000000; border: 1% solid #9E3F3F;"></div>

    En Cadatrin (em)



    Mais alors ? C'est quoi ce binz ?

    Je l'avais dit, les unités n'étaient pas équivalentes.

    Si vous souhaitez que cela soit le cas vous devez faire deux changements. Le premier, enlever le 0 de votre mesure. Ce qui vous fait 2em. En second mettre un 0 et un . à votre bordure.

    Votre codage ressemblerait donc à ceci.

    Code:
    <div style="width: 2em; height: 2em; background-color: #000000; border: 0.1em solid #9E3F3F;"></div>

    Qui a pour apparence celle-ci.



    Comme vous pouvez le voir, le carré possède la même apparence que celui avec l'unité px.

    Vous pouvez donc, maintenant, vous même faire vos propres conversions.


















    Dernière édition par Angelusia le Dim 17 Fév - 9:45, édité 1 fois
    Cyllan
    FémininAge : 26Messages : 166

    le Dim 17 Fév - 9:41

    C'est très sympa comme tutoriel sérieux. Merci ! J'avais lu un truc sur "em" dans mon bouquin sur le css (qui ne m'a toujours pas aidée m'enfin). Very Happy




      La date/heure actuelle est Mer 7 Déc - 18:15