AccueilFAQRechercherMembresGroupesS'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.


    PA bleue avec un slideshow

    Partagez
    avatar
    A-Lice
    FémininAge : 24Messages : 4939

    le Sam 24 Mai 2014 - 23:06

    Rappel du premier message :

    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.

    avatar
    Nono-Chan
    FémininAge : 20Messages : 273

    le Mar 2 Déc 2014 - 17:44

    Merci :3
    avatar
    Natsu892
    MasculinAge : 17Messages : 63

    le Jeu 4 Déc 2014 - 10:01

    merci



    avatar
    Dydy
    FémininAge : 27Messages : 490

    le Mer 10 Déc 2014 - 15:04

    merci du partage ^^



    avatar
    Solitude
    FémininAge : 43Messages : 286

    le Sam 13 Déc 2014 - 16:15

    Merci



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    avatar
    MLD
    FémininAge : 25Messages : 87

    le Sam 20 Déc 2014 - 18:25

    merci *-*
    avatar
    Noruenu
    FémininAge : 25Messages : 123

    le Lun 22 Déc 2014 - 0:19

    merci ! :3
    avatar
    maxime123
    MasculinAge : 21Messages : 8

    le Mar 23 Déc 2014 - 1:40

    Merci beaucoup et j'adore la PA elle est simple et tout mimi *-*
    avatar
    Kowei
    FémininAge : 20Messages : 23

    le Mar 23 Déc 2014 - 12:57

    Merci beaucoup !
    avatar
    Eleania Madena
    FémininAge : 21Messages : 88

    le Dim 4 Jan 2015 - 5:30

    Merci ♡




    avatar
    Pastiche
    FémininAge : 23Messages : 78

    le Dim 4 Jan 2015 - 21:32

    Oh, c'est très joli ! ♥
    avatar
    hirondelle
    FémininAge : 28Messages : 134

    le Lun 5 Jan 2015 - 19:06

    Merci ♥
    avatar
    Slown
    FémininAge : 23Messages : 62

    le Mar 24 Fév 2015 - 11:38

    merci :)
    avatar
    Allison01
    FémininAge : 33Messages : 197

    le Sam 28 Fév 2015 - 17:25

    merci ^^
    avatar
    Moona Neko
    FémininAge : 23Messages : 73

    le Sam 28 Fév 2015 - 21:22

    Merci o/
    avatar
    Haniwa
    FémininAge : 23Messages : 206

    le Jeu 19 Mar 2015 - 15:04

    Merci
    avatar
    Lakia
    FémininAge : 19Messages : 104

    le Mer 25 Mar 2015 - 14:21

    merciii
    avatar
    Yogi Nakagawa
    MasculinAge : 17Messages : 92

    le Dim 5 Avr 2015 - 11:24

    Merciiii
    avatar
    pika-cerise
    FémininAge : 26Messages : 92

    le Dim 19 Avr 2015 - 19:14

    merci
    avatar
    Florian Takiya
    MasculinAge : 23Messages : 65

    le Sam 13 Juin 2015 - 4:04

    Merci beaucoup ♫
    avatar
    castamere rains
    FémininAge : 22Messages : 16

    le Dim 28 Juin 2015 - 13:21

    merci!
    avatar
    Lamire
    FémininAge : 24Messages : 94

    le Ven 14 Aoû 2015 - 21:36

    Merci beaucoup~
    avatar
    Kelalin
    FémininAge : 25Messages : 1888

    le Dim 16 Aoû 2015 - 22:55

    Merci beaucoup du partage ! (*^▽^*)
    avatar
    Flaura
    FémininAge : 15Messages : 152

    le Lun 17 Aoû 2015 - 21:10

    Merci !
    avatar
    Grande
    FémininAge : 30Messages : 207

    le Lun 24 Aoû 2015 - 11:54

    Merci =D



    avatar
    Zoé
    FémininAge : 19Messages : 185

    le Mer 14 Oct 2015 - 21:02

    merci o/



    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Juin 2018 - 7:15