AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment :
Tablette 11″ Xiaomi- Mi Pad 6 global version ...
Voir le deal
224.97 €

    PA bleue avec un slideshow

    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Sam 24 Mai 2014 - 23:06

    Suite à une demande je vous poste le LS.

    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.

    Neva
    Neva
    FémininAge : 32Messages : 18565

    Jeu 12 Juin 2014 - 10:53

    Merci Alice !
    Je me suis juste permis d'éditer pour préciser où on met le JS sur FA (les gens ne savent pas toujours) mais c'est tout ! Je mets dans la partie LS



     
    mini-mimi
    mini-mimi
    FémininAge : 27Messages : 75

    Sam 28 Juin 2014 - 9:13

    par curiosité :)
    Yuko1
    Yuko1
    FémininAge : 25Messages : 26

    Sam 28 Juin 2014 - 18:12

    Magnifique PA merci :)
    Susan Storm
    Susan Storm
    FémininAge : 44Messages : 78

    Jeu 3 Juil 2014 - 21:05

    Mercii ! Very Happy
    avatar
    Njut
    FémininAge : 23Messages : 43

    Ven 4 Juil 2014 - 14:37

    Superbe, merci ! :)
    nuanciel
    nuanciel
    FémininAge : 32Messages : 139

    Ven 4 Juil 2014 - 23:12

    Merci !
    Nord
    Nord
    MasculinAge : 24Messages : 169

    Sam 19 Juil 2014 - 17:03

    C'est mignon comme codage !
    Drysfer
    Drysfer
    MasculinAge : 34Messages : 71

    Ven 1 Aoû 2014 - 15:28

    Merci.



    PA bleue avec un slideshow Gc001
    Glow
    Glow
    FémininAge : 24Messages : 94

    Dim 7 Sep 2014 - 14:59

    Merci bien c:
    Fleurine
    Fleurine
    FémininAge : 24Messages : 75

    Jeu 11 Sep 2014 - 11:11

    Merci !!
    Damned
    Damned
    FémininAge : 22Messages : 109

    Sam 13 Sep 2014 - 16:46

    Merci
    Kau
    Kau
    FémininAge : 22Messages : 148

    Dim 14 Sep 2014 - 4:00

    Merci !
    tamanegeek
    tamanegeek
    MasculinAge : 24Messages : 167

    Sam 20 Sep 2014 - 17:55

    Merci '-'
    avatar
    Ziara
    FémininAge : 22Messages : 48

    Sam 11 Oct 2014 - 11:19

    Super c'est trop beauu !
    Arpège
    Arpège
    FémininAge : 25Messages : 112

    Sam 11 Oct 2014 - 17:44

    Trop classe *-*
    Merci du partage ~



    PA bleue avec un slideshow 170221084427548922
    Writers World commence à ouvrir !
    Merwyn Arehdel
    Merwyn Arehdel
    FémininAge : 24Messages : 304

    Dim 12 Oct 2014 - 15:31

    Merci Wink



    Just want to be yours.
    Mangédéfruiélégumeuh
    Mangédéfruiélégumeuh
    MasculinAge : 27Messages : 83

    Mar 14 Oct 2014 - 23:07

    Merci beaucoup ~
    Melik
    Melik
    MasculinAge : 31Messages : 74

    Ven 31 Oct 2014 - 10:51

    Super PA merci!
    Astramael
    Astramael
    MasculinAge : 30Messages : 8

    Ven 7 Nov 2014 - 20:16

    Merci pour ce petit bijou !
    Fayzl4D
    Fayzl4D
    MasculinAge : 27Messages : 84

    Dim 9 Nov 2014 - 22:51

    merci
    Sinon
    Sinon
    FémininAge : 25Messages : 68

    Mer 12 Nov 2014 - 17:25

    Merci !
    Kikton
    Kikton
    MasculinAge : 27Messages : 29

    Jeu 13 Nov 2014 - 16:11

    Magnifique !
    1charlotte
    1charlotte
    FémininAge : 22Messages : 196

    Ven 14 Nov 2014 - 17:14

    Merci énormément :)
    Chevalier Oignon
    Chevalier Oignon
    MasculinAge : 34Messages : 60

    Sam 15 Nov 2014 - 19:59

    Merci du partage :)
    Contenu sponsorisé


      La date/heure actuelle est Sam 20 Avr 2024 - 15:03