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

Signaler
-
Messages postés
99
Date d'inscription
vendredi 20 février 2015
Statut
Membre
Dernière intervention
8 janvier 2016
-
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

Messages postés
99
Date d'inscription
vendredi 20 février 2015
Statut
Membre
Dernière intervention
8 janvier 2016
10
À 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/
Messages postés
32939
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 juin 2021
3 556
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>

Utilisateur anonyme
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
Messages postés
32939
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 juin 2021
3 556
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
Messages postés
99
Date d'inscription
vendredi 20 février 2015
Statut
Membre
Dernière intervention
8 janvier 2016
10
Au fait, de quoi parlera ton site?
Utilisateur anonyme
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... :/)
Messages postés
99
Date d'inscription
vendredi 20 février 2015
Statut
Membre
Dernière intervention
8 janvier 2016
10 > Utilisateur anonyme
Super, moi aussi je joue à extinction!!:) Ton site à l'air super interressant, n'hésite pas à nous dire quand il sera ouvert ;)