• Résolu Pseudo centré dans le header des coms


    Jeudi 30 Avril 2020 à 11:48
    *Marjolaine*

    Bonjour à tous et toutes

     Encore une fois je viens vous avec un problème que je n'arrive pas à résoudre

     j'ai mis une image pour les pseudos des coms, mais si le pseudo est court il reste à gauche

     s'il est trop long il est à droite.

     peut être ce problème vient il du numéro associé au pseudo.

    J'ai essayé avec les marges pseudo, mais ça ne fonctionne pas.

    Existe t'il du css pour centrer  le texte.

    Merci infiniment comme toujours.

    Je reconnais que je suis peut être un peu trop perfectionniste ou tatillonne lol!

    Vous allez rire, mais je ne vois que ça !

    merci merci merci

    Marjolaine

     

    Jeudi 30 Avril 2020 à 15:55
    Colette95

    Bonjour Marjolaine,

    Dans le codage, mieux vaut être perfectionniste et tatillonne car c'est plutôt une qualité. happy

    Effectivement le décalage vient de l'association n° et pseudo.

    Dans tes paramètres, tu as ces codes (en rouge ce qui est à modifier) :

    .commentnumber {
        float: left;
        width: 470px; /*c'est donc la marge actuelle pour l'alignement du pseudo - Mettre à la place 0px*/
        color: #f2ebdc;
        text-align: left;
        padding-left: 0px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0px;
    }

    .commentpseudo {
        float: left;
        padding-top: 0px;
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
        font-size: 16px;
        line-height: 110px;
        color: black;
        font-weight: bold;
        font-style: normal;
        text-decoration: none;
        font-variant: normal;
        text-align: left; /*si possible mettre center à la place de left*/
    }

    Et enfin ajouter dans la feuille de style :

    .commentpseudo{
       width: 100%;
       text-align: center; /*supprimer si possibilité de mettre center dans les paramètres*/
    }

    Reviens me dire ce qu'il en est. smile

    Jeudi 30 Avril 2020 à 16:39
    *Marjolaine*

    merci pour la réponse rapide, mais ça ne fonctionne pas

    le pseudo reste a gauche même si je mets le code dans le css.

    là je l'ai enlevé

     A force de chercher, parce que je cherche lol

     j'ai trouvé une autre solution insérer les pseudos entre deux images et ça s'adapte a la longueur du pseudo

     voila ce que j'ai mis sur un blog d'essai

    /* centrer pseudo coms*/
     .commentpseudo
    {  color:black;  font-weight:bold;
        background-color:transparent;  }


    .commentpseudo:before {  content:url("http://ekladata.com/zdV-eoZFYmRgViQEmLU_7q-lPu4.png")  }
    .commentpseudo:after {  content:url("http://ekladata.com/5K8F9yiCWOZP4qNuhiIuBJ8LLhc.png" ) }

     

    et ça rend ça


     

    Que penses tu de ce css?

    merci d'avance

    Jeudi 30 Avril 2020 à 17:58
    Colette95

    De mon côté si je mets dans le css uniquement tes codes, tout est décalé vers la gauche et suis obligée de rajouter ce que j'ai mis plus haut pour le .commentpseudo

    Donc la priorité c'est absolument de le centrer car pour le moment il ne l'est pas.

    Sinon, pour tes codes l'idée est bonne et rendu aussi.

    Quand tu as modifié les paramètres, avais-tu mis une largeur de 0px dans le .commentnumber car là je vois qu'il est encore à 400px ?

    PS Si on dézoome on voit que l'alignement des pseudos n'est pas bon.

    Jeudi 30 Avril 2020 à 18:23
    *Marjolaine*

    oui oui j'avais bien mis à 0

     la j'ai changé le design car je le change chaque mois

    je vais voir pour le dezoom

     je l'ai fait et rien remarqué.

     j'y retourne

     

    j'ai vérifié en dézoomant c'est bon pour moi

    Jeudi 30 Avril 2020 à 19:41
    Colette95

    Ah j'te jure quand on est tatillon de nature, difficile de changer. 

    Voici la copie d'écran obtenue en dézoomant. J'y ai tracé une ligne pour que tu vois la position du pseudo d'un commentaire à l'autre. Mais bon, ça passera inaperçu pour les moins tatillons. 

     

    21 h 30 - Ajout :

    Je viens de reprendre l'intégralité de tes codes et je confirme qu'en mettant :

    Dans les paramètres :

    .commentnumber {
      width: 0px;

    puis dans le css :

    .commentpseudo {
      width: 100%;
      text-align: center; 
    }

    le pseudo se trouve parfaitement aligné -> Copie d'écran

    Bonne soirée ! sleep

    Vendredi 1er Mai 2020 à 02:13
    *Marjolaine*

     

    Quand je mets à 0 voila ce que ça me donne, là j'y perds mon latin

    pour le moment je remets une marge on verra  dans la journée si j'arrive à faire ce que tu me conseilles

     

     

    tout est à gauche

    Merci de ta patience

     11 heures

    quand je passais  la souris sur  les pseudos  des coms

    l'image bougeait

    ainsi que dans "infos articles"

     j'ai mis la police en "TR"

    et tout s'est stabilisé!

     je progresse lol

    Dimanche soir

    c'est tout bon  j'ai  largeur number à zero et ça va.

    Ce fut dur dur mais c'est bon

    Merci merci je mets en résolu

     




    Ce sujet est verrouillé. Vous ne pouvez donc pas poster de nouvelles réponses.