HTML et CSS n'ont pas de secrets pour moi ✓ ANCIENNETE : : 13/10/2012
✓ LOGICIELS : : Tophiltre & Toshop CS5
Posté le Sam 13 Oct - 20:24 “ Commentaire de Ocean Lounge. ”
✎ MERCI DE BIEN LIRE CE PREMIER POST ! C'est épuisant de toujours se répéter. ✎ Le crédit de la fiche est relativement discret, merci de ne pas le retirer. ✎ La fiche est un peu compliquée au niveau du codage donc si vous ne savez pas quoi modifier, n'hésitez pas à demander. ✎ Vous pouvez modifier les couleurs bien évidemment : )Alors d'abord et avant tout, vous devriez avoir un forum pour l'hébergé. Sur forumactif, vous allez dans le panneau d'administration, modules, html & javascript et gestion des pages HTML. Ensuite vous crée un nouvelle page et vous collez ce code :
Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> .tabc { background-color: #f5f5f5; width: 210px; height:30px; font-family: 'Lobster', cursive;; font-size: 20px; color: #7db4bd; text-align: center; line-height: 30px; overflow:auto; -moz-transition:all 1s ease-in-out; -webkit-transition:all 1s ease-in-out; margin-left:0px; } .tabc:hover { background-color: #f5f5f5; width: 210px; height:160px; font-family: 'Lobster', cursive; font-size: 20px; color: #7db4bd; text-align: center; line-height: 30px; -moz-transition:all 1s ease-in-out; -webkit-transition:all 1s ease-in-out; } .color{ width: 210px; height: 150px; background-color:#f5f5f5;} .shipbox { height:300px; width:180px; background-color:#f5f5f5; padding:10px; font-family:trebuchet ms; font-size:10px; line-height:9px; text-align:justify;} .shipimg { height: 300px; width: 200px; -webkit-transition: .4s ease-in-out opacity; -moz-transition: .4s ease-in-out opacity; -o-transition: .4s ease-in-out opacity; transition: .4s ease-in-out opacity; opacity: 0.8;} .shipimg:hover { -webkit-transition: .4s ease-in-out opacity; -moz-transition: .4s ease-in-out opacity; -o-transition: .4s ease-in-out opacity; transition: .4s ease-in-out opacity;} .shiptext { height: 300px; width: 200px; -webkit-transition: .4s ease-in-out opacity; -moz-transition: .4s ease-in-out opacity; -o-transition: .4s ease-in-out opacity; transition: .4s ease-in-out opacity; opacity: 0;} .shiptext:hover { -webkit-transition: .4s ease-in-out opacity; -moz-transition: .4s ease-in-out opacity; -o-transition: .4s ease-in-out opacity; transition: .4s ease-in-out opacity; opacity: 0.85;} .titre1{ font-size: 35px; color: #7db4bd; text-align: center; font-family: 'Lobster', cursive; -webkit-transition: .4s ease-in-out opacity; -moz-transition: .4s ease-in-out opacity; -o-transition: .4s ease-in-out opacity; transition: .4s ease-in-out opacity;} .titre{ font-size: 35px; color: #7db4bd; text-align: center; font-family: 'Lobster', cursive; -webkit-transition: .4s ease-in-out opacity; -moz-transition: .4s ease-in-out opacity; -o-transition: .4s ease-in-out opacity; transition: .4s ease-in-out opacity;} .box { width: 413px; height: 200px; font-family:trebuchet ms; font-size:11px; line-height:9px; text-align:justify; padding: 10px; overflow: auto; -o-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; background-color:#f5f5f5;} </style> </head> <BODY> <center><div style="width: 450px; height: 640px; padding: 0px; border-left: 10px solid #7db4bd; border-right: 10px solid #7db4bd;"><div class="titre1" style="background-color:#f5f5f5; width: 414px; padding: 10px; margin-top:5px;"> prénom prénom nom</div> <table><td valign="top"><div style="width: 200px; height: 320px; padding: 10px; background-color: #f5f5f5"><div class="shipimg"><div style="width:200px; height:320px; background-image:url(http://img828.imageshack.us/img828/2613/ah3.png);"><div class="shiptext"><div class="shipbox"><div style="height:280px; width:180px; overflow:auto; color:#000" class="shiptextscroll"><div class="titre"></br>lien à ajouté</div></br></br> vos lien à ajoutés </div> </div> </div></div> </div></td> <td valign="top"><div class="tabc">biographie<div style="padding: 10px 10px 10px 10px"><div style="width: 180px; height: 270px; font-family: times; font-size: 12px; line-height: 13px; text-align: justify; font-family:trebuchet ms; color: grey;"> histoire de votre personnage <br></div></div></div> <div class="tabc">personnalité<div style="padding: 10px 10px 10px 10px"><div style="width: 180px; height: 270px; font-family: times; font-size: 12px; line-height: 13px; text-align: justify; font-family:trebuchet ms; color: grey;"> le caractère du votre personnage <br></div></div></div> <div class="color"><center><div style="width:170; padding:20px; font-family: 'Lobster', cursive;font-size:17px; color:#7db4bd; text-align: justify;">passez votre souris sur les titres «personalité» et «biographie» pour en connaitre plus sur la belle blonde <center><span style="font-size: 9px;">(c) fiche par ocean lounge</span></center></div> <center></center></td></table><div class="box"><div class="titre">ce que je recherche</div></br></br> <b>TYPE DE LIEN (F) ❥❥</b> description</br></br> <b>TYPE DE LIEN (F) ❥❥</b> description</br></br> <b>TYPE DE LIEN (F) ❥❥</b> description</br></br> <b>TYPE DE LIEN (F) ❥❥</b> description</br></br> <b>TYPE DE LIEN (F) ❥❥</b> description</br></br> </br></div></br></center> <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> </BODY> </html>
ensuite, afin de l'insérer dans un post, vous utiliserez de code :
Code: <center><iframe src="URL DE LA PAGE" style="background: none repeat scroll 0% 0% transparent; height: 650px; width: 550px; -moz-background-inline-policy: continuous;" ;="" frameborder="no" scrolling="no"></iframe></center>
LA PARTIE DE LIEN les belles gosses
(c) fiche par ocean lounge [Vous devez être inscrit et connecté pour voir cette image]
Pseudo
description du lien
Pseudo
description du lien
Spoiler: Code: <center><link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> <div style="background-color:#f5f5f5; width: 522px; padding: 10px; margin-top:5px; font-size: 45px; color: #7db4bd; text-align: center; font-family: 'Lobster', cursive; border-left: 10px solid #7db4bd; border-right: 10px solid #7db4bd;">les belles gosses <center><span style="font-size: 9px;">(c) fiche par ocean lounge</span></center></div><table style="width: 500px; border-collapse:collapse;"><tr><td><div style="width: 250px;background-color: #f5f5f5; border-left: 10px solid #7db4bd; border-right: 10px solid #7db4bd; padding: 5px;"><center><img src= "http://media.tumblr.com/tumblr_m456uu9Rsh1r6fnlvo1_500.gif" width= "250" height= "130"></a><div style="width: 250px; background-color: #d9d9d9; height: 4px;"></div><div style="width: 235px; padding: 5px; background-color: eaeaea; border: 1px dotted #bbb; "><div style="width: 240px; font-family: 'Lobster', cursive; font-size: 16px; letter-spacing: 2px; color: #000; line-height: 85%; text-transform: uppercase;">Pseudo</div><div style="width: 230px; font-family:trebuchet ms; font-size: 11px; letter-spacing: 3px; color: #000; line-height: 85%; text-transform: uppercase; padding-bottom: 2px;"></div><div style="width: 235px; background-color: #d9d9d9; height: 4px;"></div><div style="width: 240px; height:75px; text-align: justify; font-family:trebuchet ms; font-size: 9px; line-height: 95%; color: #000; padding-top: 3px; overflow:auto">description du lien</div></div></td><td><div style="width: 250px;background-color: #f5f5f5; border-left: 10px solid #7db4bd; border-right: 10px solid #7db4bd; padding: 5px;"><center><img src= "http://media.tumblr.com/tumblr_m456uu9Rsh1r6fnlvo1_500.gif" width= "250" height= "130"></a><div style="width: 250px; background-color: #d9d9d9; height: 4px;"></div><div style="width: 235px; padding: 5px; background-color: eaeaea; border: 1px dotted #bbb; "><div style="width: 240px; font-family: 'Lobster', cursive; font-size: 16px; letter-spacing: 2px; color: #000; line-height: 85%; text-transform: uppercase;">Pseudo</div><div style="width: 230px; font-family:trebuchet ms; font-size: 11px; letter-spacing: 3px; color: #000; line-height: 85%; text-transform: uppercase; padding-bottom: 2px;"></div><div style="width: 235px; background-color: #d9d9d9; height: 4px;"></div><div style="width: 240px; height:75px; text-align: justify; font-family:trebuchet ms; font-size: 9px; line-height: 95%; color: #000; padding-top: 3px; overflow:auto">description du lien</div></div></center></div></td></tr></table></center>
POUR VOS RÉPONSE RP [Vous devez être inscrit et connecté pour voir cette image]
pseudo & pseudo
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
(c) fiche par ocean lounge Spoiler: Code: <center><div style="width: 500px;background-color: #f5f5f5; border-left: 10px solid #7db4bd; border-right: 10px solid #7db4bd; padding: 5px;"><center><img src= "http://media.tumblr.com/tumblr_m456uu9Rsh1r6fnlvo1_500.gif" width= "490"></a><div style="width: 490px; background-color: #d9d9d9; height: 4px;"></div><div style="width: 480px; padding: 5px; background-color: eaeaea; border: 1px dotted #bbb; "><div style="width: 490px; font-family: 'Lobster', cursive; font-size: 20px; color: #000; line-height: 85%; text-transform: uppercase;">pseudo & pseudo</div><div style="width: 480px; font-family:trebuchet ms; color: #000; line-height: 85%; text-transform: uppercase; padding-bottom: 2px;"></div><div style="width: 480px; background-color: #d9d9d9; height: 4px;"></div><div style="width: 480px; text-align: justify; font-family:georgia; color: #000; padding-top: 3px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <center><span style="font-size: 9px;">(c) fiche par ocean lounge</span></center></div></div></div></center>
Dernière édition par Ocean Lounge. le Sam 13 Oct - 20:41, édité 2 fois
Who run the world ? ✓ ANCIENNETE : : 26/12/2011
✓ LOGICIELS : : Photoshop
▶ MUSIQUE DU MOMENT : : Never say never - JACOB ARTIST
▶ EMPLOI/ETUDES : : Infographiste
Posté le Sam 13 Oct - 20:29 “ Commentaire de Amethyst. ”
Très jolie fiche, j'adore l'effet sur l'avatar
HTML et CSS n'ont pas de secrets pour moi ✓ ANCIENNETE : : 13/10/2012
✓ LOGICIELS : : Tophiltre & Toshop CS5
Posté le Sam 13 Oct - 20:38 “ Commentaire de Ocean Lounge. ”
Merci
Ajout d'une fiche de réponse ainsi que celle de votre liste de liens (aa)
Il parait que je réalise des commandes au top ✓ ANCIENNETE : : 10/10/2012
✓ LOGICIELS : : Photofiltre & photoshop
Posté le Dim 14 Oct - 7:52 “ Commentaire de Yuuki ”
Han tout ce que tu fais est trop beau!
Merci beaucoup pour le partage!
Je débute, je suis un coquelicot ✓ ANCIENNETE : : 07/04/2012
▶ MUSIQUE DU MOMENT : : Asaf Avidan - One Day/Reckoning Song
▶ EMPLOI/ETUDES : : Étudiante
Posté le Dim 14 Oct - 8:46 “ Commentaire de Bleed Like Me ”
Très jolies fiches, merci du partage
Je débute, je suis un coquelicot ✓ ANCIENNETE : : 14/10/2012
✓ LOGICIELS : : photofiltre
Posté le Dim 14 Oct - 13:11 “ Commentaire de BouLott ”
Han j'approuve c'est vraiment très très joli. je garde sous le coude. *-*
HTML et CSS n'ont pas de secrets pour moi ✓ ANCIENNETE : : 13/10/2012
✓ LOGICIELS : : Tophiltre & Toshop CS5
Posté le Dim 14 Oct - 15:43 “ Commentaire de Ocean Lounge. ”
Merci
Who run the world ? ✓ ANCIENNETE : : 26/12/2011
✓ LOGICIELS : : To shop :)
Posté le Sam 3 Nov - 12:21 “ Commentaire de Emie ”
J'aime beaucoup ces codes proposés
Merci beaucoup pour ce partage !
Posté le “ Commentaire de Contenu sponsorisé ”