Résolu Commentaires : avatar à gauche et bouton répondre

Bonjour,

pour info tes lignes numérotées sont incomplètes : on ne voit pas la fin des lignes, du coup ça aide pas

Je me permets (ce n'est qu'un avis), je cite
    "je vous invite à modifier les couleurs ... dans les règles..."
au lieu de  dans les règles, je mettrais
    "dans Apparence, Modifier le thème, Boutons et champs"

Comme j'ai "commenté" ton sujet > tu ne pourras pas l'éditer pour le modifier > copie-colle pour faire un Nouveau sujet (ce sujet là sera un brouillon qui pourra être supprimé). 

Edit parce que j'ai oublié :  côté "Trucs et Astuces" je ne suis pas sûre que ça en soit, c'est plus "du code" > je suis pas sûre que le sujet soit validé en tant que "Trucs et astuces".  

@ suivre

Bonjour et merci @Pipiou !

En fait, je parlais des règles CSS (autrement dit, dans le code).

Oui c'est étrange le fait que ce soit tronqué. J'ai encadré le tout dans une div avec un "max-width:500px" à cause de ça. Mais d'après ce que tu me dis, j'en déduis que c'est insuffisant.

Je pense savoir où est le problème : la mise en forme du code copié-collé contient la règle "white-space: nowrap;". Toute façon par précaution, je vais mettre une barre de scroll.

Edit : La barre de scroll ne fait strictement rien vu que les éléments sont à 100% de largeur. Le problème vient du fait que la cellule du tableau est masquée. Pour l'instant, je ne vois que la solution d'encadrer mon texte avec un div en "max-width:300px".

@ Bushidoka

- J'ai fais une reprise de ton code:

/* COMMENTAIRES */
.commentavatar{float:left;padding-left:0px;padding-right:7px;} /* avatar à gauche */
.commentavatar img{border-radius:70px;} /* avatar rond */
.comment_normal, .comment_admin{width:auto;} /* largeur non-fixe évite les dépassement en cas de bordure ou marge */
.comment-reply{text-align:right;} /* lien Répondre à droite */
.comment-reply a{background:#292929;padding:3px 5px;color:#fff;opacity:0.5;} /* lien Répondre en bouton */
.comment-reply a:hover{background:#c40000;text-decoration:none;opacity:1;}

>> en utilisant dans la source de mon brouillon la balise <pre>  </pre> avec les propriétés ci-dessous (et surtout aucun style dans les lignes du code présenté)

<pre style="word-wrap: break-word; white-space: pre-wrap; background-color: #eeeff; color: #993300;">
..........
</pre>

Merci @stormalo, je note la technique. 

De plus, ce qu'il faut absolument éviter de faire - et je pense que tu l'avais fait - c'est de faire du copié-collé "à la volée" à partir d'une page web ou d'un traitement de texte, car tu récupères aussi du code non approprié aux blogs (mise en forme, style, . . .)

Comment faire ?   mon point de vue est dans Trucs et astuces

   Bon aujourd'hui 

Oui, c'est exactement ça : j'ai copié-collé avec la mise en forme.
D'habitude, je privilégie le collage via Ctrl+Maj+V Mais là je trouvais que la colorisation syntaxique apportait plus de visibilité (ironiquement, LOL!).

super pour moi j 'ai pris ton code stormalo 

génial sur mon blog MERCI