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 à ne pas rater :
Xiaomi Mi Smart Camera 2K Standard Edition (design compact / support ...
11.39 €
Voir le deal

    PA bleue avec un slideshow

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

    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.

    BlondieMood
    BlondieMood
    FémininAge : 27Messages : 18

    Ven 6 Nov 2015 - 17:22

    mercii
    BlackAndBlue
    BlackAndBlue
    MasculinAge : 18Messages : 12

    Sam 28 Nov 2015 - 12:54

    Danke
    Lilie
    Lilie
    FémininAge : 40Messages : 190

    Sam 28 Nov 2015 - 15:08

    Sympa :)
    Anonymous
    Invité

    Jeu 17 Déc 2015 - 17:02

    Trop choupi ! J'adore ~
    Faïryna
    Faïryna
    FémininAge : 21Messages : 87

    Sam 9 Jan 2016 - 15:32

    Merci!
    ♪ Extasy ♪
    ♪ Extasy ♪
    FémininAge : 34Messages : 117

    Lun 11 Jan 2016 - 14:59

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

    Jeu 28 Jan 2016 - 17:43

    Sympa, merci !
    Lessien
    Lessien
    FémininAge : 41Messages : 163

    Ven 12 Fév 2016 - 22:37

    Merci :)
    FREAKS*
    FREAKS*
    FémininAge : 28Messages : 30

    Dim 28 Fév 2016 - 16:13

    Merci beaucoup !
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 55Messages : 167

    Sam 19 Mar 2016 - 13:58

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

    Sam 2 Avr 2016 - 13:59

    Trop chou !
    Merci
    Toshiki
    Toshiki
    FémininAge : 27Messages : 56

    Lun 6 Juin 2016 - 23:30

    merci
    cali60
    cali60
    FémininAge : 38Messages : 58

    Jeu 15 Sep 2016 - 11:15

    :)
    Likau
    Likau
    MasculinAge : 29Messages : 353

    Mar 20 Sep 2016 - 12:35

    Merci, elle est sympa Very Happy
    Exuperance
    Exuperance
    FémininAge : 33Messages : 50

    Lun 21 Nov 2016 - 2:37

    Thanks ♥
    Mimio
    Mimio
    FémininAge : 29Messages : 191

    Mar 9 Mai 2017 - 5:09

    Très beeuuhh, marchi Very Happy!



    PA bleue avec un slideshow - Page 3 134914Signazael2
    Kilda
    Kilda
    FémininAge : 43Messages : 73

    Lun 5 Juin 2017 - 22:37

    Merci Very Happy
    Lilynufare
    Lilynufare
    FémininAge : 33Messages : 341

    Dim 19 Nov 2017 - 16:24

    juste par curiosité, merci :)
    Hasuko77
    Hasuko77
    MasculinAge : 31Messages : 17

    Mar 28 Nov 2017 - 20:18

    merci ! :)
    Dream Land School
    Dream Land School
    FémininAge : 35Messages : 100

    Lun 4 Déc 2017 - 3:13

    Merci :)



    PA bleue avec un slideshow - Page 3 678806984745Sanstitre4
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 19:55