Suite à une demande je vous poste le LS.
J'vous laisse l'aperçu : www
Le css :
Pour le html, je vous conseille de l'enregistrer dans un ficher sous NotePad et de le modifier dans ce fichier parce qu'étrangement la PA bug sinon.
Et enfin, le javascript pour le slideshow (à insérer dans panneau d'admin > modules > gestion des codes javascript > créer un nouveau javascript > pour le placement, choisissez "Sur l'index") :
J'vous laisse l'aperçu : www
Le css :
- Code:
/*onglet*/
.ongl1, .ongl2, .ongl3, .ongl4, .ongl5
{
display: inline-block;
width: 50px;
height: 50px;
margin-left: 20px;
overflow:hidden;
}
.ongl1:hover, .ongl2:hover, .ongl3:hover, .ongl4:hover, .ongl5:hover
{
opacity: 0.5;
}
.ongl1 a, .ongl2 a, .ongl3 a, .ongl4 a, .ongl5 a,
{
display: block;
}
.ongl1 a:hover, .ongl2 a:hover, .ongl3 a:hover, .ongl4 a:hover, .ongl5 a:hover
{
opacity: 0.5;
}
#content1
{
display: block;
height: 119px;
width: 394px;
overflow: hidden;
font-size: 14px;
color: black;
font-family: 'Indie Flower', cursive;
}
#content2
{
display: none;
}
#content3
{
display:none;
}
#content4
{
display:none;
}
#content5
{
display:none;
}
#accueil1:target #content1
{
display: block;
height: 119px;
width: 394px;
overflow: auto;
font-size: 14px;
color: black;
font-family: 'Indie Flower', cursive;
}
#accueil2:target #content2
{
display: block;
height: 119px;
width: 394px;
overflow: auto;
font-size: 14px;
color: black;
font-family: 'Indie Flower', cursive;
}
#accueil3:target #content3
{
display: block;
height: 119px;
width: 394px;
overflow: auto;
font-size: 14px;
color: black;
font-family: 'Indie Flower', cursive;
}
#accueil4:target #content4
{
display: block;
height: 119px;
width: 394px;
overflow: auto;
font-size: 14px;
color: black;
font-family: 'Indie Flower', cursive;
}
#accueil5:target #content5
{
display: block;
height: 119px;
width: 394px;
overflow: auto;
font-size: 14px;
color: black;
font-family: 'Indie Flower', cursive;
}
.pastaff2
{
float:left;
margin-right: 10px;
}
.pastaff3
{
margin-top:-2px;
text-align:justify;
font-family: 'Indie Flower', cursive;
}
.pastaff1
{
padding:10px;
margin-top:0px;
}
/*fin onglet*/
/*PA*/
.base
{
margin:auto;
width:900px;
height:700px;
background-image:url(), url(), url(), url(), url();
background-position:top left, left center, left bottom, left center, top left;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
padding:10px;
}
.title
{
float:top;
width:834px;
margin:auto;
text-align:center;
font-size:30px;
background-color:#1D698A;
padding:5px;
color:black;
font-family: 'Indie Flower', cursive;
}
.title2
{
display:block;
width:400px;
font-size:18px;
text-align:center;
background-color:#001351;
padding:10px;
color:white;
font-family: 'Indie Flower', cursive;
}
.contexte
{
display:block;
width:400px;
height:230px;
text-align:justify;
overflow:auto;
background-color:#78A0B2;
padding:10px;
font-size:14px;
color:black;
font-family: 'Indie Flower', cursive;
}
.gp_img
{
margin-left:10px;
}
.gp_img2
{
margin-left:10px;
float:right;
}
.gp_txt
{
text-align:center;
height:60px;
color:black;
font-family: 'Indie Flower', cursive;
}
.gp_txt2
{
text-align:left;
height:60px;
color:black;
font-family: 'Indie Flower', cursive;
}
.toppart
{
display:block;
width:400px;
height:37px;
text-align:justify;
overflow:hidden;
background-color:#8CBEF0;
padding:10px;
}
.predef
{
margin:0px;
width:400px;
height:78px;
text-align:left;
overflow:hidden;
padding:10px;
font-family: 'Indie Flower', cursive;
background-color:#8CBEF0;
font-size:14px;
}
.lien
{
margin:0px;
width:400px;
height:139px;
text-align:center;
overflow:auto;
padding:10px;
font-family: 'Indie Flower', cursive;
background-color:#A3B1B7;
font-size:14px;
}
.staff
{
display:block;
width:400px;
height:180px;
text-align:justify;
overflow:hidden;
background-color:#78A0B2;
padding:10px;
}
.rplibre
{
display:block;
background-color:#001351;
color:white;
width: 220px;
padding:5px;
text-align:center;
font-size:18px;
font-family: 'Indie Flower', cursive;
}
.lienlibre
{
display:inline-block;
width:210px;
padding:10px;
height:65px;
text-align:justify;
overflow:auto;
background-color:#8CBEF0;
font-size:14px;
color:black;
font-family: 'Indie Flower', cursive;
}
.annonce
{
position: relative;
top: -70px;
margin-left:240px;
display:inline-block;
width:130px;
height:20px;
padding:10px;
text-align:justify;
background-color:#78A0B2;
font-size:14px;
color:black;
font-family: 'Indie Flower', cursive;
}
.info_news
{
display:block;
width:400px;
height:230px;
text-align:justify;
overflow:hidden;
background-color:#A3B1B7;
padding:10px;
font-family: 'Indie Flower', cursive;
}
/*fin PA*/
/*slideshow*/
.slideshow,
.slide {
width: 300px;
height: 100px;
}
.slideshow {
margin: 0;
overflow: hidden;
background-color: white;
border: 0px;
}
.slideshow div {
position: relative;
top: 0;
left: 0;
}
.slide {
margin: 0;
overflow: auto;
display: inline-block;
text-align: center;
color: blue;
}
.slide p {
margin: 10px;
text-align: justify;
}
Pour le html, je vous conseille de l'enregistrer dans un ficher sous NotePad et de le modifier dans ce fichier parce qu'étrangement la PA bug sinon.
- Code:
<br /><link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'><div class="base">
<table><tbody><div class="title">Bienvenue sur 'Nom du forum'</div>
<tr><td><div style="clear:both;"></div><span class="title2">Contexte</span>
<span class="contexte">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla sem, ullamcorper pretium ipsum vitae, pellentesque molestie justo. Pellentesque sed odio tristique, hendrerit mi in, rutrum diam. Etiam augue felis, porttitor ut fringilla id, ullamcorper sit amet magna. Aenean ornare mollis metus ornare accumsan. Maecenas scelerisque non sapien vitae mattis. Praesent auctor rhoncus ante, ac malesuada odio venenatis ac. Aenean quis magna lectus. Nullam scelerisque mollis dolor. Proin et nisl eu leo egestas aliquet ut in mi. Suspendisse in eros consequat, tincidunt mauris sit amet, adipiscing elit. Etiam ornare blandit convallis. Integer in ante sit amet ipsum facilisis commodo. Etiam dui felis, placerat a elementum vel, varius vitae erat. Quisque vitae interdum tellus, et scelerisque libero.
Donec mollis neque sed tincidunt viverra. Nullam porta sem faucibus nisl ultrices, at rutrum quam mollis. Praesent nec lacus vulputate, interdum justo eu, fringilla massa. Proin velit dui, malesuada ac laoreet at, rhoncus tristique velit. Pellentesque malesuada convallis dui volutpat elementum. Nunc eleifend iaculis felis. In quis nisi ultrices, pulvinar enim vel, posuere eros. Nam adipiscing in ante non egestas. Nunc faucibus egestas magna, ut pulvinar lorem aliquam vel. Etiam eu neque purus.
Ut eu varius ante, in blandit ante. Morbi luctus commodo pharetra. Quisque ornare placerat metus iaculis ullamcorper. Mauris vulputate magna vulputate nisl condimentum tincidunt. Nulla ornare accumsan metus, sed fringilla orci commodo eget. Fusce a consequat sapien. Mauris ante ipsum, volutpat ac nisi quis, imperdiet bibendum justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sit amet lacus massa. Aliquam nec lorem turpis.
Ut bibendum tellus malesuada dictum sollicitudin. Nulla pharetra libero at felis feugiat, non posuere arcu volutpat. Aliquam ac dapibus nibh. Maecenas luctus bibendum sem sit amet gravida. Aliquam eget ligula vulputate lorem pretium dignissim ut et odio. Donec id ullamcorper nisl. Nam lorem enim, luctus dapibus posuere eu, rhoncus a purus. Praesent gravida, erat ut aliquam mollis, erat turpis vehicula lorem, ut porttitor lacus libero vitae metus.</span>
</td>
<td><span class="title2">Info's & news</span>
<span class="info_news">
<center><div class="slideshow" id="slideshow"><div id="slideshow-container"><div class="slide"><img alt="" src="http://img4.hostingpics.net/pics/927480bleuvert.png" /></div><div class="slide"><img alt="" src="http://img4.hostingpics.net/pics/929610vert02.png" /></div>
<!--
Tu peux ajouter autant de slides que tu le souhaites avec la balise suivante :
<div class="slide">
--- le contenu/image ici ---
</div>
-->
</div></div></center><br />
<span class="rplibre">Rp's libres</span>
<span class="lienlibre">
• <a href="LIEN VERS LE RP">Lien 1</a><br/>
• <a href="LIEN VERS LE RP">Lien 2</a><br/></span><a href="http://www.never-utopia.com/" style="font-size:10px; position: relative; top:-10px; left:15px;">© A-Lice sur Never-Utopia</a><br/><span class="annonce"><a href="LIEN VERS L'ANNONCE">Annonce</a> - <a href="LIEN VERS LES NEWS">News</a></span></span></td></tr>
<tr><td><div style="clear:both;"></div><span class="title2">predef'</span>
<div class="predef">
<div class="gp_img"><a href="LIEN"><img src="http://img15.hostingpics.net/pics/622887rose.png" alt="" /></a> <a href="LIEN"><img src="http://img15.hostingpics.net/pics/622887rose.png" alt="" /></a> <a href="LIEN"><img src="http://img15.hostingpics.net/pics/622887rose.png" alt="" /></a> <a href="LIEN"><img src="http://img15.hostingpics.net/pics/622887rose.png" alt="" /></a> <a href="LIEN"><img src="http://img15.hostingpics.net/pics/622887rose.png" alt="" /></a> <a href="LIEN"><img src="http://img15.hostingpics.net/pics/622887rose.png" alt="" /></a></div><div class="gp_txt"><a href="LIEN">Les autres ?</a></div>
</div></span>
<span class="title2">Lien</span>
<div class="lien">
<div class="gp_img2"><a href="LIEN"><img src="http://img15.hostingpics.net/pics/622887rose.png" alt="" /></a> <a href="LIEN"><img src="http://img15.hostingpics.net/pics/622887rose.png" alt="" /></a> <a href="LIEN"><img src="http://img15.hostingpics.net/pics/622887rose.png" alt="" /></a><br/><a href="LIEN"><img src="http://img15.hostingpics.net/pics/622887rose.png" alt="" /></a> <a href="LIEN"><img src="http://img15.hostingpics.net/pics/622887rose.png" alt="" /></a> <a href="LIEN"><img src="http://img15.hostingpics.net/pics/622887rose.png" alt="" /></a></div>
<div class="gp_txt2"><a href="LIEN">• Lien 1</a><br /><a href="LIEN">• Lien 2</a></div>
</div></td>
<td><span class="title2">staff</span>
<span class="staff"><div id="accueil1"><div id="accueil2"><div id="accueil3"><div id="accueil4"><div id="accueil5"><br />
<span class="ongl1"><a href="#accueil1"><img alt="" src="http://img15.hostingpics.net/pics/622887rose.png" /></a></span><span class="ongl2"><a href="#accueil2"><img alt="" src="http://img15.hostingpics.net/pics/622887rose.png" /></a></span><span class="ongl3"><a href="#accueil3"><img alt="" src="http://img15.hostingpics.net/pics/622887rose.png" /></a></span><span class="ongl4"><a href="#accueil4"><img alt="" src="http://img15.hostingpics.net/pics/622887rose.png" /></a></span><span class="ongl5"><a href="#accueil5"><img alt="" src="http://img15.hostingpics.net/pics/622887rose.png" /></a></span>
<div id="content1"><div id="content2"><div class="pastaff1"><div class="pastaff2"><img src="http://img4.hostingpics.net/pics/207836jaune.png" /></div><div class="pastaff3">Ici se trouve le contenu de votre second onglet.</div></div></div><div id="content3"><div class="pastaff1"><div class="pastaff2"><img src="http://img4.hostingpics.net/pics/207836jaune.png" /></div><div class="pastaff3">Ici se trouve le contenu de votre troisième onglet.</div></div></div><div id="content4"><div class="pastaff1"><div class="pastaff2"><img src="http://img4.hostingpics.net/pics/207836jaune.png" /></div><div class="pastaff3">Ici se trouve le contenu de votre quatrième onglet.</div></div></div><div id="content5"><div class="pastaff1"><div class="pastaff2"><img src="http://img4.hostingpics.net/pics/207836jaune.png" /></div><div class="pastaff3">Ici se trouve le contenu de votre 5° onglet.</div></div></div><div class="pastaff1"><div class="pastaff2"><img src="http://img4.hostingpics.net/pics/207836jaune.png" /></div><div class="pastaff3">Placez ici le contenu de votre premier onglet. Il peut s'agit de texte, liens images, mais aussi tableaux ou autres. Attention, cette zone seulement permet de placer des infos dans l'onglet 1, il vous faut laisser ces infos à cet endroit précis, et non avant les "div" des onglets précédents afin qu'ils ne décalent pas vos autres onglets par la suite. </div></div></div>
</div></div></div></div></div></span>
<span class="title2">top partenaires</span>
<span class="toppart">
<marquee scrollamount="4" onMouseOver="this.stop();" onMouseOut="this.start();"><a href="LIEN"><img src="http://img15.hostingpics.net/pics/255056rouge.png" alt="" /></a> <a href="LIEN"><img src="http://img15.hostingpics.net/pics/255056rouge.png" alt="" /></a> <a href="LIEN"><img src="http://img15.hostingpics.net/pics/255056rouge.png" alt="" /></a> <a href="LIEN"><img src="http://img15.hostingpics.net/pics/255056rouge.png" alt="" /></a> <a href="LIEN"><img src="http://img15.hostingpics.net/pics/255056rouge.png" alt="" /></a> <a href="LIEN"><img src="http://img15.hostingpics.net/pics/255056rouge.png" alt="" /></a></marquee></span></td></tr></tbody></table>
<img src="http://img15.hostingpics.net/pics/976543Lucy.png" alt="" style="position: relative; left:-200px; top:-740px;" />
<img src="http://img15.hostingpics.net/pics/320125grey.png" alt="" style="position: relative; left:500px; top:-150px;" />
<img src="http://img15.hostingpics.net/pics/711335Erza.png" alt="" style="position: relative; left:400px; top:-740px;" />
<img src="http://img11.hostingpics.net/pics/750653render16.png" alt="" style="position: relative; left:-520px; top:-440px;" />
<img src="http://img15.hostingpics.net/pics/689404Natsu.png" alt="" style="position: relative; left:-220px; top:-385px;" />
</div><br />
Et enfin, le javascript pour le slideshow (à insérer dans panneau d'admin > modules > gestion des codes javascript > créer un nouveau javascript > pour le placement, choisissez "Sur l'index") :
- Code:
$(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;
}
});
}
}
});
Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Vos commentaires et remerciements sont toujours bienvenus ^^
Si vous avez des problèmes avec ce LS, venez poster ici.
