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 - 21: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
    BlondieMood
    FémininAge : 21Messages : 18

    le Ven 6 Nov 2015 - 16:22

    mercii
    avatar
    BlackAndBlue
    MasculinAge : 12Messages : 12

    le Sam 28 Nov 2015 - 11:54

    Danke
    avatar
    Lilie
    FémininAge : 34Messages : 162

    le Sam 28 Nov 2015 - 14:08

    Sympa :)
    avatar
    Invité

    le Jeu 17 Déc 2015 - 16:02

    Trop choupi ! J'adore ~
    avatar
    Faïryna
    FémininAge : 15Messages : 63

    le Sam 9 Jan 2016 - 14:32

    Merci!
    avatar
    ♪ Extasy ♪
    FémininAge : 28Messages : 105

    le Lun 11 Jan 2016 - 13:59

    Merci pour le partage :)
    avatar
    MeowLowDee
    FémininAge : 26Messages : 72

    le Jeu 28 Jan 2016 - 16:43

    Sympa, merci !
    avatar
    Lessien
    FémininAge : 36Messages : 163

    le Ven 12 Fév 2016 - 21:37

    Merci :)
    avatar
    FREAKS*
    FémininAge : 23Messages : 30

    le Dim 28 Fév 2016 - 15:13

    Merci beaucoup !
    avatar
    Coco-Lapin02
    MasculinAge : 49Messages : 167

    le Sam 19 Mar 2016 - 12:58

    Merci du partage
    avatar
    Margaux E.
    FémininAge : 15Messages : 25

    le Sam 2 Avr 2016 - 11:59

    Trop chou !
    Merci
    avatar
    Toshiki
    FémininAge : 22Messages : 54

    le Lun 6 Juin 2016 - 21:30

    merci
    avatar
    cali60
    FémininAge : 32Messages : 58

    le Jeu 15 Sep 2016 - 9:15

    :)
    avatar
    Likau
    MasculinAge : 24Messages : 326

    le Mar 20 Sep 2016 - 10:35

    Merci, elle est sympa Very Happy
    avatar
    Exuperance
    FémininAge : 27Messages : 45

    le Lun 21 Nov 2016 - 1:37

    Thanks ♥
    avatar
    Mimio
    FémininAge : 23Messages : 178

    le Mar 9 Mai 2017 - 3:09

    Très beeuuhh, marchi Very Happy!



    avatar
    Kilda
    FémininAge : 37Messages : 73

    le Lun 5 Juin 2017 - 20:37

    Merci Very Happy
    avatar
    Lilynufare
    FémininAge : 27Messages : 341

    le Dim 19 Nov 2017 - 15:24

    juste par curiosité, merci :)
    avatar
    Hasuko77
    MasculinAge : 25Messages : 13

    le Mar 28 Nov 2017 - 19:18

    merci ! :)
    avatar
    Dream Land School
    FémininAge : 29Messages : 53

    le Lun 4 Déc 2017 - 2:13

    Merci :)



    Contenu sponsorisé


      La date/heure actuelle est Lun 18 Juin 2018 - 23:00