2 blocs, côte à côte, comment faire ?

par Nikolerigolo Mar 19 Déc 2017 - 11:00

Détails techniques

Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://pccf.forumactif.com

Description du problème

Bonjour à tous!

J'utilises la fonction Rechercher ici, sur forumactif, à foison, cela m'a d'ailleurs permis de créer et de mettre en page mon forum comme je le voulais sans connaître le language HTML et cie.

Merci à toutes et à tous !!!

Concernant mon sujet, ici, j'ai un souci que je n'arrive pas à résoudre. Idea

Je voudrais absolument mettre 2 blocs l'un a côté de l'autre en page d'accueil.

Je ne trouve pas la solution adaptée à mes codes ... Et j'ai pourtant cherché des heures ...

Je m'en remets à vous, en espérant que quelqu'un puisse me donner la solution !

Merci milles fois pour tout, tout le monde!

Un aperçu direct de mon code le plus abouti : Cliquez ici

1er bloc :

Code:: <iframe src="https://calendar.google.com/calendar/embed?showTitle=1&showNav=0&showDate=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&mode=AGENDA&height=300&wkst=2&hl=fr&bgcolor=%2329527A&src=fqth9tc5pv05pvghb2ip94j90s%40group.calendar.google.com&color=%23333333&ctz=Europe%2FParis" frameborder="0" scrolling="no" style="border: 5px solid rgb(16, 134, 245); width: 1200px; height: 500px;"></iframe>

2ème bloc :

Code:: <script type="text/javascript" src="//cdn.jsdelivr.net/discord-widget/latest/discord-widget.min.js"> </script> <script type="text/javascript"> discordWidget.init({ serverId: '323545104474439701', title: 'Discord PCCF', join: true, alphabetical: false, theme: 'dark', hideChannels: ['Channel Name 1', 'Channel Name 2'], showAllUsers: true, allUsersDefaultState: true, showNick: false }); discordWidget.render(); </script> <div class="discord-widget"><span class="width: 200px; height: 250px;"> </span> </div>

Edit : Je précise que la hauteur du bloc de base de l'annonce (car c'est cette option que je modifie) doit être de 300px, pas +. La largeur, si possible, adaptable à tous les supports. (sinon, 600px+600px pour chacun des blocs devrait être parfait)

par _Ayno Mer 20 Déc 2017 - 23:36

Bonjour, je n'ai pas des masses compris mais pour le peu que j'ai saisi; as-tu essayé de mettre t'es deux script dans un tableau d'une ligne sur deux colonnes ?

par Nikolerigolo Jeu 21 Déc 2017 - 0:38

Non, pas tenté ...

Quel est le code ? Car pour mettre 2 mots dans un tableau, pas de souci mais pour mes 2 blocs, là, je ne sais pas comment m'y prendre ....

Dommage pour la compréhension .. Je pense avoir été limpide ... Si d'autres pouvaient me dire ce que vous ne comprenez pas ..

http://pccf.forumactif.com/h4-evenements-et-discord

Ces 2 éléments superposés, je voudrais les mettre côte à cote .. Smile

Merci à ceux qui prendront quelques instants pour me donner le coup de main idéal ! cheers

par Nikolerigolo Jeu 21 Déc 2017 - 11:47

2 blocs, côte à côte, comment faire ? Captur11

Voilà exactement ce que je veux faire en apparence avec mes codes, plus haut.

A l'aide! Smile

par _Ayno Jeu 21 Déc 2017 - 13:07

