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 du moment :
Smartphone Xiaomi 14 – 512 Go- 6,36″ 5G ...
Voir le deal
599 €

    (Aelita) Une PA s'il-vous-plaît ?

    Ayane Jun
    Ayane Jun
    FémininAge : 31Messages : 81

    Jeu 6 Mar 2014 - 18:25

    Ma demande



    Bonjour, je fais une petite demande car en fait j'ai un peu de mal même pour personnaliser les supers codes que vous nous faites partager en tuto ;w;

    Schéma(s) et Eléments
    Schémas : Un petit schéma pour que vous puissiez mieux vous rendre compte : https://i.servimg.com/u/f55/18/07/10/40/schama10.png

    Tailles des éléments : hm... la PA doit faire environ 700 de largeur sur 400 de hauteur. Ensuite, pour les éléments -
    S'il est possible de faire pour le staff un onglet rétractable, ça prendra légèrement moins de place du coup. Pour les icônes top sites, je pense que du 200 de hauteur sur 100 de largeur suffisent. Les images peuvent être en 200*200, je pense que ça devrait passer et après euh... les partenaires si on fait un défilement horizontal, on peut prévoir 450 de largeur sur 100 de hauteur. Ainsi pour le dernier bloc des News, on peut prendre 350 de hauteur et 150 de largeur.
    /!\ C'est assez approximatif, je vous donne plutôt carte blanche à vrai dire

    Effets voulus : Des coins arrondis pour tous les blocs ainsi que le bloc principal de la PA - des couleurs plutôt claires et chaudes ; jaunes orangé, blanc (au cas, ça je sais modifier sur un code les couleurs XD) et sinon et bien je pense que c'est tout. Les deux barres du milieu sont là en option si vous pourriez arriver à couper la PA en deux pour en faire une sorte de transition (oui je sais j'en demande beaucoup ><)

    Ressources
    Pour les images, je les chercherais moi même^^ Je vous remercie déjà beaucoup si vous arrivez à faire à peu près comme le schéma ♥

    Autres précisions ?
    Si vous avez besoin de signaler autre chose ou d'indiquer un supplément d'information...


    Je vous remercie juste encore si vous arrivez à faire ma PA. Si je savais coder et bien comprendre le codage surtout, je l'aurais fais moi même..


    Dernière édition par Ayane Jun le Ven 21 Mar 2014 - 21:17, édité 1 fois
    • Revenir en haut
    Ayane Jun
    Ayane Jun
    FémininAge : 31Messages : 81

    Sam 8 Mar 2014 - 11:04

    Bonjour,
    Je précise que la commande est toujours d'actualité svp.
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Mar 11 Mar 2014 - 13:14

    Je t'avoue que j'aurais bien voulu faire cette PA mais je n'ai aucune connaissances en JQuery ou PHP hors il en faut pour la partie onglet rétractable du staff car j'imagine que c'est au clic que tu veux que ça s'affiche.
    • Revenir en haut
    Ayane Jun
    Ayane Jun
    FémininAge : 31Messages : 81

    Mar 11 Mar 2014 - 15:49

    Est-ce que sinon sans un onglet rétractable, tu saurais faire la PA ? Même demande, mais sans l'onglet rétractable ?

    Merci d'avance :3.
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Mar 11 Mar 2014 - 18:34

    Oui mais ce serait bête que tu n'ais pas ce que tu veux à cause de mes connaissances incomplètes en programmation.
    • Revenir en haut
    Ayane Jun
    Ayane Jun
    FémininAge : 31Messages : 81

    Mar 11 Mar 2014 - 21:09

    Mais non ! Ne t'inquiète pas ! En fait, je me suis dis que ce serait pas mal mais c'est juste facultatif disons Wink
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Mar 11 Mar 2014 - 21:12

    Bon dans ce cas je m'en occupe alors mais j'essayerais de trouver les codes pour l'onglet ouvrable
    • Revenir en haut
    Ayane Jun
    Ayane Jun
    FémininAge : 31Messages : 81

    Mar 11 Mar 2014 - 22:35

    Oh je te remercie vraiment beaucoup Aelita !
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Mer 12 Mar 2014 - 14:15

    Voici le rendu que ça donne (c'est un screen). Je n'ai pas encore fais la partie STAFF (j'ai trouvé le code JQ mais j'attends de voir comment le personnaliser ^^). Dis-moi si c'est ce que tu attends.



    P.S. j'ai ajouté les bordures afin de voir où sont placés les éléments dans leur intégralité pas seulement les textes et j'ai ajouté la bordure externe juste pour me repérer rien de plus je la retirerais à la fin Wink
    • Revenir en haut
    Ayane Jun
    Ayane Jun
    FémininAge : 31Messages : 81

    Mer 12 Mar 2014 - 14:27

    J'aime beaucoup comment cela peut rendre !
    Et c'est pile ce que j'attends^^
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Mer 12 Mar 2014 - 14:56

    Bon ben alors je continue ^^
    • Revenir en haut
    Ayane Jun
    Ayane Jun
    FémininAge : 31Messages : 81

    Mer 12 Mar 2014 - 15:26

    Merci !^^
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Mer 12 Mar 2014 - 18:59

    Puis-je avoir les tailles des images que tu souhaites mettre pour :

    - les partenaires
    - les topsites

    s'il te plais ^^

    En attendant, j'ai fais ça :

    Aperçu:

    Ne t'inquiètes pas rien ne dépasse quand tu mets le code sur la PA. J'ai aussi réussi à trouver un code JQuery pour l'onglet que tu voulais faire apparaître Wink
    Cependant, ici le background s'affiche mais il ne s'affichera pas sur ta PA alors dis-moi si il te plais pour que je te fasse l'image.
    • Revenir en haut
    Ayane Jun
    Ayane Jun
    FémininAge : 31Messages : 81

    Mer 12 Mar 2014 - 20:00

    Haaaan super beau *w*
    Alors pour la taille des Top-sites, je pensais mettre du 50*50
    Quant aux partenaires, ce serait plutôt du 150*81

    Si tu as besoin d'autres informations^^

    Edit : du coup pour le staff je mettrais seulement le nom des personnes et le lien vers leurs fiches, cela devrait aller ou ça coincera d'après toi ?
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Mer 12 Mar 2014 - 21:15

    Merci.

    Si tu veux pour le staff je peux mettre des images tkt.

    Pour le reste je peux ne t'inquiètes pas.
    • Revenir en haut
    Ayane Jun
    Ayane Jun
    FémininAge : 31Messages : 81

    Mer 12 Mar 2014 - 22:21

    Okay alors je veux bien s'il-te-plaît pour les images et désolée encore d'ennuyer^^'
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Mer 12 Mar 2014 - 23:07

    Non non tu ne m'ennuis pas bien au contraire. Grâce à toi j'ai pu commencé à utiliser le JQuery et j'en suis heureuse ^^
    Pour ce qui est du reste je vais te le faire les doigts dans le nez xD
    • Revenir en haut
    Ayane Jun
    Ayane Jun
    FémininAge : 31Messages : 81

    Mer 12 Mar 2014 - 23:15

    Et bien je te remercie encore une fois !
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Sam 15 Mar 2014 - 20:46

    Je suis désolé de te faire attendre mais j'ai eu quelque problème qui m'ont rattrapé à cause de mes poursuites d'étude. Vive Post-Bac, le site jamais expliqué par les profs mais super important pour ton avenir ^^'

    Je bosse sur le reste de code (encore désolé).
    • Revenir en haut
    Ayane Jun
    Ayane Jun
    FémininAge : 31Messages : 81

    Sam 15 Mar 2014 - 21:17

    Ne t'inquiète pas, je comprends tout à fait. Moi aussi j'suis dans les études, exam final dans moins de 2 mois enfin voilà^^
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Ven 21 Mar 2014 - 17:39

    Et voila ^^

    Code:
    <style type="text/css">
    /*ALL*/
       #all{
          padding: 10px 5px 5px 5px;
          width: 700px;
          height: 400px;
          background-image: linear-gradient(-43deg, #ffd05b .2, #f6af00 54%, #ffd05b 58%, #f6af00 70%);
          border-radius: 10px;
       }

    /*NEWS*/
       .news{
          display: inline-block;
          float: left;
          border: 1px dotted darkred;
          border-radius: 10px;
          width: 150px;
          height: 250px;
          position: relative;
          background-color: rgba(255, 255, 255, .3);
       }
       .newtitle{
          font-size: 25px;
          color: #FFF;
          text-shadow: 0px 0px 5px #7e4e00;
          margin: -15px 0 0 0;
       }
       .newcontent{
          text-align: justify;
          font-size: 12px;
          padding: 0 5px;
       }

    /*IMAGES*/
       .image1{
          display: inline-block;
          width: 130px;
          height: 130px;
          background-image: url(http://images.4ever.eu/data/674xX/abstrait/arc-en-ligne-150894.jpg);
          background-position: 50% 50%;
          background-size: 300px;
          border: 1px dotted black;
          border-radius: 200px;
          position: relative;
          margin: 15px 0 0 -250px;
       }
       .image2{
          display: inline-block;
          width: 230px;
          height: 90px;
          background-image: url(http://sara.alexander.free.fr/rw_common/themes/blendit/images/header/image5.jpg);
          background-position: 50% 50%;
          background-size: 250px;
          border: 1px dotted black;
          border-radius: 500px / 200px;
          float: left;
          position: relative;
          margin: 30px -50px 0 50px;
       }

    /*TOPSITES*/
       .topsite{
          display: inline-block;
          width: 100px;
          height: 200px;
          border: 1px dotted black;
          border-radius: 10px;
          float: right;
          position: relative;
          background-color: rgba(255, 255, 255, .3);
       }
       .toptitle{
          font-size: 25px;
          color: #FFF;
          text-shadow: 0px 0px 5px #7e4e00;
          margin: -15px 0 10px 0;
       }

    /*LIENS*/
       /*normal*/
          .lien1{
             display: inline-block;
             border: 1px dotted black;
             border-radius: 30px / 5px;
             width: 150px;
             height: 25px;
             position: relative;
             margin: -100px -120px -30px 120px;
             background-color: rgba(255, 255, 255, .3);
             transition-duration: 1s;
          }
          .lien2{
             display: inline-block;
             border: 1px dotted black;
             border-radius: 30px / 5px;
             width: 150px;
             height: 25px;
             position: relative;
             margin: -50px -70px -30px 70px;
             background-color: rgba(255, 255, 255, .3);
             transition-duration: 1s;
          }
          .lien3{
             display: inline-block;
             border: 1px dotted black;
             border-radius: 30px / 5px;
             width: 150px;
             height: 25px;
             position: relative;
             margin: 0 -20px 0 20px;
             background-color: rgba(255, 255, 255, .3);
             transition-duration: 1s;
          }

       /*hover*/
          .lien1:hover{
             display: inline-block;
             border: 1px dotted black;
             border-radius: 30px / 5px;
             width: 150px;
             height: 25px;
             position: relative;
             margin: -100px -120px -30px 120px;
             background-color: rgba(255, 0, 0, .3);
             transition-duration: 1s;
          }
          .lien2:hover{
             display: inline-block;
             border: 1px dotted black;
             border-radius: 30px / 5px;
             width: 150px;
             height: 25px;
             position: relative;
             margin: -50px -70px -30px 70px;
             background-color: rgba(255, 0, 0, .3);
             transition-duration: 1s;
          }
          .lien3:hover{
             display: inline-block;
             border: 1px dotted black;
             border-radius: 30px / 5px;
             width: 150px;
             height: 25px;
             position: relative;
             margin: 0 -20px 0 20px;
             background-color: rgba(255, 0, 0, .3);
             transition-duration: 1s;
          }

    /*STAFF*/
       #staff{
          border: 1px dotted green;
          padding: 5px;
          border-radius: 10px;
          float: right;
          position: relative;
          background-color: rgba(255, 255, 255, .3);
          width: 250px;
          height: 140px;
          margin-top: -78px;
       }
       #staff p{
          text-align: justify;
          padding: 5px;
          font-size: 12px;
       }
       #btn{
          display: inline-block;
          width: 100px;
          height: 25px;
          margin: 10px -30px -10px 30px;
          border: none;
          font-style: none;
          background: none;
          font-size: 30px;
          color: #FFF;
          text-shadow: 0px 0px 5px #7e4e00;
          font-variant: small-caps;
          text-decoration: none;
       }
       #btn:hover{
          display: inline-block;
          width: 100px;
          height: 25px;
          margin: 10px -30px -10px 30px;
          border: none;
          font-style: none;
          background: none;
          text-decoration: none;
          font-size: 30px;
          color: #FFF;
          text-shadow: 0px 0px 5px #7e4e00;
          font-variant: small-caps;
       }
       /*image*/
          .imgstaff1{
             background-image: url();
             display: inline-block;
             width:50px;
             height: 65px;
             border: 1px dotted black;
          }
          .imgstaff2{
             background-image: url();
             display: inline-block;
             width:50px;
             height: 65px;
             border: 1px dotted black;
          }
          .imgstaff3{
             background-image: url();
             display: inline-block;
             width:50px;
             height: 65px;
             border: 1px dotted black;
          }
          .imgstaff4{
             background-image: url();
             display: inline-block;
             width:50px;
             height: 65px;
             border: 1px dotted black;
          }
          .imgstaff5{
             background-image: url();
             display: inline-block;
             width:50px;
             height: 65px;
             border: 1px dotted black;
          }
          .imgstaff6{
             background-image: url();
             display: inline-block;
             width:50px;
             height: 65px;
             border: 1px dotted black;
          }
          .imgstaff7{
             background-image: url();
             display: inline-block;
             width:50px;
             height: 65px;
             border: 1px dotted black;
          }
          .imgstaff8{
             background-image: url();
             display: inline-block;
             width:50px;
             height: 65px;
             border: 1px dotted black;
          }
       
    /*PARTENAIRES*/
       .part{
          display: block;
          border: 1px dotted red;
          border-radius: 10px;
          width: 400px;
          height: 63px;
          position: relative;
          margin-top: 10px;
          float: left;
          background-color: rgba(255, 255, 255, .3);
       }
       .parttitle{
          font-size: 25px;
          color: #FFF;
          text-shadow: 0px 0px 5px #7e4e00;
          margin: -15px 0 0 0;
       }
       .partcontent{
          font-size: 20px;
          color: #FFF;
          margin: 0 0 0 0;
       }

    /*LIENS*/
       .a{
          color: #FFF;
          font-size: 18px;
          width: 150px;
          height: 25px;
          text-decoration: none;
       }
    </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript">

    jQuery(document).ready(function() {

       jQuery('#staff').hide();
         jQuery('#btn').click(function() {
          jQuery('#staff').fadeToggle('2000');
      });

    });

    </script>
    <center>
       
       <div id="all">
          
          <div>
             
             <div class="news">
                
                <div class="newtitle">News<br />
                </div>
                 <br /><marquee direction="up" scrollamount="2">news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news<br /><br /> news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news<br /><br /> news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news<br /><br /></marquee>
             </div>
             
             <div class="topsite">
                
                <div class="toptitle">
                    Topsites <a href=""><img src="" style="width:35px; height: 35px; border: 1px dotted black;" /></a><a href=""><img src="" style="width:35px; height: 35px; border: 1px dotted black;" /></a><a href=""><img src="" style="width:35px; height: 35px; border: 1px dotted black;" /></a><a href=""><img src="" style="width:35px; height: 35px; border: 1px dotted black;" /></a><a href=""><img src="" style="width:35px; height: 35px; border: 1px dotted black;" /></a><a href=""><img src="" style="width:35px; height: 35px; border: 1px dotted black;" /></a><a href=""><img src="" style="width:35px; height: 35px; border: 1px dotted black;" /></a><a href=""><img src="" style="width:35px; height: 35px; border: 1px dotted black;" /></a>
                </div>
                
             </div>
             
             <div class="image1">
                
             </div><br /><br /><br />
             <div class="lien1">
                 <a href="" class="a">lien</a>
             </div>
             
          </div>
          
          <div>
             
             <div class="lien2">
                 <a href="" class="a">lien</a>
             </div><br />
             <div class="lien3">
                 <a href="" class="a">lien</a>
             </div>
             
          </div>
          
          <div class="image2">
             
          </div>
          
          <div class="part">
             
             <div class="parttitle">
                 Partenaires
             </div><marquee direction="left" scrollamount="2"> <a href=""><img src="" style="width:75px; height: 35px; border: 1px dotted black;" /></a> <a href=""><img src="" style="width:75px; height: 35px; border: 1px dotted black;" /></a> <a href=""><img src="" style="width:75px; height: 35px; border: 1px dotted black;" /></a> <a href=""><img src="" style="width:75px; height: 35px; border: 1px dotted black;" /></a> <a href=""><img src="" style="width:75px; height: 35px; border: 1px dotted black;" /></a> <a href=""><img src="" style="width:75px; height: 35px; border: 1px dotted black;" /></a> </marquee>
          </div>
           <a id="btn">Staff</a>
          <div id="staff" style="display:inline-block;">
              <a href=""><img src="" class="imgstaff1" /></a> <a href=""><img src="" class="imgstaff2" /></a> <a href=""><img src="" class="imgstaff3" /></a> <a href=""><img src="" class="imgstaff4" /></a> <a href=""><img src="" class="imgstaff5" /></a> <a href=""><img src="" class="imgstaff6" /></a> <a href=""><img src="" class="imgstaff7" /></a> <a href=""><img src="" class="imgstaff8" /></a>
          </div>
          
       </div>
    </center>
    • Revenir en haut
    Ayane Jun
    Ayane Jun
    FémininAge : 31Messages : 81

    Ven 21 Mar 2014 - 19:12

    Super je te remercie !
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Ven 21 Mar 2014 - 19:52

    De rien ^^

    N'oublies pas de cocher le "V" vert en éditant ton premier post Wink
    • Revenir en haut
    Ayane Jun
    Ayane Jun
    FémininAge : 31Messages : 81

    Ven 21 Mar 2014 - 21:17

    Yep !
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Ven 22 Nov 2024 - 22:32