:

Le probleme est que 1, le texte sors du cadre, mais de plus, (le code fonction en <p>) malgré les <br />, j'ai l'impression que le message est situé juste a coté de la date et non en dessous, c'est pour cela que je doit le recadrer en css avec margin-top et left, comment je peux remédier a ca ? Merci

-
Edité par RaphaelBouquillon 26 janvier 2020 à 19:20:33

Bonjour,

Manque de Politesse

Votre message ne comporte pas ou peu de formules de politesse (« Bonjour », « Merci », « Au revoir », etc.). Les règles du site exigent que chaque nouveau message comporte un minimum de politesse. Après tout, les gens qui répondent le font gratuitement, sur leur temps libre. Ils méritent bien un minimum de considération, n'est-ce pas ?

Bonsoir, il n'existe pas de mots aussi long,utilise du lorem ipsum pour tes tests => https://fr.lipsum.com/

Pour ton problème de césure voir https://www.alsacreations.com/tuto/lire/1038-gerer-debordement-contenu-et-cesures-css.html

Bonsoir, désolé pour la politesse, c'est un edit. Sinon, j'ai bien essayé toutes les méthodes sur votre lien, mais, ne fonctionne pas. Et pour le probleme du <br> / du changement de ligne, avez-vous une solution, mon code si cela peut servir :

CSS: 

.box-post{
  top: 0.1%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 500px;
  min-height: 110px;
  display: flex;
  background: #ffffff;
  word-wrap: break-word;
  max-width: 500px;
  table-layout: fixed; 
}

.box-post::before{
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: #95a5a6;
  z-index: -1;
}

.box-post::after{
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: #95a5a6;
  z-index: -1;
  filter: blur(40px);  
}

.username-poster{
  margin-left: 6px;
  margin-top: 4px;
  font-size: 20px;
  font-family: 'Roboto Mono', monospace;
}

.user-tag{
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  margin-top: 8px;
  margin-left: 2px;
  color: #7f8c8d;
}

.sep{
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  margin-top: 8px;
  margin-left: 2px;
  color: #7f8c8d;
}

.date{
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  margin-top: 8px;
  margin-left: 2px;
  color: #7f8c8d;
}

.message{
  font-family: 'PT Sans', sans-serif;
  margin-top: 50px;
  margin-left: -40%;
  text-align: center;
  word-wrap: break-word;
}

Et le PHP/HTML:

<? 
        
            $searchpost = $bdd->prepare("SELECT * FROM posts WHERE id_poster = ?");
            $searchpost->execute(array($_GET['user']));

            while($row = $searchpost->fetch()){ ?>

                <? $day = date('d', strtotime($row['date'])); 
                   $month = date('m', strtotime($row['date']));
                ?>
            

                <div class="box-post">
                    <p class="username-poster"><strong><?= $row['username_poster'] ?></strong></p>
                    <p class="user-tag"><strong><?= $user['user_tag'] ?></strong></p>
                    <p class="sep"> - </p>
                    <p class="date"><?= $day ?> / <?= $month ?></p>
                    <br><br><br>
                    <p class="message"><?= $row['content'] ?></p>
                </div>

            <? } ?>

Merci !

Bonsoir, ce serait plus facile, sur le forum HTML, que tu postes le code générer plutôt que ton code PHP.

malgré les <br />, j'ai l'impression que le message est situé juste a coté de la date et non en dessous,

oui cela est du que tu indiques flex sur la <div> parente. Pour quelles raisons utiliser flexbox dans ce cas si? En retirant le flexfox plus de problème même avec une phrase peut probable.

Je solutionnerais cela en utilisant les balises pour leur rôles sémantiques, donc pas de paragraphe pour toutes tes données. Un paragraphe est une subdivision d'un texte, et un <br> est un retour ligne qui s'utilise dans une portion de texte, donc plusieurs <br> à la suite n'as aucun sens.

Tu as de la redondance dans ta CSS, si plusieurs éléments qui doivent avoir une class différente mais les même propriété tu peux les regrouper en les séparent par des virgules. Exemple :

.class1 , .class2 , .class3 {}

voici le code que j'ai modifié :

            .box-post{
                top: 0.1%;
                margin-left: auto;
                margin-right: auto;
                position: relative;
                width: 500px;
                min-height: 110px;
                /*display: flex;*/
                background: #ffffff;
                word-wrap: break-word;
                max-width: 500px;
                table-layout: fixed;
                border: 1px solid red;
            }

            .box-post::before{
                content: '';
                position: absolute;
                top: -1px;
                left: -1px;
                right: -1px;
                bottom: -1px;
                background: #95a5a6;
                z-index: -1;
            }

            .box-post::after{
                content: '';
                position: absolute;
                top: -1px;
                left: -1px;
                right: -1px;
                bottom: -1px;
                background: #95a5a6;
                z-index: -1;
                filter: blur(40px); 
            }

            .username-poster{
                margin-left: 6px;
                margin-top: 4px;
                font-size: 20px;
                font-family: 'Roboto Mono', monospace;
            }

            .user-tag , .sep, .date  {
                font-family: 'Raleway', sans-serif;
                font-size: 15px;
                margin-top: 8px;
                margin-left: 2px;
                color: #7f8c8d;
            }

            .message{
                font-family: 'PT Sans', sans-serif;
                margin-top: 50px;
                /*margin-left: -40%;*/
                text-align: center;
                word-wrap: break-word;
            }

et le HTML

<div class="box-post">
                <header>
                    <strong class="username-poster">Raphaël</strong> 
                    <strong class="user-tag">>@raphaël</strong> 
                    <span class="sep"> - </span>
                    <time class="date" datetime="2020-01-26">26 / 01</time>
                </header>
                 
                <p class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac sagittis ipsum. Aliquam erat volutpat. Quisque dapibus ipsum turpis. Pellentesque velit nisl, tincidunt ac sem quis, ultricies hendrerit nulla. Quisque dictum efficitur sem sit amet vehicula. Nullam nec augue ac diam pellentesque condimentum id ac libero.
                
                TestAvecUnePhrasePeuxProbableDeOuffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
                </p>
            </div>

PS pour les dates voici le code que j'utilise et que je trouves plus pratique à utilisé.

<span>Posté le <time datetime="<?php echo $comment['created_at']; ?>">
    <?php 
                                
        $date = new DateTime($comment['created_at']);
        echo $date->format('d/m/Y à H\h i\m\i\n s');
    ?></time>
</span>

en utilisant le formatage de date tu économises l'utilisation de variable intermédière inutile.

https://www.php.net/manual/fr/datetime.format.php

en image cela me donne :

-
Edité par AbcAbc6 26 janvier 2020 à 21:28:47

Merci pour ta réponse complete et construcive, je n'ai pas suivi tous tes conseils a la lettre, mais en tout cas, tu m'as bien aidé, le display: flex,posait un gros probleme, je ne sais pas pourquoi j'avais mis ca..

De mon coté maintenant, ca donne ca:

Merci beaucoup.

Je passe le poste en résolu, bonne soirée !