[HTML] Mettre deux tableaux de tailles différentes côte-à-côté

Résolu
Bonjour.
Sur ma page HTML http://www.kruxy.fr/, j'aimerais pouvoir, au milieu, mettre trois tableaux tous de taille différente et avec pour condition que le premier soit collé au deuxième mais ce ce même deuxième soit légèrement décalé par rapport au troisième. Bien sûr, tout ça centré au milieu de la page.

J'aimerais en gros que ça fasse comme ça : http://www.kruxy.fr/exempage.png
(et puis un pied de page en bas mais ça ce sera simple)

Ai-je besoin d'un CSS ? Est-ce simple ?
Merci de me donner vos réponses. :)

3 réponses

  1. À mon avis tu auras besoin de CSS pour ça mais je ne m'y connais vraiment pas, la programmation web n'étant vraiment pas mon fort, mais tu devrais trouver ce que tu cherches sur google, je vais aussi faire quelques recherches de mon côté.

    j'ai trouvé ça : https://forums.commentcamarche.net/forum/affich-256823-plusieurs-tableaux-cote-a-cote
    https://openclassrooms.com/forum/sujet/creer-deux-tableau-l-un-a-cote-de-l-autre-avec-div
    https://www.developpez.net/forums/d278993/webmasters-developpement-web/balisage-x-html-validation-w3c/afficher-tableaux-cote-cote/
    0
    1. Modérateur
      Bonjour,

      Un truc du genre (à améliorer bien entendu) :
      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>TEST</title>
      
      <style>
      
      .content{
       text-align: center;
       padding:0px;
       width:1000px;
       margin-left:auto;
       margin-right:auto;
      }
      #zone_1{
      position: relative; 
          width: 10%;
       margin:0px;
        padding:0px;
        border:1px solid black;
        height: 80px;
       float:left;
      }
      
      #zone_2{
      position: relative; 
          width: 50%;
          margin:0px;
          padding:0px;
        border:1px solid black;
        height: 380px;
       float:left;
      }
      
      #zone_3{
      position: relative; 
          width: 25%;
          margin-left:10px;
          padding:0px;
          border:1px solid black;
        height: 280px;
      float:left;
      }
      
      
      </style>
      
      </head>
      <body>
        <div class="content">
          <div id="zone_1">
          </div>
          <div id="zone_2">
          </div>
          <div id="zone_3">
        </div>
      </div>
      </body>
      </html>
      

      0
      1. Merci pour ton aide : ça fonctionne à la perfection !! En de ça, j'ai étudié ton code et sais maintenant comment faire pour en faire d'autres. Merci beaucoup de m'avoir partagé tes connaissance et m'avoir aidé à résoudre mon problème. Il ne me reste plus qu'à redimensionner et à mettre du texte ! :D
        0
      2. Modérateur
        Si la question est résolue..
        Merci de ne pas oublier de clôturer le sujet
        (en cliquant sur le lien "Marquer comme résolu" qui se trouve sous le titre de la question)

        Cordialement,
        Jordane
        0
    2. Au fait, de quoi parlera ton site?
      0
      1. Il parlera de mets projets. Je vais terminer mon serveur Minecraft (Amekainezuto), faire des maps Minecraft, des maps Forteresse (extinction.fr), des jeux (RPG Maker, Construct 2), des projets Super Mario Bros. X et rédiger des soluces de jeux. Ça peut vous paraître beaucoup mais tout ceci est évidemment sur très long terme : je compte garder ce site longtemps. (sûrement pas sur le même hébergeur, d'ailleurs, parce que 100 MO d'espace, avec site44, c'est pas que c'est pas beaucoup, mais... :/)
        0
      2. @Utilisateur anonymeSuper, moi aussi je joue à extinction!!:) Ton site à l'air super interressant, n'hésite pas à nous dire quand il sera ouvert ;)
        0