Sujet Précédent Sujet Suivant

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

Résolu/Fermé
Utilisateur anonyme - 21 juil. 2015 à 12:45
Bushizo Messages postés 99 Date d'inscription vendredi 20 février 2015 Statut Membre Dernière intervention 8 janvier 2016 - 21 juil. 2015 à 18:09
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

Réponse 1 / 3
Bushizo Messages postés 99 Date d'inscription vendredi 20 février 2015 Statut Membre Dernière intervention 8 janvier 2016 10
Modifié par Bushizo le 21/07/2015 à 13:12
À 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
Réponse 2 / 3
jordane45 Messages postés 37274 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 mars 2023 4 551
21 juil. 2015 à 13:23
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
Utilisateur anonyme
21 juil. 2015 à 14:16
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
jordane45 Messages postés 37274 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 mars 2023 4 551
21 juil. 2015 à 15:58
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
Réponse 3 / 3
Bushizo Messages postés 99 Date d'inscription vendredi 20 février 2015 Statut Membre Dernière intervention 8 janvier 2016 10
21 juil. 2015 à 15:01
Au fait, de quoi parlera ton site?
0
Utilisateur anonyme
21 juil. 2015 à 15:23
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
Bushizo Messages postés 99 Date d'inscription vendredi 20 février 2015 Statut Membre Dernière intervention 8 janvier 2016 10 > Utilisateur anonyme
21 juil. 2015 à 18:09
Super, moi aussi je joue à extinction!!:) Ton site à l'air super interressant, n'hésite pas à nous dire quand il sera ouvert ;)
0