HTML et CSS n'ont pas de secrets pour moi
✓ ANCIENNETE : : 13/10/2012
✓ LOGICIELS : : Tophiltre & Toshop CS5
| Posté le Sam 13 Oct - 17:21 “ Commentaire de Ocean Lounge. ” | | 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">
.fadecontentwrapper{ /* Total width: 350px+5px+5px=360px Read relative width relations for the other two containers below! */ position: relative; width: 505px; height: 600px; /* Set height to be able to contain height of largest content shown*/ overflow: hidden; background-image:url(http://farm4.static.flickr.com/3634/3346431062_0f7db7be6b_o.jpg); text-align: justify; -moz-box-shadow:0px 0px 4px #766b4f; -webkit-box-shadow:0px 0px 4px #766b4f; border-radius: 10px; }
.fadecontent{ /*style for each fade content DIV within wrapper. Total width: 330px+10px+10px=350px (".fadecontentwrapper" width minus its padding and borders, if any) */ position: absolute; background-image:url(http://farm4.static.flickr.com/3634/3346431062_0f7db7be6b_o.jpg); visibility: hidden; width: 505px; text-align: justify; overflow: auto}
.fadecontenttoggler{ /*style for DIV used to contain toggler links. Total width: 350px+5px+5px=360px */ width: 450px; border-top-width: 0; font-family:time new roman; font-size:25px; letter-spacing:-2px; font-weight:bold; font-style:italic; text-shadow:0 0 3px black; color:#7C8BC2; text-transform:lowercase; padding-left:25px; }
.fadecontenttoggler a{ /*style for every navigational link within toggler */ text-decoration: none; padding-left:2px; padding-right: 1px; padding-top:4px; float: left; display: block; border:none; color:#C9001A; }
.fadecontenttoggler a:hover{ color:#f5f4e7; }
.fadecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */ }
.fadecontenttoggler a.prev, .fadecontenttoggler a.next{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */ }
.fadecontenttoggler a.prev:hover, .fadecontenttoggler a.next:hover{ color: white; }
.fadecontenttoggler a.selected{ /*style for selected page's toggler link. ".selected" class auto generated! */ }
.staffbig { background-color: white; padding: 5px; -moz-box-shadow:0 0 4px #766b4f; -webkit-box-shadow:0 0 4px #766b4f; border-radius: 10px; width: 400px; height: auto; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
.titre {display:block; font-family:time new roman; letter-spacing:-2px; text-transform:uppercase; font-weight:bold; text-align:right; font-size:24px; color:#C9001A; text-shadow:0 0 1px #000000; border-bottom: #C9001A 2px dotted; }
.soustitre {display:block; font-family:time new roman; text-transform:uppercase; text-align:right; font-size:14px; color:#C9001A; text-shadow:0 0 1px #000000; border-bottom: #C9001A 2px dotted; }
.soustitre1 {display:block; font-family:time new roman; font-variant: lowercase; text-align:right; font-size:14px; color:#C9001A; text-shadow:0 0 1px #000000; border-bottom: #C9001A 2px dotted; }
.text {color:#666455; font-family:Verdana; font-size:10px; text-align:justify;}
.box{ border: 2px solid #F6F6F6; background-image: url(http://i62.servimg.com/u/f62/14/52/86/28/sans_t24.png); text-align: justify; width: 400px; height: 200px; -moz-box-shadow: 0px 0px 4px #000000; margin-left: 10px; overflow: auto}
.box1{ border: 2px solid #F6F6F6; background-image: url(http://i62.servimg.com/u/f62/14/52/86/28/sans_t24.png); text-align: justify; width: 220px; height: 200px; -moz-box-shadow: 0px 0px 4px #000000; margin-left: 10px; overflow: auto}
</style>
<script type="text/javascript" src="http://sd-2.archive-host.com/membres/up/8523569648528239/jquerypack.js"></script>
<script type="text/javascript" src="http://sd-2.archive-host.com/membres/up/8523569648528239/contentfader.js">
/*********************************************** * Fade In Content Viewer script- by JavaScript Kit (www.javascriptkit.com) * This notice must stay intact for usage * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more ***********************************************/
</script> </head>
<BODY><div id="whatsnew" class="fadecontentwrapper"><div class="fadecontent"></br>
<center><img class="staffbig" src="http://25.media.tumblr.com/tumblr_lqlxr17wtt1r1b3tno1_500.jpg"/></br> <font class="text">© ALLES </font>
</br></br> <font class="titre" style="text-align:center;">• .pseudo. •</font> </br><table><tr><td><div class="box"> <font class="soustitre">description de votre personnage</font> <font class="text"> description de votre personnage</font></div></td></tr></table> <font class="text">fiche © ocean lounge</font></center>
</div><div class="fadecontent"></br> <center><img class="staffbig" src="http://27.media.tumblr.com/tumblr_lqp1czmU3c1r2si0ho1_500.jpg"/></br> </br> <font class="titre" style="text-align:center;">• mes liens féminins•</font></br>
<table><tr><td><div class="box1"><center> <img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"><img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"></center> <font class="soustitre1">nom&prénom ; relation</font> <font class="text">description du liens</font></div></td><td> <div class="box1"><center> <img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"><img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"></center> <font class="soustitre1">nom&prénom ; amis proche</font> <font class="text">description du lien</font></div></td></tr></table></br>
<table><tr><td><div class="box1"><center> <img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"><img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"></center> <font class="soustitre1">nom&prénom ; relation</font> <font class="text">description du liens</font></div></td><td> <div class="box1"><center> <img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"><img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"></center> <font class="soustitre1">nom&prénom ; amis proche</font> <font class="text">description du lien</font></div></td></tr></table></br></div>
<div class="fadecontent"> <center></br><img class="staffbig" src="http://27.media.tumblr.com/tumblr_lqp1czmU3c1r2si0ho1_500.jpg"/></br> </br> <font class="titre" style="text-align:center;">• mes liens masculins•</font></br>
<table><tr><td><div class="box1"><center> <img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"><img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"></center> <font class="soustitre1">nom&prénom ; relation</font> <font class="text">description du liens</font></div></td><td> <div class="box1"><center> <img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"><img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"></center> <font class="soustitre1">nom&prénom ; relation</font> <font class="text">description du lien</font></div></td></tr></table></br>
<table><tr><td><div class="box1"><center> <img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"><img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"></center> <font class="soustitre1">nom&prénom ; relation</font> <font class="text">description du liens</font></div></td><td> <div class="box1"><center> <img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"><img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"></center> <font class="soustitre1">nom&prénom ; relation</font> <font class="text">description du lien</font></div></td></tr></table></br></div>
</div><div id="whatnewstoggler" class="fadecontenttoggler"> <a href="#" class="toc">• votre personnage •</a> <a href="#" class="toc"> liens féminins •</a> <a href="#" class="toc">liens masculins •</a> </div>
<script type="text/javascript"> //SYNTAX: fadecontentviewer.init("maincontainer_id", "content_classname", "togglercontainer_id", selectedindex, fadespeed_miliseconds) fadecontentviewer.init("whatsnew", "fadecontent", "whatnewstoggler", 0, 400) </script> </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> |
|
Who run the world ?
✓ ANCIENNETE : : 26/12/2011
✓ LOGICIELS : : To shop :)
| Posté le Sam 13 Oct - 18:55 “ Commentaire de Emie ” | | J'adore !!! merciiii |
|
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 - 19:53 “ Commentaire de Amethyst. ” | | Très beau codage, merci beaucoup |
|
| Posté le “ Commentaire de Contenu sponsorisé ” | | |
|