Bonjour, j'ai besoin d'aide :

je n'arrive pas à déplacer ces éléments (tables) dans les blocs (rouge et jaune).

Les blocs se trouvent en haut des tables le problème c'est que les tables ne veulent pas monter.

A savoir que tout ces éléments (tables et blocs) se trouvent dans une div .content et j'ai beau augmenter la taille de cette div, rien.

C'est comme s'il y avait un truc qui bloquait les tables et qui les empeche de monter et de se placer à l'intérieur de leur div (blocs colorés).

Sachant qu'au début ils étaient bien placés, puis j'ai du revoir mon code, mais j'ai essayé de remettre le code supprimé et je n'ai obtenu aucun changement. 

J'ai bien revu mon code coté html et css en vain !

Je suis perdue j'ai vraiment besoin d'aide svp

 <div class="content-2">
                <div class="recent-payments">
                    <div id="title" class="title">
                        <h2 class="h2">Paiements Récents</h2>
                        <a href="#" class="btn">Tout voir</a>
                    </div>
                    <table class="table-1">
                        <tr>
                            <th>Noms</th>
                            <th>Motif</th>
                            <th>Somme</th>
                            
                        </tr>
                        <tr>
                            <td>Jean Dupont</td>
                            <td>Réparation</td>
                            <td>120€</td>
                           
                        </tr>
                        <tr>
                            <td>Sarah Bensalem</td>
                            <td>Controle technique</td>
                            <td>240€</td>
                           
                        </tr>
                       <tr>
                            <td>Laura Sanchez</td>
                            <td>Nouveau pneu</td>
                            <td>170€</td>
                           
                        </tr>
                        <tr>
                            <td>Mamadou Sako</td>
                            <td>Lavage auto</td>
                            <td>110€</td>
                           
                        </tr>
                        <tr>
                            <td>Bernard Martin</td>
                            <td>Réparation</td>
                            <td>180€</td>
                            
                        </tr>
                        <tr>
                            <td>Paul Dujardin</td>
                            <td>Achat Voiture</td>
                            <td>5000€</td>
                            
                        </tr>
                    </table>
               
             </div><!-- recents payments -->

                <div class="new-students">
                    <div class="title">
                        <h2>Nouveaux Utilisateurs</h2>
                        <a href="#" class="btn">Tout Voir</a>
                    </div>
                    <table class="table-2">
                        <tr>
                            <th>Profil</th>
                            <th>Identifiant</th>
                            
                        </tr>
                        <tr>
                            <td><img src="https://www.svgrepo.com/show/532363/user-alt-1.svg" alt=""></td>
                            <td>User_95</td>
                           
                        </tr>
                        <tr>
                            <td><img src="https://www.svgrepo.com/show/532363/user-alt-1.svg" alt=""></td>
                            <td>JRobot0</td>
                            
                        </tr>
                        <tr>
                            <td><img src="https://www.svgrepo.com/show/532363/user-alt-1.svg" alt=""></td>
                            <td>L4_div4</td>
                            
                        </tr>
                        

                    </table>
               </div> <!-- new students -->

           </div><!-- content-2-->
 </div><!-- content-->
   </div><!-- container -->








<style>

  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

  #container {
  position: relative;
    height: 2000px;
}
  #content {
   position: absolute;
   margin-left: 253px;
   background: #f1f1f1;
    margin-top: 55px;
    height: 1500px;
}
.content-2 {
    background-color: red;
    height: 500px;
    position: relative;
    margin-left: 15px;
    margin-top: 500px;
}
.recent-payments {
   position: absolute;
    background-color: green;
    height: 300px;
    margin-top: 100px;
    width: 700px;
}
.new-students {
    position: absolute;
    background-color: yellow;
    height: 300px;
    margin-top: 100px;
    margin-left: 750px;
    width: 500px;
}
h2 {
margin-right: 500px; 
  text-align: center;
}
.h2 {
    margin-right: 1000px;
}
#title {
    margin-right: 1500px; 
    text-align: center;
}
.table-1, .table-2 {
    position: absolute;
    margin-top: 100px;
}
.title {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 15px 10px;
    border-bottom: 2px solid #999;
   
}
table {
    padding: 10px;
}
th,
td {
    text-align: left;
    padding: 8px;
}
.title {
    position: relative;
    text-align: center;
    margin-bottom: 500px;
    margin-left: 450px;
} 
.container .content .content-2 {
    min-height: 50vh; /*60vh*/
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
}
.container .content .content-2 .recent-payments {
    min-height: 30vh; /* 50vh*/ /* hauteur du tableau des paiements */
    flex: 5;
    background: white;
    margin: 15px 25px;
    box-shadow: 0 4px 8px 0 #25CFF5;
   /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
    display: flex;
    flex-direction: column;
   /* margin-top: 50px; */
    border-radius: 15px;
   /* border: 2px solid #0dcaf0; */
}
.container .content .content-2 .new-students {
    flex: 1; /* flex: 2; */
    background: white;
    min-height: 46vh; /* 50vh */
    margin: 5px 25px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display: flex;
    flex-direction: column;
    height: 230px;
    margin-top: 56px;
    border-radius: 15px;
    box-shadow: 0 4px 8px 0 #25CFF5;
   /* border: 2px solid #0dcaf0; */
}
.container .content .content-2 .new-students table td:nth-child(1) img {
    height: 40px;
    width: 40px;
}

nb: ne faites pas attention aux couleurs et défauts, je n'ai pas terminé et c'est juste pour me repérer)

-
Edité par LaïlaM 12 septembre 2023 à 18:06:18

Bonjour, Merci d'indiquer un titre de sujet en rapport avec votre problématique.

Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Déplacement vers un forum plus approprié

Le sujet est déplacé de la section Discussions développement vers la section HTML / CSS

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Merci de modifier votre titre. Pour cela, éditez le premier message de votre sujet.

(titre originel : besoin d'aide)

Liens conseillés

• Charte de bonne conduite
• Règles générales du forum