Création de la page html
Rendez-vous sur votre panneau d'administration > modules > Gestion des pages HTML > Création en mode avancé. Donnez un titre a celle-ci : Pa-sombre, par exemple, et collez-y le code ci-dessous :
- Code:
<!doctype html>
<html>
<head>
<title>PA NALU</title>
<meta charset="UTF-8" />
<style>
/*** GENERAL ***/
#pa {background: #202020; width: 800px; margin: 0 auto; color: #fff; line-height: 1.3;}
#pa a {
color: #f9979d; text-decoration: none;
border-bottom: 1px dotted #f9979d;
-webkit-transition: color .2s linear;
transition: color .2s linear;
}
#pa a:hover {
color: #f79292; text-decoration: none;
border-bottom: 1px solid #f9979d;
}
#credits {
text-align: center;
font-family: sans-serif;
font-size: 12px;
padding: 3px 0;
color: #606060;
}
#credits a {
padding-left: 20px;
background: url("http://img4.hostingpics.net/pics/171045Ship.png") no-repeat left;
background-size: 14px 14px;
color: #aa434d !important;
text-decoration: none !important;
border: 0px !important;
}
#credits a:hover {
color: #f79292 !important;
}
#credits span {color: #aa434d !important;}
/* CREATION DE 3 ONGLETS POUR NAVIGUER ENTRE LES PAGES */
ul#onglets {
width: 650px; height: 30px;
margin: 0px auto;
padding: 30px 0;
list-style-type: none;
text-align: center;
}
ul#onglets li {
display: inline-block;
margin-right: 6px;
width: 210px; height: 30px;
}
ul#onglets li:hover {
height: 32px;
position: relative; top: -2px;
background: #905655;
cursor: pointer;
}
ul#onglets li:last-child, ul#contentnav li:last-child, ul#predefinis li:last-child { margin-right: 0px;} /* = retrait de l'espace à droite. */
/* CREATION DES PANNEAUX CONTENANT LES 3 CONTENUS DIFFERENTS */
ul#contentOnglets {
width: 650px; min-height: 310px;
margin: 0 auto;
list-style-type: none;
padding: 0;
position: relative;
}
ul#contentOnglets li {
/*position: absolute;*/
top: 0; left: 0;
width: 650px;
}
ul#contentnav {
width: 650px; height: 170px;
margin: 0px auto;
padding: 0px;
list-style-type: none;
text-align: center;
}
ul#contentnav li {
padding: 0; margin: 0;
display: inline-block;
position: static;
width: 320px; height: 170px;
margin-right: 6px;
overflow: hidden;
}
/*** PREMIER ONGLET ***/
#contentcontexte, #contentmenu {
width: 320px; height: 170px;
overflow-y: scroll;
overflow-x: none;
position: relative;
font-family: sans-serif;
font-size: 12px;
color: gray;
line-height: 1.3;
letter-spacing: 1px;
text-align: left;
}
#contentcontexte p {
margin-bottom: 36px;
text-indent: 20px;
}
#contentcontexte img {
position: absolute;
left: 0; top: 0; opacity: 1;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#contentmenu img {
position: absolute;
right: 0; top: 0; opacity: 1;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#contentcontexte:hover img {
left: -320px; opacity: 0;
}
#contentmenu:hover img {
right: -320px; opacity: 0;
}
#contentmenu a {
display: block;
width: 100%; max-width: 100%;
height: 28.33px; line-height: 28.33px;
border: 0;
background: rgba(146,86,86,0);
padding-left: 20px;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
#contentmenu a:hover {
display: block;
width: 100%;
height: 28.33px; line-height: 28.33px;
border: 0;
background: rgba(146,86,86,1);
color: #202020;
}
ul#predefinis {
width: 650px; height: 97px;
margin: 24px auto;
padding: 0px;
list-style-type: none;
text-align: center;
}
ul#predefinis li {
padding: 0; margin: 0;
display: inline-block;
position: relative;
width: 72px; height: 97px;
margin-right: 6px;
}
ul#predefinis li .info {display: none;}
ul#predefinis li:hover .info { /* INFOBULLES */
display: block;
position: absolute;
bottom: 105px; left: 0px;
width: 200px; /* IMPORTANT */
background: white;
color: #202020;
font-size: 10px;
font-family: sans-serif;
padding: 10px;
text-align: left;
border-radius: 5px;
}
/* EXCEPTION INFOBULLES 7 & 8 */
ul#predefinis li:nth-child(7):hover .info, ul#predefinis li:nth-child(8):hover .info {
bottom: 105px; right: 0px; left: auto;}
ul#predefinis li:nth-child(7):hover .info .fleche, ul#predefinis li:nth-child(8):hover .info .fleche {
bottom: -8px; right: 30px; left: auto;}
/* FIN EXCEPTION */
.fleche { /* PETIT CURSEUR QUI CIBLE QUEL PERSO ON PARLE */
width: 15px; height: 8px;
background: url("http://i39.servimg.com/u/f39/19/07/10/81/fleche10.png") no-repeat;
position: absolute;
bottom: -8px; left: 30px;
}
ul#predefinis li .info a {
color: #f9979d; text-decoration: none;
border-bottom: 1px dotted #f9979d;
}
ul#predefinis li .info a:hover {
color: #202020; text-decoration: none;
border-bottom: 1px solid #f9979d;
}
ul#predefinis li img {
opacity: .7;
}
ul#predefinis li:hover img {
opacity: 1;
}
/**** DEUXIEME ONGLET ****/
ul#presentStaff {
width: 230px;
list-style-type: none;
padding: 0; margin: 0 auto;
text-align: center;
}
ul#presentStaff li {
position: static;
display: inline-block;
width: 60px; height: 60px;
margin: 6px 3px ;
}
ul#presentStaff li.explic {
position: static;
display: inline-block;
width: 210px; height: 80px;
border: 2px solid #f9979d;
padding: 10px 5px;
vertical-align: middle;
overflow-y: scroll;
color: gray;
font-family: sans-serif;
font-size: 12px;
}
ul#presentStaff li.explic h2 {
display: inline-block;
margin: 0; padding: 0 10px;
color: #f9979d;
font-family: sans-serif;
font-size: 16px; font-weight: normal;
border-bottom: 1px dotted #f9979d;
}
ul#presentStaff li:hover img {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
/**** SLIDESHOW -- DON'T TOUCH ! ***/
.slideshow,
.slide {
width: 365px; max-width: 365px;
height: 115px; max-height: 115px;
}
.slideshow {
margin: 0px 0 0 auto;
overflow: hidden;
background-color: #202020;
border: 4px solid #925656;
font-family: sans-serif;
font-size: 12px;
color: gray; /* ========= >> >> >> Couleur texte dans le slideshow */
}
#slideshowvideo {
margin: 15px 65px 0 auto;
overflow: hidden;
width: 225px; max-width: 225px;
height: 168px; max-height: 168px;
background-color: red;
border: 4px solid #925656;
font-family: sans-serif;
font-size: 12px;
color: gray; /* ========= >> >> >> Couleur texte dans le slideshow */
}
.slideshow div {
position: relative;
top: 0;
right: 0;
}
.slide {
margin: 0;
overflow: auto;
display: inline-block;
vertical-align: middle;
text-align: center;
color: white;
}
.slide p {
margin: 10px;
text-align: justify;
}
.slide h2 { /* ========= >> >> >> Style titre dans le slideshow */
display: inline-block;
margin: 6px 0 0 0; padding: 0 10px;
color: #f9979d;
font-family: sans-serif;
font-size: 16px; font-weight: normal;
border-bottom: 1px dotted #f9979d;
}
#credcss {position: absolute; bottom: -27px; right: 0;}
#credcss, #credcss a { font-size: 9px; color: #404040; text-transform: uppercase; font-family: sans-serif; border: 0 !important;}
/***** FINNNN SLIDESHOOOWWWW ****/
/*** TROISIEME ONGLET ***/
ul#membresofthemonth {
width: 280px; max-width: 280px;
margin: 0; padding: 0;
list-style-type: none;
text-align: center;
position: static;
}
ul#membresofthemonth li {
/*position: static;*/
width: 66px; height: 113px;
overflow: hidden; display: inline-block;
border: 5px solid #925656;
margin-right: 6px; margin-bottom: 6px;
position: relative;
}
ul#membresofthemonth li:nth-child(3), ul#membresofthemonth li:nth-child(4) {
margin-right: 0px;
}
ul#membresofthemonth li span{
position: absolute;
display: block;
width: 100px;
text-align: center;
bottom: 10px; left: -15px;
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
background: #f9979d;
color: #945a5e;
font-family: sans-serif;
text-transform: uppercase;
font-size: 11px;
padding: 3px 0px 2px;
}
ul#membresofthemonth li img {
opacity: .6;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
ul#membresofthemonth li:hover img {
opacity: 1;
-webkit-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg);
}
ul#membresofthemonth li.infosmembresofthemonth {
width: 238px;
margin: 0 auto; padding: 10px 5px;
overflow-y: scroll;
color: gray;
font-family: sans-serif;
font-size: 12px;
}
ul#membresofthemonth li.infosmembresofthemonth h2 {
display: inline-block;
margin: 0; padding: 0 10px;
color: #f9979d;
font-family: sans-serif;
font-size: 16px; font-weight: normal;
border-bottom: 1px dotted #f9979d;
}
ul#membresofthemonth li.infosmembresofthemonth a { border: 0px; color:#aa434d;}
ul#membresofthemonth li.infosmembresofthemonth a:hover { color: #f79292;}
#partenaires { padding-left: 40px;}
#partenaires h1 { margin: 0px auto; padding: 0px; }
ul#sous-partenaires {
display: block;
width: 280px; max-width: 280px;
height: 130px; max-height: 130px;
margin: 0; padding: 0;
list-style-type: none;
text-align: center;
overflow-y: scroll;
}
ul#sous-partenaires li {
position: static;
width: 88px; height: 31px;
overflow: hidden; display: inline-block;
margin-right: 2px; margin-bottom: 2px;
}
.topsites a {
border: 0px !important;
}
ul#sous-partenaires li img, .topsites img{
opacity: .5;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}
ul#sous-partenaires li:hover img, .topsites img:hover {
opacity: 1;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}
</style>
</head>
<body>
<div id="pa">
<ul id="onglets">
<li onClick="javascript:onglet1()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/o110.jpg" alt="titre de ton 1er onglet" /></li>
<li onClick="javascript:onglet2()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/o210.jpg" alt="titre de ton 2eme onglet" /></li>
<li onClick="javascript:onglet3()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/o310.jpg" alt="titre de ton 3eme onglet" /></li>
</ul>
<ul id="contentOnglets">
<li id="part1">
<!-- LE 1ER ONGLET COMMENCE ICI -->
<ul id="contentnav">
<li id="contentcontexte">
<img src="http://i39.servimg.com/u/f39/19/07/10/81/contex10.jpg" alt="Contexte">
<div id="contexte">
<p>Fiore, le plus grand royaume magique connu à ce jour, mais aussi le plus puissant doit faire face à sa plus grande crise. Les guildes clandestines jadis quasi-inoffensives, grandissent et deviennent plus puissantes de jour en jour. Elles sont maintenant bien plus nombreuses que les guildes légales et commencent à contester leur captivité, montrant leur mécontentement par des multiples actes de vandalisme. Les guildes légales, quant à elles, rassemblent leurs forces pour restaurer l'ordre ! Prenant encore ces actes comme des actes sans réelle menace. Mais la vérité est tout autre, les guildes clandestines comptent bien prendre le pouvoir et renverser les guildes légales.</p>
<p>À Magnolia, il y a une guilde dont les mages sont tous plus puissants les uns que les autres et de grande renommée. Celle-ci atteint l'apogée de sa puissance en mettant un terme à une des guildes noires de l'alliance Baram : Oracion Seis. Remplissant sa guilde de nouveaux membres comme Wendy, Lucy, Gajeel, Jubia et Lisanna au fil de leurs aventures, Fairy Tail était définitivement l'une des guildes légales les plus craintes.</p>
<p>Cependant en l'an x784, les mages capables de participer à l'examen pour devenir mage de rang S sont envoyés sur l'île Tenro pour y passer de multiples épreuves. Les équipes sont alors formées tandis qu'elles se séparent pour viser ce fameux titre tant convoité. L'examen se déroule correctement lorsque l'ancienne guilde battue une fois par Fairy Tail fit son apparition sur l'île, Grimoire Hearts, avec à son bord Hadès et une équipe de redoutable mages : Les chevaliers du purgatoire. Les combats fusent dans tous les sens. Malheureusement, Acnologia, l'un des « derniers » dragons encore vivants attaqua les mages sous les ordres de Zeleph, et ils luttèrent pour tenter de le battre, mais sans succès. L'île toute entière accompagnée des mages sombra dans les profondeurs océaniques, sans laisser de traces.</p>
<p>Tout semblait perdu pour les membres les plus puissants de Fairy Tail restés sur la terre féerique, mais un événement réanima cette lumière perdue. La célèbre Mavis Mervillon, ancien maître de la guilde, réussi à les sauver et à les protéger grâce à l'une de ses trois grandes magies : Fairy Sphere.</p>
<p>7 ans après, en l'an X791, Fairy Tail est de retour !</p>
<p>Depuis la disparition des membres les plus forts de Fairy Tail à l'île Tenro, de nouvelles guildes ont fait leur apparition, dont Pandora Heart, une guilde que peu connaissent et dont les buts sont tous aussi inconnus, mais le mage noir Zeleph aurait décidé de rejoindre cette guilde mystérieuse pour d'obscures raisons. De plus, la guilde Grimoire Heart, qui avait été battue par Fairy Tail, refait surface avec des membres de plus en plus diaboliques, menaçant l'équilibre du monde féerique.</p>
<p>Le conseil des mages ayant eu vent des récents évènements, du retour des membres de Fairy Tail et de la croissance ahurissante des guildes noires a accepté la proposition de la recherche d'un sort permettant de relier les deux mondes magiques parallèles, afin de demander l'aide d'Edoras. Cependant, un tel sort était impossible à réaliser, et c'est pourquoi ils virent un espoir fou en l'apparition d'un énorme anima à Earthland. Comme autrefois, cette anima permettait d'accéder à Edoras, mais il n'aspirait personne cette fois-ci. Les edo-fées tombèrent du ciel par ce biais, et c'est ainsi que les mages rencontrèrent leurs doubles. Après quoi, les Edoras firent union avec Fairy Tail, laissant leurs monde derrière eux pour le bien de Fiore. Le monde d'Edoras est cependant accessible par certaines personnes.</p>
<p>La guerre entre les guildes légales et clandestines est imminente, mais vous, dans quel camp serez-vous ?</p>
</div>
</li>
<li id="contentmenu"><img src="http://i39.servimg.com/u/f39/19/07/10/81/naviga10.jpg" alt="Navigation">
<div id="menu">
<a href="">Règlement</a>
<a href="">Contexte</a>
<a href="">Personnages libres</a>
<a href="">Libre service avatar</a>
<a href="">Guide du débutant</a>
<a href="">Liste des magies disponbles</a>
</div>
</li>
</ul>
<ul id="predefinis">
<!-- CHANGEMENT DES POSTES PREDEFINIS -->
<li><img src="http://i39.servimg.com/u/f39/19/07/10/81/pp10.jpg" alt="Perso prédéfinis ?">
<span class="info">Ceci est un petit texte qui accompagne le personnage. Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="">Veritatis</a>, dolores.<br /><br /> Perferendis ipsa possimus vel autem ratione veniam ex nulla expedita nostrum labore doloribus nesciunt mollitia odit reiciendis suscipit tempore esse.
<span class="fleche"><!--fleche invisible--></span></span></li>
<li><img src="http://i39.servimg.com/u/f39/19/07/10/81/pp10.jpg" alt="Perso prédéfinis ?" />
<span class="info">Texte 2 ici
<span class="fleche"><!--fleche invisible--></span></span></li>
<li><img src="http://i39.servimg.com/u/f39/19/07/10/81/pp10.jpg" alt="Perso prédéfinis ?" />
<span class="info">Texte 3 ici
<span class="fleche"><!--fleche invisible--></span></span></li>
<li><img src="http://i39.servimg.com/u/f39/19/07/10/81/pp10.jpg" alt="Perso prédéfinis ?" />
<span class="info">Texte 4 ici
<span class="fleche"><!--fleche invisible--></span></span></li>
<li><img src="http://i39.servimg.com/u/f39/19/07/10/81/pp10.jpg" alt="Perso prédéfinis ?">
<span class="info">Texte 5 ici
<span class="fleche"><!--fleche invisible--></span></span></li>
<li><img src="http://i39.servimg.com/u/f39/19/07/10/81/pp10.jpg" alt="Perso prédéfinis ?" />
<span class="info">Texte 6 ici
<span class="fleche"><!--fleche invisible--></span></span></li>
<li><img src="http://i39.servimg.com/u/f39/19/07/10/81/pp10.jpg" alt="Perso prédéfinis ?" />
<span class="info">Texte 7 ici
<span class="fleche"><!--fleche invisible--></span></span></li>
<li><img src="http://i39.servimg.com/u/f39/19/07/10/81/pp10.jpg" alt="Perso prédéfinis ?" />
<span class="info">Texte 8 ici
<span class="fleche"><!--fleche invisible--></span></span></li>
</ul>
</li> <!-- FIN DU PREMIER ONGLET -->
<li id="part2" style="display: none;">
<!-- LE 2EME ONGLET COMMENCE ICI -->
<table border="0" width="650px">
<tr>
<td width="230px" valign="top">
<ul id="presentStaff">
<!-- CHANGEMENT STAFF 1 -->
<li onMouseOver="javascript:staff1()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff10.png" alt="Staff" /></li>
<li onMouseOver="javascript:staff2()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff10.png" alt="Staff" /></li>
<li onMouseOver="javascript:staff3()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff10.png" alt="Staff" /></li>
<li class="explic">
<!-- CHANGEMENT INFOS STAFF -->
<div id="defaut">
<h2>Les membres du staff</h2>
<p>Laissez-nous vous présenter les membres de notre staff.</p>
</div>
<div id="staff1" style="display: none;">
<h2>Membre 1</h2>
<p>Il est super cool ^^
</p>
</div>
<div id="staff2" style="display: none;">
<h2>Membre 2</h2>
<p>Il est méchantttt !
</p>
</div>
<div id="staff3" style="display: none;">
<h2>Membre 3</h2>
<p>Il est chinakawah.
</p>
</div>
<div id="staff4" style="display: none;">
<h2>Membre 4</h2>
<p>Il est agressif
</p>
</div>
<div id="staff5" style="display: none;">
<h2>Membre 5</h2>
<p>Il est dictateur
</p>
</div>
<div id="staff6" style="display: none;">
<h2>Membre 6</h2>
<p>Il est amusant
</p>
</div>
</li>
<!-- CHANGEMENT STAFF 2 -->
<li onMouseOver="javascript:staff4()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff10.png" alt="Staff" /></li>
<li onMouseOver="javascript:staff5()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff10.png" alt="Staff" /></li>
<li onMouseOver="javascript:staff6()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff10.png" alt="Staff" /></li>
</ul>
</td>
<td valign="top"> <!-- SLIDESHOW + VIDEO -->
<!-- Slideshow infini horizontal -->
<div id="slideshow" class="slideshow">
<div id="slideshow-container">
<!-- CHANGEMENT SLIDE ACTUELS -->
<div class="slide">
<a href="#"><img src="http://i39.servimg.com/u/f39/19/07/10/81/slide110.png" alt="Image Slide"/></a>
</div>
<div class="slide">
<a href="#"><img src="http://i39.servimg.com/u/f39/19/07/10/81/slide210.png" alt="Image Slide"/></a>
</div>
<!-- AJOUT SLIDE AU SLIDESHOW -->
<!--
Vous pouvez ajouter autant de slides que possible avec le template suivant :
<div class="slide">
votre contenu ici
</div>
-->
</div>
</div>
<!-- fin slideshow -->
<!-- bloc video -->
<div id="slideshowvideo" style="text-align: center;">
<iframe width="225px" height="168px" src="http://www.youtube.com/embed/vcMHkvEVgVo" frameborder="0" allowfullscreen></iframe>
</div>
<!-- fin du bloc video -->
<div id="credcss">Slideshow by <a href="http://www.css-actif.com/t13010-slideshow-horizontal-infini">CSSActif</a></div>
</td>
</tr>
</table>
</li> <!-- FIN DU DEUXIEME ONGLET -->
<li id="part3" style="display: none;">
<!-- LE 3EME ONGLET COMMENCE ICI -->
<table width="650px" border="0">
<tr>
<td width="280px">
<ul id="membresofthemonth">
<!-- CHANGEMENT MEILLEUR VOTEUR -->
<li><img src="http://i39.servimg.com/u/f39/19/07/10/81/month11.jpg" alt="MEMBRE DU MOIS" />
<span>voteur</span></li>
<!-- CHANGEMENT MEILLEUR MEMBRE -->
<li><img src="http://i39.servimg.com/u/f39/19/07/10/81/month11.jpg" alt="MEMBRE DU MOIS" />
<span>membre</span></li>
<!-- CHANGEMENT MEILLEUR RPLAYER -->
<li><img src="http://i39.servimg.com/u/f39/19/07/10/81/month11.jpg" alt="MEMBRE DU MOIS" />
<span>rplayer</span></li>
<li class="infosmembresofthemonth">
<div id="voteur">
<!-- CHANGEMENT MEILLEUR RP -->
<a href="#"><img src="http://i39.servimg.com/u/f39/19/07/10/81/meille10.png" alt="Le meilleur RP"></a>
</div>
</li>
</ul>
</td>
<td valign="top" id="partenaires"> <!-- partenaires & topsites -->
<h1><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten10.png" alt="Nos partenaires"></h1>
<ul id="sous-partenaires">
<li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
<li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
<li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
<li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
<li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
<li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
<li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
<li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
<li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
<li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
<li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
<li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
<li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
<li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
<li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
<li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
<li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
<li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
</ul>
<h1 style="margin-top: 30px !important;"><img src="http://i39.servimg.com/u/f39/19/07/10/81/topsit10.png" alt="Nos Topsites"></h1>
<div class="topsites">
<!-- CHANGEMENT TOP SITES -->
<a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/topsit11.png" alt=""></a>
<a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/topsit11.png" alt=""></a>
<a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/topsit11.png" alt=""></a>
<a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/topsit11.png" alt=""></a>
<a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/topsit11.png" alt=""></a>
</div>
</td>
</tr>
</table>
</li>
</ul>
<p id="credits">~ Codée avec <span>♥</span> sur <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a> </p>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function () {
//VARIABLES MODIFIABLES
var delaiSwitch = 5000; // Délai (en ms) d'affichage d'un slide
var delaiTransition = 1000; // Délai (en ms) de l'animation de transition
var direction = 'left'; // Sens (left ou right) du défilement
var idSlideshow = '#slideshow'; // ID du slideshow
var idContainer = '#slideshow-container'; // ID du container
//VARIABLES SYSTEME
var slideshowWidth = parseInt($(idSlideshow).css('width'));
var slideshowHeight = parseInt($(idSlideshow).css('height'));
var nbSlides = $(idContainer+' > .slide').length;
//ADAPTE LA TAILLE DU CONTENEUR AU NOMBRE DE BLOCS QU'IL CONTIENT
$(idContainer).css('width', slideshowWidth*nbSlides+'px');
//REDEFINIT LE CONTENU POUR SUPPRIMER LES EVENTUELS ECARTS DUS AUX BORDERS
if(direction==='right') {
var decalageLeft = -slideshowWidth*(nbSlides-1);
$(idContainer).css('left', decalageLeft+'px');
$(idContainer+' > .slide').each(function() {
var el = $(this).remove();
$(idContainer).prepend(el);
}, this);
} else {
$(idContainer+' > .slide').each(function() {
var el = $(this).remove();
$(idContainer).append(el);
}, this);
}
//ADAPTE LA TAILLE DES IMAGES AUX DIMENSIONS DU SLIDESHOW
$(idSlideshow+' img').css('max-width', slideshowWidth);
$(idSlideshow+' img').css('max-height', slideshowHeight);
//LANCEMENT DE L'ANIMATION
setInterval(function() {
slideshow()
}, delaiSwitch);
//FONCTION DE DEFILEMENT
function slideshow() {
var compteur = 0; // Compte les slides ayant bougé
if(direction==='right') {
$(idContainer+' > .slide').animate({left: '+='+slideshowWidth}, delaiTransition, function() {
compteur++;
// Lorsque le dernier slide à bougé, on crée la boucle
if(compteur===nbSlides) {
var el = $(idContainer+' > .slide:last').remove();
$(idContainer).prepend(el);
$(idContainer+' > .slide').css('left', '0');
compteur = 0;
}
});
} else {
$(idContainer+' > .slide').animate({left: '-='+slideshowWidth}, delaiTransition, function() {
compteur++;
// Lorsque le dernier slide à bougé, on crée la boucle
if(compteur===nbSlides) {
var el = $(idContainer+' > .slide:first').remove();
$(idContainer).append(el);
$(idContainer+' > .slide').css('left', '0');
compteur = 0;
}
});
}
}
});
function onglet1() {
document.getElementById('part1').style.display='block';
document.getElementById('part2').style.display='none';
document.getElementById('part3').style.display='none';}
function onglet2() {
document.getElementById('part1').style.display='none';
document.getElementById('part2').style.display='block';
document.getElementById('part3').style.display='none';}
function onglet3() {
document.getElementById('part1').style.display='none';
document.getElementById('part2').style.display='none';
document.getElementById('part3').style.display='block';}
// FIN ONGLETS
function staff1() {
document.getElementById('defaut').style.display='none';
document.getElementById('staff1').style.display='block';
document.getElementById('staff2').style.display='none';
document.getElementById('staff3').style.display='none';
document.getElementById('staff4').style.display='none';
document.getElementById('staff5').style.display='none';
document.getElementById('staff6').style.display='none';}
function staff2() {
document.getElementById('defaut').style.display='none';
document.getElementById('staff1').style.display='none';
document.getElementById('staff2').style.display='block';
document.getElementById('staff3').style.display='none';
document.getElementById('staff4').style.display='none';
document.getElementById('staff5').style.display='none';
document.getElementById('staff6').style.display='none';}
function staff3() {
document.getElementById('defaut').style.display='none';
document.getElementById('staff1').style.display='none';
document.getElementById('staff2').style.display='none';
document.getElementById('staff3').style.display='block';
document.getElementById('staff4').style.display='none';
document.getElementById('staff5').style.display='none';
document.getElementById('staff6').style.display='none';}
function staff4() {
document.getElementById('defaut').style.display='none';
document.getElementById('staff1').style.display='none';
document.getElementById('staff2').style.display='none';
document.getElementById('staff3').style.display='none';
document.getElementById('staff4').style.display='block';
document.getElementById('staff5').style.display='none';
document.getElementById('staff6').style.display='none';}
function staff5() {
document.getElementById('defaut').style.display='none';
document.getElementById('staff1').style.display='none';
document.getElementById('staff2').style.display='none';
document.getElementById('staff3').style.display='none';
document.getElementById('staff4').style.display='none';
document.getElementById('staff5').style.display='block';
document.getElementById('staff6').style.display='none';}
function staff6() {
document.getElementById('defaut').style.display='none';
document.getElementById('staff1').style.display='none';
document.getElementById('staff2').style.display='none';
document.getElementById('staff3').style.display='none';
document.getElementById('staff4').style.display='none';
document.getElementById('staff5').style.display='none';
document.getElementById('staff6').style.display='block';}
</script>
</body>
</html>
Enregistrez. Ensuite, copiez quelque part l'adresse internet de cette page fraichement créée car nous en aurons besoin dans quelques instants.
Installation de la page d'accueil
Rendez-vous à l'emplacement de votre page d'accueil (PA>Affichage>Page d'accueil>Généralités) et collez-y ce code pour introduire une iframe...
- Code:
<iframe src="HTTP://ADRESSE-DE-LA-PAGE-HTML-RECEMMENT-CREE" frameborder="0" scrolling="no" style="width: 800px; height: 450px;"></iframe>
Et donc, remplacez "HTTP://ADRESSE-DE-LA-PAGE-HTML-RECEMMENT-CREE" par l'adresse de la page html que vous avez créée, dont je vous ai dis de garder l'URL quelque part...
Cette PA fonctionne avec du javascript, il est donc nécessaire de poser cette PA via les pages html, et une iframe ! Aussi : les onglets sont personnalisables via les images.
Merci de conserver les crédits envers Never-UtopiaUne question ? Un souci avec le code ?
