Bonjour à tous, je viens vers vous pour vous demander un peu d'aide.

Je suis en apprentissage de Django et pour ce faire je code un blog et dans le système de commentaire, j'ai un background-color qui cache ma border dans les angles...

Voici le code HTML :

<div class="comment parent_comment">
   <p>{{ parent_comment.content }}</p>
         <div class="comment_data">
         <p>Publié par {{ parent_comment.autor }}, le {{ parent_comment.creation_date }}</p>
   </div></div>

Voici le code CSS :

.comment{
    border: solid 1px #79A3B1;
    margin-bottom: 10px;
    border-radius: 10px;
}

.comment > p{
    background-color: whitesmoke;
    padding: 10px;
    margin-top: 0;
}

.child_comment{
    margin-left: 25px;
}

.comment_data{
    border-top: solid 1px #79A3B1;
}

.comment_data p{
    margin: 0;
}

Et voici le résultat :

Si quelqu'un à déjà rencontré ce problème et l'a résolu je prend !

Merci à tous,

Magrets.

-
Edité par MagretsDeCanard 30 novembre 2023 à 10:52:45

Bonjour,

le souci est lié à border-radius. En effet, ce n'est pas une propriété héritable par défaut (ce qui est normal : on ne veut pas forcément d'arrondi partout).

Donc il faut que tu ajoutes du border-radius sur ton premier élément.

Ma proposition :

border-top-left-radius: inherit;
border-top-right-radius: inherit;

Comme ça tu ne touches que les coins en haut, et tu ne répètes pas la valeur, donc si tu la changes sur le parent ça se fera tout seul.

Bonjour, merci de ta réponse, le problème est que justement je veux ces border-radius à ces endroits, si je ne met pas de radius la bordure est visible mais dès que je le met, elle disparait dans les angles alors que je veux cet arrondi ! 

Si tu as autre chose je prend !

Encore merci !

Justement, c'est la proposition que je te fais mets les deux lignes de CSS sur le premier enfant de ton élément.

J'ai essayé ce que tu me disais sans obtenir le résultat voulu mais ça m'a donné à réfléchir et j'ai réussi. J'ai appliqué un border-radius directement au <p> ce que arrondi le background-color donc il suit la bordure de son parent !

voici les deux lignes appliqué à comment > p: 

border-top-left-radius: 10px;
border-top-right-radius: 10px;

Je vous donne le code complet de l'espace commentaire si ça peux en aider certains :

HTML (avec code DJANGO) mais ca reste compréhensible :

<section class="comment_section">
        {% for parent_comment in parent_comments %}
            <div class="comment parent_comment">
                <p>{{ parent_comment.content }}</p>
                <div class="comment_data">
                    <p>Publié par {{ parent_comment.autor }}, le {{ parent_comment.creation_date }}</p>
                </div>
            </div>
            {% for child_comment in child_comments %}
                {% if child_comment.parent_comment == parent_comment %}
                    <div class="comment child_comment">
                        <p>{{ child_comment.content }}</p>
                        <div class="comment_data">
                            <p>Publié par {{ child_comment.autor }}, le {{ child_comment.creation_date }}</p>
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
        {% endfor %}
    </section>

CSS :

.comment{
    border: solid 1px #79A3B1;
    margin-bottom: 10px;
    border-radius: 10px;
}

.comment > p{
    background-color: whitesmoke;
    padding: 10px;
    margin-top: 0;
    margin-bottom: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.child_comment{
    margin-left: 25px;
}

.comment_data{
    border-top: solid 1px #79A3B1;
}

.comment_data p{
    margin: 0;
}

Et le résultat :

Il reste encore un peu de boulot mais c'est cool ! 

Merci de ton aide, le sujet est résolu !

Je proposais inherit pour t'éviter la répétition du 10px, mais si ça te convient comme ça, c'est le mieux !

Bonne continuation

Lamecarlate a écrit:

Je proposais inherit pour t'éviter la répétition du 10px, mais si ça te convient comme ça, c'est le mieux !

Bonne continuation

J'avais du mal comprendre car "ca ne marchait pas sur mon PC" mais bon j'ai une solution donc tout va bien !

Encore merci