Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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 Clap de Film

    Partagez
    FémininAge : 25Message(s) : 1291

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    3/10  (3/10)
    Guilde des Architectes:
    3/10  (3/10)
    Fyraliel
    le Mer 4 Nov 2015 - 18:34


    Coucou tout le monde ^^

    Je vous propose une jolie PA en forme de clap de film suite à la demande de Nausicäa Kaer.
    Voici un petit Screenshot pour vous montrer à quoi cela ressemble ^^

    Merci de laisser le crédit surtout après avoir fait l'effort de le rendre discret ^^

    Enjoy !


    Pour pouvoir ajouter une PA à votre forum il faudra avant tout que vous soyez au moins admin du forum.

    Le code qui suit est à mettre dans le panneau d'administration > onglet Affichage > colone de gauche Couleurs > onglet Feuille de Style CSS

    Code:

    .PA_totale {
        position: relative;
        height: 587px;
        width: 900px;
        padding-top: 100px;
        background: url(http://nsa37.casimages.com/img/2015/10/07/15100704212978660.png);
    }
    .PA_totale > a{
        position: absolute;
        top: 22px; left: 225px;
        color: #A9916F;
        -webkit-transform: rotate(48deg);
        transform: rotate(48deg);
        font-size: 11px;
    }
    .PA_totale *::-webkit-scrollbar-thumb {
        background: #5E4E39;
    }
    .PA_totale *::-webkit-scrollbar-track {
     background: #CCBDAB;
    }
    .PA_totale *::-webkit-scrollbar {
        width: 7px;
    }
    .cadre_contexte {
        height: 190px;
        width: 815px;
        margin: 35px auto 0;
        position: relative;
        font: 30px 'Kaushan Script';
        color: #CCBDAB;
        text-align: left;
    }
    .texte_contexte {
        position: absolute;
        height: 150px;
        width: 800px;
        top : 45px; left : 0;
        font: 15px 'Droid Serif';
        color: #DDD3C7;
        overflow: auto;
        text-align: justify;
        padding: 5px;
        -webkit-transition: 1s all;
        transition: 1s all;
    }
    #texte1{
        opacity: 1;
    }
    #texte2{
        opacity: 0;
    }
    #texte2:target{
        opacity: 1;
    }
    #texte2:target ~ #texte1{
        opacity: 0;
    }
    .tour_point {
        position: absolute;
        right: -10px;
        top: 50px;
    }
    .point {
        display: block;
        height: 6px;
        width: 6px;
        background: #CCBDAB;
        border-radius: 10px;
        margin-top: 40px;
    }
    .cadre_actu{
        height: 90px;
        width: 815px;
        margin: 20px auto 0;
        font: 30px 'Kaushan Script';
        color: #CCBDAB;
        text-align: left;
    }
    .texte_actu{
        height: 95px;
        width: 800px;
        font: 15px 'Droid Serif';
        margin-top: -5px;
        color: #DDD3C7;
        overflow: auto;
        text-align: justify;
        padding: 5px;
    }
    .cadre_staff{
        height: 65px;
        width: 790px;
        position: relative;
        top: 70px;
        font: 13px 'Droid Serif';
        color: #CCBDAB
    }
    .cadre_staff img{
        height: 60px;
        width: 60px;
        margin: 4px 0 0 10px;
    }
    .cadre_staff span{
        display: inline-block;
        vertical-align: middle;
        height: 60px;
    }
    .top_site{
        height: 90px;
        width: 235px;
        position: relative;
        top: 80px;
        display: inline-block;
    }
    .top_site img{
        height: 31px;
        width: 88px;
        margin: 8px 0 0 20px;
    }
    .musica{
        height: 85px;
        width: 265px;
        position: relative;
        top: 82px; left: 6px;
        display: inline-block;
    }
    .liens_utiles{
        height: 85px;
        width: 285px;
        position: relative;
        top: 82px;
        display: inline-block;
        text-align: center;
        font: 17px 'Droid Serif';
        overflow: auto;
    }
    .liens_utiles a{
        display: block;
    }

    Le code qui suite est à mettre dans le Panneau d'administration > onglet Affichage > colone de gauche Généralité

    Code:
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Serif|Kaushan+Script" />
    <div class="PA_totale">
        <a href="http://www.never-utopia.com/"> (c) Fyraliel </a>    
     <div class="cadre_contexte">
     Contexte  
     <div id="texte2" class="texte_contexte">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam diam arcu, dictum ac dignissim sed, aliquam nec eros. Suspendisse potenti. Praesent ac nisl ac sapien imperdiet aliquam sit amet a mi. Aliquam sodales, nibh sed feugiat semper, mi dui maximus felis, vitae dapibus est dolor non lacus. Vivamus aliquam dui ac tortor ornare euismod. Aliquam sed facilisis est. Morbi id lectus ultrices enim rutrum laoreet. Proin eget lectus scelerisque, sollicitudin justo dapibus, tempus est. Mauris et neque porta, suscipit mi ac, semper tortor. Ut interdum vitae elit laoreet lobortis. Cras dictum mollis eleifend. Sed in elit vel ante semper venenatis sit amet a risus.
     </div>
            
     <div id="texte1" class="texte_contexte">
     Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam licentia crudelitati indulta per suspicionum nebulas aestimati quidam noxii damnabantur. quorum pars necati, alii puniti bonorum multatione actique laribus suis extorres nullo sibi relicto praeter querelas et lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad voluntatem converso cruentam, claudebantur opulentae domus et clarae. Alii nullo quaerente vultus severitate adsimulata patrimonia sua in inmensum extollunt, cultorum ut puta feracium multiplicantes annuos fructus, quae a primo ad ultimum solem se abunde iactitant possidere, ignorantes profecto maiores suos, per quos ita magnitudo Romana porrigitur, non divitiis eluxisse sed per bella saevissima, nec opibus nec victu nec indumentorum vilitate gregariis militibus discrepantes opposita cuncta superasse virtute.
     </div>
            
     <div class="tour_point">
                <a href="#texte1">
     <span class="point">
     </span></a>            <a href="#texte2">
     <span class="point">
     </span></a> 
     </div>
        
     </div>
        
     <div class="cadre_actu">
     Actualité    
     <div class="texte_actu">
     Praesent consectetur nibh quis viverra facilisis. Proin ultricies, dolor mollis molestie accumsan, sapien tellus tincidunt erat, a efficitur nisl justo a metus. Aliquam tempor, est id condimentum commodo, nisl libero feugiat sem, in vehicula felis tortor a risus. Donec egestas lacinia augue vel elementum. Nam accumsan lectus quis arcu fermentum, in blandit risus dignissim. Donec in augue maximus, malesuada tortor ac, convallis orci. Morbi quis vulputate velit, vitae porta lorem. Vestibulum tristique erat eu lectus aliquet, hendrerit tristique sapien lobortis. Pellentesque viverra a quam vel suscipit.
     </div>
     </div>
        
     <div class="cadre_staff">
     <img src="http://ecx.images-amazon.com/images/I/41HvkfoCaRL._AC_SX60_CR,0,0,60,60_.jpg" /> <span>pseudo1</span>    <img src="https://i.vimeocdn.com/portrait/8284582_60x60.jpg" /> <span>pseudo2</span>    <img src="http://fr.web.img5.acsta.net/c_60_60/avatar/FR/1/4/5/Z20111208150552540635541/img/4rclfxgv.ve2.jpg" /> <span>pseudo3</span>    <img src="http://0.gravatar.com/avatar/fa1faaa25e9b175ec5c36991ff82ef1f?s=60&d=identicon&r=G" /> <span>pseudo4</span>        <img src="http://www.eteks.com/coursjava/images/ImageTableau.jpg" /> <span>pseudo5</span>        <img src="http://piglab.fr/site/imgcarre/tafs_0007_batgumfizz.jpg" /> <span>pseudo6</span>    
     </div>
        
     <div class="top_site">
     <a href="http://www.never-utopia.com/"><img src="http://img4.hostingpics.net/pics/213378miniban3.jpg" /></a>    <a href="http://www.never-utopia.com/"><img src="http://img4.hostingpics.net/pics/889072miniban11.gif" /></a>    <a href="http://www.never-utopia.com/"><img src="http://img11.hostingpics.net/pics/852212logo2.gif" /></a>    <a href="http://www.never-utopia.com/"><img src="http://img4.hostingpics.net/pics/120350miniban.jpg" /></a>
     </div>
        
     <div class="musica">
     <iframe style="width: 265px; height: 85px;" ;="" src="//www.youtube.com/embed/8zj-UWmPqzU" allowfullscreen="" frameborder="0">
     </iframe>
     </div>
        
     <div class="liens_utiles">
            <a href="#">Lien 1</a>        <a href="#">Lien 2</a>        <a href="#">Lien 3</a>        <a href="#">Lien 4</a>        <a href="#">Lien 5</a>        <a href="#">Lien 6</a>        <a href="#">Lien 7</a>        <a href="#">Lien 8</a>    
     </div>
    </div>


    Dernière édition par Fyraliel le Ven 4 Mar 2016 - 13:45, édité 2 fois


    Merci Onyx
    FémininAge : 24Message(s) : 1399

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Kelalin
    le Mer 4 Nov 2015 - 18:53
    Merci pour le partage !
    FémininAge : 22Message(s) : 5018

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    10/10  (10/10)
    NyoTheNeko
    le Ven 4 Mar 2016 - 11:38
    Hello Fyra! ^^
    Ton screenshot mène vers le lien de la demande! ^^ Tu pourrais changer ça stp? ^^


    FémininAge : 25Message(s) : 1291

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    3/10  (3/10)
    Guilde des Architectes:
    3/10  (3/10)
    Fyraliel
    le Ven 4 Mar 2016 - 13:55
    Salut ^^

    Normalement c'est réglé, j'ai sûrement voulu poster trop vite >.<


    Merci Onyx
    FémininAge : 22Message(s) : 5018

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    10/10  (10/10)
    NyoTheNeko
    le Ven 4 Mar 2016 - 19:06
    Je viens de voir un deuxième soucis! ^^
    En effet, pour faire le changement de texte, tu as mit des liens autour des points, or ces derniers sont des div.Du coup, tu mets un élément inline (a) autour de l'élément bloc qui est div, et FA n'accepte plus ça. Du coup, les points ne marchent pas! ^^
    Il faudrait changer les div en élément inline (comme des span) et simplement leur mettre un display:block! Wink


    FémininAge : 23Message(s) : 2596

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    1/10  (1/10)
    Guilde des Architectes:
    13/20  (13/20)
    Onyx
    le Dim 2 Oct 2016 - 2:56
    Salut!

    J'ai effectué les modifications qui n'avaient pas été faites. Du coup, je valide.


    Contenu sponsorisé
    Aujourd'hui à 7:03

      La date/heure actuelle est Dim 4 Déc 2016 - 7:03