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.

-50%
Le deal à ne pas rater :
-50% Baskets Nike Air Huarache
64.99 € 129.99 €
Voir le deal

    [Awful] [PA] Personnalisable et effet slide

    P'tit loup
    P'tit loup
    MasculinAge : 41Messages : 451

    Mar 31 Jan 2017 - 18:42

    Ma demande



    Bien le bonjour, bonsoir à toutes et tous,
    Comme de coutume, je suis une vrai buse en codage, du moins pour ce qui est de la création. Hors, il s'avère que j'aurais besoin d'une nouvelle PA, celle que j'ai ne correspond plus vraiment au besoin du forum, aussi, encore une fois, je me tourne vers les spécialistes que vous êtes en croisant les doigts pour que vous puissiez m'aider. D'avance merci d'avoir pris le temps de me lire et peut-être de votre aide...

    Schéma(s) et Eléments
    Schémas : https://i.imgur.com/Oocme0P.png
    Tailles des éléments : Taille totale de la PA : 790px ; Images du staff : 100px*100px ; Images top-sites : 50px*50px ; Images partenaires : 50px*50px ; Images prédefs : 80px*120px
    Effets voulus : PA coins arrondis ; Contexte : coins supérieur gauche et inférieur droit arrondis ; Staff : coins arrondis + effet slide au passage de la souris avec fond noir en transparence affichant le texte (pseudo + rang + MP) ; Prédefs : effet slide idem staff + texte (nom + groupe + lien vers fiche) ; Partenaires : Défilement vers la gauche avec arrêt au survol de la souris
    Version de votre forum : PHPBB2

    Ressources
    Fond titre PA : https://i.imgur.com/y17t5E2.png
    Titre PA : Ombre 1px 1px 2px (#1A1A1A)
    fond PA : https://i.imgur.com/g2sdFZ8.png
    Fond contexte + bloc prédefs : Dégradé blanc vers bleu (#64A3B4)
    Bordure Contexte + Staff + bloc Prédef : 2px (#2F4B56)
    Bordures individuelles prédefs : 1px (#2F4B56)
    Bloc Top-sites et Partenaires : Fond transparent, sans bordure

    Autres précisions ?
    Je pense que tout y est mais bien sûr s'il y a des questions, je reste disponible. Quoi qu'il en soit, un grand merci à celui ou celle qui voudra bien m'aider. Je vous souhaite une bonne journée, soirée, nuit.


    Dernière édition par P'tit loup le Mer 15 Fév 2017 - 16:40, édité 1 fois



    [Awful] [PA] Personnalisable et effet slide 30xivrd
    • Revenir en haut
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Sam 4 Fév 2017 - 9:10

    Hello !
    Ton schéma n'est pas à l'échelle donc je n'ai pas pu tout faire rentrer en respectant la taille donnée de tes éléments. Je te laisse voir ce que ça donne :
    http://test-awful.forumactif.com/h1-pa-p-tit-loup
    • Revenir en haut
    P'tit loup
    P'tit loup
    MasculinAge : 41Messages : 451

    Sam 4 Fév 2017 - 10:13

    Hello et merci beaucoup pour ton aide ^^

    Dans l'ensemble, elle est parfaite, mais en fait, j'aimerais mettre un peu plus de prédéfinis en avant étant donné qu'on en a beaucoup sur le forum... Donc, pourrais-tu réduire la taille des images et des espaces entre chaque ? Hm... un 60*120px pour la taille je pense que ce serait parfait. Les images peuvent même être collées, le but étant d'en mettre le plus possible... Quitte à réduire un peu les images de staff à 80*80px pour gagner un peu de place...

    Je viens de relire ma demande et je me rends compte que je me suis plantée dans la dimension des images staff et prédefs, en fait, désolé ^^"



    [Awful] [PA] Personnalisable et effet slide 30xivrd
    • Revenir en haut
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Sam 4 Fév 2017 - 12:47

    En réduisant un peu les tailles, tu peux ajouter deux prédefs :
    http://test-awful.forumactif.com/h1-pa-p-tit-loup (par contre, retirer les espaces est inutile, ça ne fera pas en rentrer plus)
    • Revenir en haut
    P'tit loup
    P'tit loup
    MasculinAge : 41Messages : 451

    Lun 6 Fév 2017 - 10:01

    ok, c'est toujours ça de pris et c'est toujours mieux que 4 ^^. Merci pour ton aide :culte:

    Juste par curiosité, histoire de gagner en quantité pour les prédefs, est-ce qu'il serait possible d'échanger les prédefs avec les partenaires ? Toujours avec les même dimensions, inversées, naturellement... Et pour les partenaires, ce serait toujours du 50*50... C'est juste pour savoir... Quitte à ne mettre alors que des images liens pour les prédefs, il me semblerait difficile de garder le slide dans le défilement...

    Désolé de t'ennuyer avec ces changements, c'est juste qu'on réfléchi en même temps, ma co-fonda et moi en regardant le résultat ^^"



    [Awful] [PA] Personnalisable et effet slide 30xivrd
    • Revenir en haut
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Lun 6 Fév 2017 - 17:20

    Comme ça :
    http://test-awful.forumactif.com/h2-pa-2
    ?
    • Revenir en haut
    P'tit loup
    P'tit loup
    MasculinAge : 41Messages : 451

    Lun 6 Fév 2017 - 22:27

    finalement, ça donne pas mal en fait, j'avais pensé à ce que les prédefs se retrouvent avec les dimensions inversées (60px de haut et 120px de large) avec le défilement qui s'arrête au passage de la souris mais au final, c'est très bien comme ça ^^ Peut-être juste ajouter une ligne pour les partenaires et allonger un peu le cadre contexte pour combler les trous sinon, c'est parfait ^^



    [Awful] [PA] Personnalisable et effet slide 30xivrd
    • Revenir en haut
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Ven 10 Fév 2017 - 9:54

    Désolé pour le temps de réponse, j'ai eu une panne d'internet cette semaine.
    Est-ce que ça te convient, comme ça :
    http://test-awful.forumactif.com/h2-pa-2
    • Revenir en haut
    P'tit loup
    P'tit loup
    MasculinAge : 41Messages : 451

    Ven 10 Fév 2017 - 13:41

    Pas de soucis, t'en fait pas ^^

    La PA est Nickel Chrome ! C'est parfait, un grand merci pour ton aide, je n'aurais pas pu y arriver même avec toute la patience du monde.



    [Awful] [PA] Personnalisable et effet slide 30xivrd
    • Revenir en haut
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Mar 14 Fév 2017 - 21:14

    Bonsoiiiir ! Désolé, j'ai complètement oublié de repasser te redonner le code ! D:
    Le voilà :
    Code:
    <head>
        <meta charset="utf-8">
        <style>
    body {margin: 0;}
          /*bloc PA*/
            #pa {
                width: 790px;
                height: 500px;
                background-image: url("http://i.imgur.com/g2sdFZ8.png");
                border-radius: 10px;
                position: relative;
                margin: auto;
            }
            #pa a {
                text-decoration: none;
            }
          /*titre PA*/
            #pa h1 {
                text-align: center;
                background-image: url("http://i.imgur.com/y17t5E2.png");
                border-radius: 10px 10px 0 0;
                text-shadow: 1px 1px 2px #1A1A1A;
                font-size: 30px;
                padding: 8px 0;
    margin: 0;}
            }
          /*titres des blocs*/
            #pa h2 {
                text-align: center;
                font-size: 20px;
                border-bottom: 2px solid #000;
                color: #fff;
            }
          /*bloc contexte*/
            #pa-contexte {
                width: 200px;
                position: absolute;
                left: 20px;
                top: 50px;
            }
            #pa-contexte div {
                width: 100%;
                height: 350px;
                background: #fff;
                background: linear-gradient(to bottom, #fff 0%, #64A3B4 100%);
                border-radius: 10px 0 10px 0;
                border: 2px solid #2F4B56;
                box-sizing: border-box;
                padding: 8px;
                overflow: auto;
                text-align: justify;
            }
          /*bloc staff*/
            #pa-staff {
                width: 270px;
                position: absolute;
                left: 240px;
                top: 50px;
                text-align: center;
                z-index: 2;
            }
            #pa-staff .pa-staff-block {
                display: inline-block;
                position: relative;
                height: 80px;
                width: 80px;
                border: 2px solid #2F4B56;
                border-radius: 10px;
                overflow: hidden;
            }
            #pa-staff .pa-staff-content {
                position: absolute;
                height: 100%;
                width: 100%;
                background: rgba(0, 0, 0, 0.8);
                top: 0;
                color: #fff;
                font-size: 11px;
                box-sizing: border-box;
                padding-top: 30px;
                border-radius: 10px;
                transform: translate(0, 100%);
                transition: all 0.3s;
            }
            #pa-staff .pa-staff-block:hover .pa-staff-content {
                transform: translate(0, 0);
            }
          /*bloc top site*/
            #pa-top {
                width: 270px;
                position: absolute;
                left: 240px;
                top: 180px;
                text-align: center;
            }
          /*bloc prédéfinis*/
            #pa-predef {
                width: 530px;
                position: absolute;
                right: 20px;
                bottom: 20px;
                text-align: center;
            }
            #pa-predef .pa-predef-bloc {
                width: 100%;
                height: 120px;
                background: #fff;
                background: linear-gradient(to bottom, #fff 0%, #64A3B4 100%);
                border-radius: 10px;
                border: 2px solid #2F4B56;
                padding: 8px 0 6px;
            }
            #pa-predef .pa-pred {
                border: 1px solid #2F4B56;
                height: 120px;
                width: 60px;
                display: inline-block;
                position: relative;
                overflow: hidden;
            }
            #pa-predef .pa-pred-content {
                position: absolute;
                height: 100%;
                width: 100%;
                background: rgba(0, 0, 0, 0.8);
                top: 0;
                color: #fff;
                font-size: 11px;
                box-sizing: border-box;
                padding-top: 40px;
                transform: translate(0, 100%);
                transition: all 0.3s;
            }
            #pa-predef .pa-pred:hover .pa-pred-content {
                transform: translate(0, 0);
            }
          /*bloc partenaires*/
            #pa-part {
                width: 230px;
                position: absolute;
                right: 20px;
                top: 50px;
            }
            #pa-part #pa-partenaires {
                width: 100%;
                height: 180px;
                overflow: hidden;
                position: relative;
            }
            #pa-part #pa-partenaires-content {
                position: absolute;
                width: 100%;
                height: 100%;
            }
            #pa-credit {
                position: absolute;
                bottom: 15px;
                left: 15px;
                font-size: 10px;
                color: #fff;
            }
        </style>
    </head>

    <body>
        <div id="pa">
            <h1>Welcome to gène-V</h1>
          <!-- CONTEXTE -->
            <div id="pa-contexte">
                <h2>Contexte</h2>
                <div>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
            </div>
          <!-- STAFF -->
            <div id="pa-staff">
                <h2>Staff</h2>
                <div class="pa-staff-block">
                    <img src="http://placehold.it/80x80">
                    <div class="pa-staff-content">Pseudo
                        <br />Rang
                        <br /><a href="#">MP</a>
                    </div>
                </div>
                <div class="pa-staff-block">
                    <img src="http://placehold.it/80x80">
                    <div class="pa-staff-content">Pseudo
                        <br />Rang
                        <br /><a href="#">MP</a>
                    </div>
                </div>
                <div class="pa-staff-block">
                    <img src="http://placehold.it/80x80">
                    <div class="pa-staff-content">Pseudo
                        <br />Rang
                        <br /><a href="#">MP</a>
                    </div>
                </div>
            </div>
          <!-- TOP SITES -->
            <div id="pa-top">
                <h2>Top-sites</h2>
                <div>
                    <a href="#"><img src="http://placehold.it/50x50">
                    </a>
                    <a href="#"><img src="http://placehold.it/50x50">
                    </a>
                    <a href="#"><img src="http://placehold.it/50x50">
                    </a>
                    <a href="#"><img src="http://placehold.it/50x50">
                    </a>
                    <a href="#"><img src="http://placehold.it/50x50">
                    </a>
                </div>
            </div>
          <!-- PREDEFINIS -->
            <div id="pa-predef">
                <h2>Prédéfinis</h2>
                <div class="pa-predef-bloc">
                    <div class="pa-pred">
                        <img src="http://placehold.it/60x120">
                        <div class="pa-pred-content">Nom
                            <br>Groupe
                            <br><a href="#">Lien</a>
                        </div>
                    </div>
                    <div class="pa-pred">
                        <img src="http://placehold.it/60x120">
                        <div class="pa-pred-content">Nom
                            <br>Groupe
                            <br><a href="#">Lien</a>
                        </div>
                    </div>
                    <div class="pa-pred">
                        <img src="http://placehold.it/60x120">
                        <div class="pa-pred-content">Nom
                            <br>Groupe
                            <br><a href="#">Lien</a>
                        </div>
                    </div>
                    <div class="pa-pred">
                        <img src="http://placehold.it/60x120">
                        <div class="pa-pred-content">Nom
                            <br>Groupe
                            <br><a href="#">Lien</a>
                        </div>
                    </div>
                    <div class="pa-pred">
                        <img src="http://placehold.it/60x120">
                        <div class="pa-pred-content">Nom
                            <br>Groupe
                            <br><a href="#">Lien</a>
                        </div>
                    </div>
                    <div class="pa-pred">
                        <img src="http://placehold.it/60x120">
                        <div class="pa-pred-content">Nom
                            <br>Groupe
                            <br><a href="#">Lien</a>
                        </div>
                    </div>
                    <div class="pa-pred">
                        <img src="http://placehold.it/60x120">
                        <div class="pa-pred-content">Nom
                            <br>Groupe
                            <br><a href="#">Lien</a>
                        </div>
                    </div>
                    <div class="pa-pred">
                        <img src="http://placehold.it/60x120">
                        <div class="pa-pred-content">Nom
                            <br>Groupe
                            <br><a href="#">Lien</a>
                        </div>
                    </div>
                </div>
            </div>
          <!-- PARTENAIRES -->
            <div id="pa-part">
                <h2>Partenaire</h2>
                <div id="pa-partenaires">
                    <div id="pa-partenaires-content">
                        <a href="#"><img src="http://placehold.it/50x50">
                        </a>
                        <a href="#"><img src="http://placehold.it/50x50">
                        </a>
                        <a href="#"><img src="http://placehold.it/50x50">
                        </a>
                        <a href="#"><img src="http://placehold.it/50x50">
                        </a>
                        <a href="#"><img src="http://placehold.it/50x50">
                        </a>
                        <a href="#"><img src="http://placehold.it/50x50">
                        </a>
                        <a href="#"><img src="http://placehold.it/50x50">
                        </a>
                        <a href="#"><img src="http://placehold.it/50x50">
                        </a>
                        <a href="#"><img src="http://placehold.it/50x50">
                        </a>
                        <a href="#"><img src="http://placehold.it/50x50">
                        </a>
                        <a href="#"><img src="http://placehold.it/50x50">
                        </a>
                        <a href="#"><img src="http://placehold.it/50x50">
                        </a>
                    </div>
                </div>
            </div>
          <!-- CREDIT -->
            <div id="pa-credit">
                PA par Awful pour <a href="http://www.never-utopia.com/">N-U</a>
            </div>
        </div>
    </body>

    Il vaut mieux l'héberger dans tes modules HTML et créer un iframe c:
    Si tu ne sais pas comment faire, je t'explique vite fait : dans ton panneau d'aministration, tu vas dans modules > HTML & JAVASCRIPT > Gestion des pages HTML. Tu crées une nouvelle page en y collant le code que je t'ai donné, puis tu prends l'URL générée pour la coller dans ton iframe

    Code:
    <iframe frameborder="0" style="width: 790px; height: 500px;" scrolling="no" src="TON URL"></iframe>

    Voilààà o/
    • Revenir en haut
    P'tit loup
    P'tit loup
    MasculinAge : 41Messages : 451

    Mer 15 Fév 2017 - 16:40

    Merci bien ^^ C'est génial, j'ai plus qu'à la remplir.

    Merci infiniment pour ton aide et ta patience suite aux quelques changements.

    Bonne continuation à toi ^^

    NOTE : Cette commande peut être considérée comme terminée avec 100% de satisfaction o/



    [Awful] [PA] Personnalisable et effet slide 30xivrd
    • Revenir en haut
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Mer 15 Fév 2017 - 22:11

    De rien, ravi d'avoir aidé ! :3
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Ven 19 Avr 2024 - 14:15