Problème pour lier du CSS et du Html

par Isalia Ven 31 Oct 2014 - 16:49

Bonjour !

J'ai réalisé une fiche de publicité pour mon forum. J'ai utilisé pour cela du CSS, sauf qu'il me faudrait l'incruster dans mon code html, ce que j'ai fait à l'aide de plusieurs balises dont <style> </style>.
Mais ce code que beaucoup de sites conseillent, ne fonctionne pas.

http://forumtest-bokeh.discutforum.com/t14-css-test#20

Voici mon code :

Code:: <link href='http://fonts.googleapis.com/css?family=Poiret+One|Josefin+Sans|Pacifico' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Titre</title> <style type="text/css"> .link{ width: 61px; height: 61px; position: relative; overflow: visible; margin: 1px; } .boiteaimage1{ width: 61x; height: 61px; border-radius: 61px 61px 61px 61px; border: 2px solid #3F5A70; transition: 1s } .boiteaimage1{ width: 61px; height: 61px; border-radius: 61px 61px 61px 61px; border: 2px solid #3F5A70; transition: 1s } .boiteaimage1:hover{ transform: rotate(360deg); transition: 1s; } .link .infobulle{ visibility: hidden; position: absolute; top: 30px; left: 30px; width: 100px; height: 80px; opacity: 0; background: #F5F8FA; border-left: 2px solid #3F5A70; border-right: 2px solid #3F5A70; padding: 5px; overflow: auto; text-align: center; color: #3F5A70; font-family: 'times new roman'; font-size: 11px; } .link:hover .infobulle{opacity: 1; visibility: visible; z-index: 999; } .NomStaff{ text-align: center; font-family: 'Pacifico'; font-size: 14px; color: #4E6387; } .RangStaff{ text-align: center; font-family: 'Poiret One'; font-size: 12px; color: #8d0000; } .cadre_partenaire { background-color: #ACB9CF; transition: all 1s!important; -moz-transition: all 1s!important; -webkit-transition: all 1s !important; } .cadre_partenaire:hover { background-color: #C6D1E3; } .special { letter-spacing: 1px; transition: all 1s!important; -moz-transition: all 1s!important; -webkit-transition: all 1s !important; } .special:hover { letter-spacing: 4px; }</style> <center><div><center><div style="font-family: 'Poiret One', cursive; font-size: 28px; text-shadow: 0px 0px 5px #ffffff; line-height: 14px; color: #00234d; letter-spacing: 15px; margin-bottom: -5px;"><br/>The New Guild RPG</div><div style="padding-left: 0px; font-size: 16px; font-family: 'Lobster'; color: #ffffff; letter-spacing: 4pt; margin-bottom: -15px;">Fairy Tail x984 </div></center><div style="width: 500px; height: 950px; background-color: #C0C8D7; border-top: 0px solid #399092; border-left: 1px solid #4E6387; border-right: 1px solid #4E6387;"> [img]http://www.zupimages.net/up/14/44/yao2.png[/img]<br /> <span style="display: block; text-align: left; color: #4E6387; font-family: Crimson Text; font-size: 18px; text-shadow: 1px 1px 0px #ffffff; font-style: italic; border-bottom: 2px solid #4E6387; padding-left: 10px;"><div class="special"> Diantre ! Dans quel enfer tomberez vous ?</div></span><table><tr><td><div style="text-align: justify; font-size: 11px; width:237px; font-size: 11px; margin-top: 5px; text-align: justify; height: 150px; margin-left: 2px; margin-right: 2px; padding: 3px; overflow: auto; "><div class="cadre_partenaire">⚡ L'histoire se passe <b>200 ans</b> après le manga. Tout les personnages connus dans l’oeuvre de <b>Mashima</b> sont donc normalement <b>décédés,</b> il est impossible de les jouer; nous faisons appel à votre imagination dans ce domaine pour créer un personnage bien à vous. ⚡ Le système de <b>RolePlay</b> a été conçu le plus simple possible. <b>10 lignes</b> sans les dialogues, une bonne <b>syntaxe</b> et une bonne <b>orthographe</b>, ainsi que si possible un minimum de présentation sont demandés dans un <b>RP.</b> ⚡ Le <b>Hentai</b>, le <b>Yuri</b>, le <b>Yaoi</b> et tout ce qui s'en rapproche est interdit formellement sur ce forum. ⚡ Nous avons instauré un système de <b>Points de Puissance</b> pour passer les différents <b>rangs</b>. Les <b>Jewels</b> vous permettent d'acquérir des <b>objets</b> spéciaux dans les <b>boutiques</b>, ou faire réaliser des kits à <b>l'atelier</b>.</div> </div></td><td><div style="text-align: justify; font-size: 11px; width: 237px; font-size: 11px; margin-top: 5px; text-align: justify; height: 150px; overflow: auto; margin-left: 2px; margin-right: 2px; padding: 3px;"><div class="cadre_partenaire">Fairy Tail, 200 ans après les événements de l'oeuvre originale. Cette guilde dominait toutes les autres jusqu'à récemment. L'issue des derniers Grands Jeux Magiques en donna la preuve : Thunder Light et Wave Stream arrivèrent ex æquo avec les fées. Mais les trois rivales durent faire face à une force antagoniste. Dark Dragon, guilde noire à son apogée fit trembler le monde... Petit à petit des rumeurs concernant un complot, un accord entre Thunder Light (la plus discrète des grandes guildes officielles) et Dark Dragon s'avérèrent vraies. A l'instant même ou Edge Celsius annonçait le passage de sa guilde dans les "ténèbres", le maître de la guilde noire connaissait un coup d'état. Minoru Takuma fut laissé pour mort, et un nouveau maître prit sa place. Fiore est désormais dans un état de confusion, Fairy Tail et Wave Stream doivent maintenant se serrer les coudes. Le Conseil se fait des plus instables... Le chaos s'instille, se répand... Le degré d'entropie grimpe en flèche. Approche voyageur, choisis ton camp. Ça ne fait que commencer...</div></div></td></tr></table> </span> <span style="display: block; text-align: left; color: #4E6387; letter-spacing: 2px; font-family: Crimson Text; font-size: 18px; text-shadow: 1px 1px 0px #ffffff; font-style: italic; border-bottom: 2px solid #4E6387; padding-left: 10px;"><div class="special">Les Dieux sur leurs nuages, attendent votre venue</div></span> <table><tr><td><div class="link"><img src="http://www.zupimages.net/up/14/44/jzep.png" class="boiteaimage1" /><div class="infobulle"><div class="NomStaff">Isalia</div><div class="RangStaff">Fondatrice</div> <a rel="nofollow" target="_blank" class="postlink" href="http://the-new-guild-rpg.ogameunivers.com/u1"><hl>Profil</hl></a> ⚡ <a rel="nofollow" target="_blank" class="postlink" href="http://the-new-guild-rpg.ogameunivers.com/privmsg?mode=post&u=1"><hl>Mp</hl></a></span> </div></div></td><td><div class="link"><img src="http://www.zupimages.net/up/14/44/ts9y.png" class="boiteaimage1" /><div class="infobulle"><div class="NomStaff">Flame</div><div class="RangStaff">Administratrice</div> <a rel="nofollow" target="_blank" class="postlink" href="http://the-new-guild-rpg.ogameunivers.com/u16"><hl>Profil</hl></a> ⚡ <a rel="nofollow" target="_blank" class="postlink" href="http://the-new-guild-rpg.ogameunivers.com/privmsg?mode=post&u=16"><hl>Mp</hl></a> </span> </div></div></td><td><div class="link"><img src="http://www.zupimages.net/up/14/44/hcjd.png" class="boiteaimage1" /><div class="infobulle"><div class="NomStaff">Rei</div><div class="RangStaff">Administratrice</div> <a rel="nofollow" target="_blank" class="postlink" href="http://the-new-guild-rpg.ogameunivers.com/u66"><hl>Profil</hl></a> ⚡ <a rel="nofollow" target="_blank" class="postlink" href="http://the-new-guild-rpg.ogameunivers.com/privmsg?mode=post&u=66"><hl>Mp</hl></a> </span> </div></div></td><td><div class="link"><img src="http://www.zupimages.net/up/14/44/rov6.png" class="boiteaimage1" /><div class="infobulle"><div class="NomStaff">Erial</div><div class="RangStaff">Modérateur</div> <a rel="nofollow" target="_blank" class="postlink" href="http://the-new-guild-rpg.ogameunivers.com/u83"><hl>Profil</hl></a> ⚡ <a rel="nofollow" target="_blank" class="postlink" href="http://the-new-guild-rpg.ogameunivers.com/privmsg?mode=post&u=83"><hl>Mp</hl></a> </span> </div></div></td><td><div class="link"><img src="http://www.zupimages.net/up/14/44/iepg.png" class="boiteaimage1" /><div class="infobulle"><div class="NomStaff">Ryû</div><div class="RangStaff">Modérateur</div> <a rel="nofollow" target="_blank" class="postlink" href="http://the-new-guild-rpg.ogameunivers.com/u43"><hl>Profil</hl></a> ⚡ <a rel="nofollow" target="_blank" class="postlink" href="http://the-new-guild-rpg.ogameunivers.com/privmsg?mode=post&u=43"><hl>Mp</hl></a> </span> </div></div></td><td><div class="link"><img src="http://www.zupimages.net/up/14/44/h7t5.png" class="boiteaimage1" /><div class="infobulle"><div class="NomStaff">Alysée</div><div class="RangStaff">Admine retraitée</div> <a href="http://the-new-guild-rpg.ogameunivers.com/u2" class="postlink" target="_blank" rel="nofollow"><hl>Profil</hl></a> ⚡ <a href="http://the-new-guild-rpg.ogameunivers.com/privmsg?mode=post&u=2" class="postlink" target="_blank" rel="nofollow"><hl>Mp</hl></a></span> </div></div></td><td><div class="link"><img src="http://www.zupimages.net/up/14/44/69io.png" class="boiteaimage1" /><div class="infobulle"><div class="NomStaff">Edge</div><div class="RangStaff">Ancien</div> <a rel="nofollow" target="_blank" class="postlink" href="http://the-new-guild-rpg.ogameunivers.com/u22"><hl>Profil</hl></a> ⚡ <a rel="nofollow" target="_blank" class="postlink" href="http://the-new-guild-rpg.ogameunivers.com/privmsg?mode=post&u=22"><hl>Mp</hl></a> </span> </div></div></td></tr></table> <span style="display: block; text-align: left; color: #4E6387; letter-spacing: 2px; font-family: Crimson Text; font-size: 18px; text-shadow: 1px 1px 0px #ffffff; font-style: italic; border-bottom: 2px solid #4E6387; padding-left: 10px;"><div class="special">Je le vois, tu veux nous rejoindre ...</div></span> <table><tr><td><div style="text-align: justify; font-size: 11px; width:146px; font-size: 11px; margin-top: 5px; text-align: justify; height: 150px; margin-left: 2px; margin-right: 2px; padding: 3px;"><table><tr><td><div class="link"><img src="http://www.zupimages.net/up/14/44/i802.png" class="boiteaimage1" /><div class="infobulle"><div class="NomStaff">Gabriel Hikage</div><div class="RangStaff">Conseiller</div> [url=http://the-new-guild-rpg.ogameunivers.com/t373-predef-gabriel-hikage]Me jouer[/url] </div></div></td><td><div class="link"><img src="http://www.zupimages.net/up/14/44/etol.png" class="boiteaimage1" /><div class="infobulle"><div class="NomStaff">Akane Hikaru</div><div class="RangStaff">Wave Stream</div> [url=http://the-new-guild-rpg.ogameunivers.com/t567-akane-hikaru-by-azuki-nakumi-predef]Me jouer[/url] </div></div></td></tr><tr><td><div class="link"><img src="http://www.zupimages.net/up/14/44/np9e.jpg" class="boiteaimage1" /><div class="infobulle"><div class="NomStaff">Finn Aberline</div><div class="RangStaff">Dark Dragon</div> [url=http://the-new-guild-rpg.ogameunivers.com/t874-predef-finn-aberline]Me jouer[/url] </div></div></td><td><div class="link"><img src="http://www.zupimages.net/up/14/44/qegk.png" class="boiteaimage1" /><div class="infobulle"><div class="NomStaff">Prédéfini</div><div class="RangStaff">Guilde</div> A venir !</div></div></td></tr></table> </div></td><td><div style="text-align: justify; font-size: 11px; width: 327px; font-size: 11px; margin-top: 5px; text-align: justify; height: 150px; margin-left: 2px; margin-right: 2px; padding:3px;"><table><tr><td><iframe src="http://ask.fm/widget/45996e2f1d16c2eda275e007ab5605e2ec00a699?stylesheet=custom&lang=13" frameborder="0" scrolling="no" width="140" height="150" style="border:none; background-color: #8A9DBD;"></iframe></td><td><div style=" height:95px; overflow: auto;"> ⚡ En activité depuis l'été 2012 ⚡ 90 charmants membres et plus de 10 000 messages. ⚡ 4 guildes, Fairy Tail, Wave Stream, Thunder Light, Dark Dragon. ⚡ Des rangs bien à nous : Mage en apprentissage, novice, confirmé, expérimenté, aguerri, S, SS. ⚡ Nous vous attendons ! ♥</div><div style="height: 40px;"> <a target="_blank" href="https://www.facebook.com/thenewguildrpg?fref=ts"><img src="http://www.marketing-internet.com/wp-content/uploads/2011/07/bouton-jaime-facebook.jpg" style="width: 42px; height: 40px;" border="0" /></a> <a target="_blank" href="https://twitter.com/TheNewGuildRPG"><img src="http://www.prconversations.com/wp-content/uploads/2011/08/twitter_icon4.jpg" style="width: 42px; height: 40px;" border="0" /></a></div> </td></tr></table> </div></td></tr></table> [url=http://the-new-guild-rpg.ogameunivers.com/][img]http://www.zupimages.net/up/14/31/iioz.png[/img][/url] <div style="text-align: center; font-family:'Times New Roman'; font-size: 11px;">⚡ [url=http://the-new-guild-rpg.ogameunivers.com/f1-reglement-cie]Informations[/url] ⚡ [url=http://the-new-guild-rpg.ogameunivers.com/f66-nos-partenaires]Nos partenaires[/url] ⚡ [url=http://the-new-guild-rpg.ogameunivers.com/t87-partenaires]Nous lier[/url] ⚡ [url=http://the-new-guild-rpg.ogameunivers.com/t86-boutons]Boutons[/url] ⚡</div> </div><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" height="16" width="502"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf"><param name="bgcolor" value="#4E6387"><param name="FlashVars" value="mp3=http://a.tumblr.com/tumblr_ls7vzqQYLb1qctdauo1.mp3&bgcolor=d70385&loadingcolor=fafafa&buttoncolor=fafafa&slidercolor=fafafa"></object></div></center>

Si quelqu'un sait comment relier mon code html et css d'une manière efficace, je lui en serais très reconnaissante.
Merci d'avance,
Bonne fin d'après-midi.

par Isalia Ven 31 Oct 2014 - 18:17

J'ai réglé le problème en faisant une iframe. Merci.

Problème pour lier du CSS et du Html

Problème pour lier du CSS et du Html

Re: Problème pour lier du CSS et du Html