Convertir un code css pour une page d'accueil html en iframe

par nero777kira Sam 2 Mar 2019 - 15:29

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://test-paradise.forumgratuit.fr

Description du problème

Bonjour,

On m'a demandé de faire un message d'accueil pour un forum, seulement ils veulent que le code soit mis en page html et la page html intégrée en iframe dans la zone "message de page d'accueil ". Du coup cette page html n'a pas acces au css du forum, ce qui nous amème à mon problème.. Je ne sais pas intégrer mon css directement dans le code html complet. J'ai essayé mais mes codes qui sont en mouvements se figent... Par exemple mes images coulissantes ne coulissent plus.

Voici le css :

Code:: /*modifier l'apparence des scrollbars de tout le forum*/ ::-webkit-scrollbar { width: 7px; /*largeur de la scrollbar verticale*/ height: 7px; /*hauteur de la scrollbar horizontale*/ background-color: #CCCCCC;} ::-webkit-scrollbar-track { background-color: #CCCCCC; /*couleur du fond de la scrollbar*/} ::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/ background-color: #6D9ABF /*couleur de l'ascenseur*/; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px;} /*end*/ /*staff credits infos*/ .B1 { float: left; } .B2 { float: right; } div.contenant { width:128px; /*largeur du contenant, la meme que celle de l image*/ height: 85px; /*hauteur du contenant, la meme que celle de l image*/ overflow: hidden; } div.contenu { width: 128px; /*largeur du contenu, la meme que celle de l image*/ height: 85px; /*hauteur du contenu, la meme que celle de l image*/ overflow: auto; /*pour apparition d une scroll bar si le texte est trop long*/ } .contenant img { width:138px; /*largeur de l image*/ height:85px; /*hauteur de l image*/ position: relative; bottom: 85px; /*ici mettre la hauteur de l image*/ transition: 0.8s; /*pour l effet de transition*/ } .contenant:hover img { /*au survol de la souris sur le bloc*/ bottom: 170px; /*ici mettre deux fois la hauteur de l image*/ transition: 0.8s; /*pour l effet de transition*/ } div.contenant1 { width:200px; /*largeur du contenant, la meme que celle de l image*/ height: 271px; /*hauteur du contenant, la meme que celle de l image*/ overflow: hidden; } div.contenu1 { width: 200px; /*largeur du contenu, la meme que celle de l image*/ height: 271px; /*hauteur du contenu, la meme que celle de l image*/ overflow: auto; /*pour apparition d une scroll bar si le texte est trop long*/ } .contenant1 img { width:200px; /*largeur de l image*/ height:271px; /*hauteur de l image*/ position: relative; bottom: 271px; /*ici mettre la hauteur de l image*/ transition: 0.8s; /*pour l effet de transition*/ } .contenant1:hover img { /*au survol de la souris sur le bloc*/ bottom: 542px; /*ici mettre deux fois la hauteur de l image*/ transition: 0.8s; /*pour l effet de transition*/ } /*end*/ /*partenaires*/ .principal img { filter:alpha(opacity=70); -moz-opacity:0.7;opacity: 0.7; } .principal img:hover { filter:alpha(opacity=100); -moz-opacity:1;opacity: 1; } div.cssactif_tableaupartenaire { width: 750px; /* À adapter en fonction du nombre de colonnes désirées (typiquement: (NOMBRE_COLONNE * (2*MARGE)) + (4 * Largeur initiale) */ height: 50px; line-height: 0; /* À ne pas modifier */ } div.cssactif_tableaupartenaire a, div.cssactif_tableaupartenaire a img { height: 21px; /* Hauteur initiale */ width: 60px; /* Largeur initiale */ } div.cssactif_tableaupartenaire a { display: inline-block; /* À ne pas modifier */ position: relative; /* À ne pas modifier */ margin: 1px; /* MARGE entre les images */ } div.cssactif_tableaupartenaire a img { display: block; /* À ne pas modifier */ position: absolute; /* À ne pas modifier */ left: 0; /* À ne pas modifier */ top: 0; /* À ne pas modifier */ /* Transitions pour différents navigateurs */ /* navigateur: toutes_transitions durée type */ -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } div.cssactif_tableaupartenaire a:hover img { height: 35px; /* Hauteur finale */ width: 100px; /* Largeur finale */ z-index: 99; /* Place l'image au-dessus des autres */ /* Positionne le logo de pleine taille au centre - À adapter */ left: -50%; top: -50%; } /*end*/ .F2 { background-color:#729DC0; font-weight:bold; color:#E6E6E6; text-align: center; } /*end pa*/

et voici le code Html:

Code:: <center><script src="http://tinyurl.com/var-fa" type="text/javascript"></script><div style="background: url('https://i.servimg.com/u/f37/14/21/67/09/sans_t10.png'); width:850px;height: 516px; "><a class="postlink" href="http://st-adams.forumactif.com/t16-reglement"><img alt="" border="0" src="https://i.servimg.com/u/f37/14/21/67/09/sans_t18.png" /></a><a class="postlink" href="http://st-adams.forumactif.com/f18-personnages-predefinis"><img alt="" border="0" src="https://i.servimg.com/u/f37/14/21/67/09/sans_t28.png" /></a><a class="postlink" href="http://st-adams.forumactif.com/t10-avatars-utilises"><img alt="" border="0" src="https://i.servimg.com/u/f37/14/21/67/09/sans_t14.png" /></a><a class="postlink" href="http://st-adams.forumactif.com/f36-partenariat"><img alt="" border="0" src="https://i.servimg.com/u/f37/14/21/67/09/sans_t15.png" /></a><br /> <table ="display:="" inline"="" border="0" cellspacing="0" cellpadding="0"> <tr style=""><td style="width:760px;"> <div align="center"> <span style="font-size: 25px;"><span style="font-family:impact;"><span style="color: #EEEEEE;">Bienvenue à Saint-Adams <span class="USERNAME"></span> !!</span></span></span> </div></td> </tr> </table> <table border="0" cellspacing="0" cellpadding="4" style="width:760px;"> <tr style=""> <td style="width:260px;"><div style="background:url(https://i.servimg.com/u/f30/17/97/38/37/test10.png);height:180px;overflow:auto; text-align: justify;padding:0 10px;margin-bottom:6px"> <img src="https://i.servimg.com/u/f37/14/21/67/09/sans_t16.png" style="float:left" /> <div align="center"> <span style="font-size: 14px;"><span style="font-family:impact;"><span style="color: #EEEEEE;">-400 mots minimum- YAOI NC-18</span></span> </span> </div><br /><span style="font-size: 13px; line-height: normal">Niché par-delà les montagnes qui décrivent la beauté de l’Angleterre, se terre un magnifique village nommé Saint-Adams par ses fondateurs du même nom, il y a de cela plusieurs siècles. L’endroit est le fleuron de la bourgeoisie et de la royauté du monde entier, surtout reconnu grâce à son pensionnat pour jeunes hommes, fondé il y a de cela quarante-et-un an par la richissime famille Adams. Il s’agit de l’établissement d’éducation le plus reconnu pour engendrer l’élite la mieux établie au monde. Les jeunes adultes des meilleures familles y apprennent tant gestion de leur patrimoine, que la bienséance ainsi que toute forme de savoirs. Particularité du village, la population est exclusivement masculine. Qui serez-vous ?... Un étudiant brillant et sérieux ou un membre de la jeunesse dorée profitant de l'argent de papa ? Un professeur bien sympathique ou au contraire sadique ? Ou peut-être, un simple villageois vivant de folles aventures ? Le choix est vaste, et il ne tient qu'à vous de franchir les grilles de ce pensionnat.. <a href="http://st-adams.forumactif.com/t15-contexte" class="postlink">more~ </a></span> </div> <div class="B1"> <div class="contenant"> <div class="contenu"> <br /><strong><span style="color: #990000;font-size: 10px;"> Administrateurs :</span></strong><br /> <strong><span style="font-size: 10px;">Cédric Aylen :</span></strong><a href="http://st-adams.forumactif.com/privmsg?mode=post&u=53"><span style="color: #009933;font-size: 10px;">MP</span></a><br /> <strong><span style="font-size: 10px;">Nathaniel Balsey :</span></strong> <a href="http://st-adams.forumactif.com/privmsg?mode=post&u=248"><span style="color: #009933;font-size: 10px;">MP</span></a><br /><strong><span style="color: #ff6600;font-size: 10px;">Modos RP:</span></strong><br /><strong><span style="font-size: 10px;">Nathanael Lauwrence :</span></strong> <a href="http://st-adams.forumactif.com/privmsg?mode=post&u=70"><span style="color: #009933;font-size: 10px;">MP</span></a><br /><strong><span style="color: #3366cc;font-size: 10px;">Modos Discord / Cb:</span></strong><br /><strong><span style="font-size: 10px;">Nayden Valamir : </span></strong><a href="http://st-adams.forumactif.com/privmsg?mode=post&u=72"><span style="color: #009933;font-size: 10px;">MP</span></a><br /><strong><span style="color: #993399;font-size: 10px;">Animateurs:</span></strong><br /><strong><span style="font-size: 10px;">Andrej Dabrowski</span></strong> <a href="http://st-adams.forumactif.com/privmsg?mode=post&u=356"><span style="color: #009933;font-size: 10px;">MP</span></a><br /> </div><img src="https://i.servimg.com/u/f37/14/21/67/09/staff10.png" alt="" /> </div> </div> <div class="B2"> <div class="contenant"> <div class="contenu"> <br /> <span style="font-size: 10px; line-height: normal"><strong>Nous remercions :</strong><br /> Edern Dwight pour la banière<br />Oz" pour la page d'accueil<br />Nous rappelons que toute création appartient à son créateur<br /></span> </div><img src="https://i.servimg.com/u/f37/14/21/67/09/staff110.png" alt="" /> </div> </div> </td> <td valign="top"> <iframe src="https://www.youtube.com/embed/Nyf7YujegDw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" style="width: 280px; height: 150px;"></iframe> <div style="width:280px;height:113px;overflow:auto; text-align: justify;background:#A5A5A5;padding:0px ;margin-top:4px"> <div class="F2"> <span style="font-size: 12px;">NEWS</span> </div> <div align="center"> <span style="color: rgb(50, 63, 95);"><span style="font-size: 10px; line-height: normal"><strong>Nous sommes en Hiver 2019; il fait froid!!</strong></span></span><br /><strong><span style="color: #ffffff;"><span style="font-size: 10px; line-height: normal">||Rejoins nous sur Discord, on y fait la fête!||</span></span></strong> </div><br /><span style="color: rgb(50, 63, 95);"><strong><span style="font-size: 13px; line-height: normal">†</span></strong></span><span style="font-size: 12px; line-height: normal">Tagada tagada tagada tagada</span><br /><span style="color: rgb(50, 63, 95);"><strong><span style="font-size: 13px; line-height: normal">†</span></strong></span><span style="font-size: 12px; line-height: normal">Tagada tagada tagada tagada</span><br /><span style="color: rgb(50, 63, 95);"><strong><span style="font-size: 13px; line-height: normal">†</span></strong></span><span style="font-size: 12px; line-height: normal">Tagada tagada tagada tagada</span><br /><br /> </div> </td> <td style="width:200px;height:271px;"> <div class="contenant1"> <div class="contenu1"> <div style="background: url('https://i.servimg.com/u/f41/15/68/51/24/mewmew10.png'); width:55px;height: 85px; float:left; "></div><br/><span style="color: #CC6633; font-size: 10px; line-height: normal">Bartholomew Herondale</span><br/><span style="font-size: 10px; line-height: normal">L'homme le plus romantique<br/></span> <br/><br/><br/><a href="http://st-adams.forumactif.com/t2659-le-corbeau-dechaine-20"><span style="color: #000000; font-size: 10px; line-height: normal">Le corbeau déchainé #20</span></a> <br/><br/><br/><strong><center><span style="font-size: 10px; line-height: normal">Top Site</span> ***</center></strong><br/><br/><span style="font-size: 12px; line-height: normal"><a href="http://st-adams.forumactif.com/t7-reglement-du-campus">Réglement du Campus</a></span> <br/><span style="font-size: 12px; line-height: normal"><a href="http://st-adams.forumactif.com/f14-livre-des-regles-de-vie">Autres liens utiles</a></span> </div><img alt="" src="https://i.servimg.com/u/f30/17/97/38/37/pa_tra10.png" /> </div> </td> </tr> </table> <br /> <div class="principal img"> <div style="text-align:center" class="cssactif_tableaupartenaire"> <marquee id="id1"> <span onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();"><a href="http://be-mine.forumactif.org/" target="_blank" class="postlink"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a href="http://be-mine.forumactif.org/" target="_blank" class="postlink"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a href="http://be-mine.forumactif.org/" target="_blank" class="postlink"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a href="http://be-mine.forumactif.org/" target="_blank" class="postlink"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a href="http://be-mine.forumactif.org/" target="_blank" class="postlink"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a href="http://be-mine.forumactif.org/" target="_blank" class="postlink"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a href="http://be-mine.forumactif.org/" target="_blank" class="postlink"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a href="http://be-mine.forumactif.org/" target="_blank" class="postlink"><img src="http://i40.tinypic.com/255hoyh.png" /></a></span> </marquee> </div> </div> </div></center>

Mon probleme concerne donc les div class : contenant, contenu et celles des partenaires

Pour l'instant j'ai laissé le code avec le css et non pas l'iframe comme demandé mais à chaque mise à jour des balises <tbody> s'incrustent partout , ce qui est problématique et agaçant.

Merci de votre aide !

par *Splash* Sam 2 Mar 2019 - 16:47

Hi,
Je ne sais pas si ce tuto pourra te renseigner Clique

Quoi qu'il en soit ton code HTML fonctionne très bien, il suffirait de mettre cette page HTML en page d'accueil est le tour serait joué

par nero777kira Sam 2 Mar 2019 - 17:01

Bonjour !

Merci mais ça ne m'aide pas vraiment...

Le truc c'est qu'elles veulent que ce soit intégré dans le forum comme un message d'accueil normal. Sous la banière et dessus les catégorie , sauf que si je fais ce que tu propose ça sera à part =/

Et quand je veux intégrer le code via un iframe, il est tout déformé parce que le css n'est pas pris en compte.. mais je n'arrive pas à remplacer mes < div class=contenant> (par exemple ) en <div style= "> qui fonctionnent... =/ je sais pas si je m'explique bien désolé TWT

par *Splash* Sam 2 Mar 2019 - 17:10

Tu prends ton code HTML et tu vas le copier dans le template index_body en haut de page après ceci :

Code:: {JAVASCRIPT}

Et tu auras le résultat escompté

par nero777kira Sam 2 Mar 2019 - 18:21

MAIS TU VIENS DE ME SAUVER !!! C'est parfait !!! C'est vachement plus simple !

Milles merci !!!

par *Splash* Sam 2 Mar 2019 - 18:23

Au plaisir

Convertir un code css pour une page d'accueil html en iframe