Code:: <html><head> <table style="width:100%"> <tr> <th> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><link rel="stylesheet" href="//cdn.jsdelivr.net/discord-widget/1.1/dark.min.css" type="text/css"></head><body><iframe src="https://calendar.google.com/calendar/embed?showTitle=1&showNav=0&showDate=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&mode=AGENDA&height=300&wkst=2&hl=fr&bgcolor=%2329527A&src=fqth9tc5pv05pvghb2ip94j90s%40group.calendar.google.com&color=%23333333&ctz=Europe%2FParis" scrolling="no" style="border: 5px solid rgb(16, 134, 245); width: 600px; height: 300px;" frameborder="0"></iframe> <script type="text/javascript" src="//cdn.jsdelivr.net/discord-widget/latest/discord-widget.min.js"> </script> <script type="text/javascript"> discordWidget.init({ serverId: '323545104474439701', title: 'Discord PCCF', join: true, alphabetical: false, theme: 'dark', hideChannels: ['Channel Name 1', 'Channel Name 2'], showAllUsers: true, allUsersDefaultState: true, showNick: false }); discordWidget.render(); </script> </th> <th><div class="discord-widget" version="1.1"><div class="discord-title"><h3>Discord PCCF</h3></div><ul class="discord-tree"><li class="discord-channel">Salle de réunion</li><ul class="discord-userlist"></ul><li class="discord-channel">Salon</li><ul class="discord-userlist"></ul><li class="discord-channel">Course 1</li><ul class="discord-userlist"></ul><li class="discord-channel">Course 2</li><ul class="discord-userlist"></ul><li class="discord-channel">Course 3</li><ul class="discord-userlist"></ul><li class="discord-channel">AFK</li><ul class="discord-userlist"></ul><li class="discord-channel discord-allusers-toggle">▾ Online Users</li><ul class="discord-userlist discord-allusers"><li class="discord-user"><img src="https://cdn.discordapp.com/avatars/382501029553504256/a02d4003bbcac8982e1d33b3f9a98ab7.jpg" class="discord-avatar"><div class="discord-user-status discord-online"></div>3ART Yannouh92<span></span></li><li class="discord-user"><img src="https://cdn.discordapp.com/embed/avatars/2.png" class="discord-avatar"><div class="discord-user-status discord-online"></div>darkgunz<span></span></li><li class="discord-user"><img src="https://cdn.discordapp.com/avatars/161907354454065155/f11d4e7d041603d768f3c99e6effa54e.jpg" class="discord-avatar"><div class="discord-user-status discord-idle"></div>Era<span> - Next Car Game: Wreckfest</span></li><li class="discord-user"><img src="https://cdn.discordapp.com/avatars/105256615283855360/df3bc00420cbbbfd3a1430fcc198a964.jpg" class="discord-avatar"><div class="discord-user-status discord-idle"></div>Jyben - Supreme Jägermeister<span></span></li><li class="discord-user"><img src="https://cdn.discordapp.com/avatars/328481074369789973/cfebb782aa8fce3092f2b1eaea0f89c8.jpg" class="discord-avatar"><div class="discord-user-status discord-online"></div>kikimi<span> - Project CARS 2</span></li><li class="discord-user"><img src="https://cdn.discordapp.com/avatars/271957257137291265/037cb8b7cf72ecf73210e2b3bed77bed.jpg" class="discord-avatar"><div class="discord-user-status discord-online"></div>pitwolf<span></span></li><li class="discord-user"><img src="https://cdn.discordapp.com/embed/avatars/2.png" class="discord-avatar"><div class="discord-user-status discord-idle"></div>renosport<span></span></li><li class="discord-user"><img src="https://cdn.discordapp.com/avatars/246655453403152385/81a785aceeea1fd8eb94cf6cc1503cd0.jpg" class="discord-avatar"><div class="discord-user-status discord-idle"></div>Rusti<span></span></li><li class="discord-user"><img src="https://cdn.discordapp.com/avatars/243312595497385984/140f8fcdc496abd785c12221ffb4b518.jpg" class="discord-avatar"><div class="discord-user-status discord-idle"></div>Speedd60<span></span></li></ul></ul><p class="discord-users-online">Users Online: 9</p><p class="discord-join"><a href="https://discordapp.com/invite/g9KRqs" target="_blank">Join Server</a></p><div class="discord-fade"></div></div></body></html> </th> </table>

Ceci fait en quelques secondes te convient-il?

Essayer d’expérimenter sur le width des TH et non de TABLE.

par Nikolerigolo Jeu 21 Déc 2017 - 13:56

Ahh oui!!! Pas mal MAIS ! Laughing

Possible d'enlever l'espace entre les 2 blocs ?

2 blocs, côte à côte, comment faire ? Captur12

Edit : Ok !!!! C'est Nickel!!! Merci énooooormément !!!

par _Ayno Jeu 21 Déc 2017 - 14:12

par Nikolerigolo Jeu 21 Déc 2017 - 14:28

Pour continuer, quelle serait l'astuce pour avoir la même hauteur pour les 2 blocs ?

300px serait pas mal, je pense Wink

par _Ayno Jeu 21 Déc 2017 - 14:35

Re,

j'ai inspecté, pour celui de gauche y'a aucun soucis à le mettre en 500 ou en 300

par contre celui de droite(le plus foncé) y'a beaucoup de balise qui faut redimensionner une à une.

par Nikolerigolo Jeu 21 Déc 2017 - 14:43

Comment ?

Je n'y connais rien .. Je suis désolé ...

2 blocs, côte à côte, comment faire ?