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 :
Bon plan achat en duo : 2ème robot cuiseur ...
Voir le deal
600 €

    [Terminé](AYFOTH) Page d'accueil

    Carmina
    Carmina
    FémininAge : 37Messages : 506

    Jeu 25 Sep 2014 - 7:31

    Rappel du premier message :

    Ma demande



    Bonjour! Voilà, j'aimerais une PA un peu compliquée pour moi car je ne sais pas tout gérer niveau codage.
    Je souhaiterais une PA comme indiquée dans le shcéma ci dessous, si quelqu'un sait y faire :)


    Schéma(s) et Eléments
    Schémas :
    Spoiler:
    Tailles des éléments : tout est indiquée en dessous... Embarassed
    Effets voulus : =>Le fond de cette PA devras être de 898*500 et de couleur : #100e0f

    =>Le titre: BIENVENUE sera centré avec une couleur de : 5a0e0f, la police Castellar avec effet de lueur externe couleur: 4c3436 une oppacité légère. Taille 48 px

    =>Le sous titre, couleur: #434142, police trajan pro, taille 11 (sur toshop c'est une opacité de 14% pour du blanc, je ne sais pas si ça peut faire pareil?)

    =>Le coin Staff: même policeet couleur que le gros titre, taille 30, image de fond de base: taille 268*143, couleur 231e21, opacicité 56 % (donc le cadre), ombre portée 75% noire. J'aimerais qu'au passage de la souris, sur les icones X, la photo du membre du staff apparaisse (taille 200*120) et dans une infobulle aux mêmes couleurs que le fond de base taille 80/43, police Castellar, couleur identique aux gros titres son nom et sa fonction.

    =>Les partenaires: même police que le gros titre et couleur, taille 30, icones de partenaire de taille 45/16 px. Partie simple Nous lier etc en taille 13 et puis petit logo facebook mais ça c'est simple je sais faire^^

    =>Contexte: image de fond de taille 416*160, couleur 231e21, opacicité 56%, ombre 75% noire, couleur et taille du texte trajan pro, couleur 434142. Titre de la zone, aux mêmes couleurs et dimensions que les précédents.

    =>Navigation: 326*191 px, couleur cadre 231e21, opacicité 56%, ombre 75% noire, j'aimerais que au passage des petites icones croix apparaissent le titre de la navigation et que l'on puisse mettre dans le cadre une image de 326*191 qui indiquera le lien de navigation. La petite croix étant cliquables pour aller vers le lien correspondant.
    Titre aux mêmes tailles et couleurs que les autres.

    =>PV: couleur identique aux titres précédents, tailles 26, cadre de fond 92*381px, couleur 231e21, opacicité 56%, ombre 75% noire, avec à l'intérieur image cliquables des pv menant vers le pv, image 50*50.


    Ressources
    X

    Je pense qu'il n'y a que celle là dont vus aurez réellement besoin, à moins que vous n'en vouliez d'autres ^^


    Autres précisions ?
    Rien de plus, je vous remercie d'avance pour celui ou celle qui s'embêtera à me faire la demande de LS.

    Une belle journée à vous. .



    Dernière édition par Euterpe le Dim 12 Oct 2014 - 20:32, édité 1 fois
    Carmina
    Carmina
    FémininAge : 37Messages : 506

    Mer 8 Oct 2014 - 18:32

    Huhu j'adore j'adore!

    J'ai encore avec google font j'avoue^^ je m'y noie lol

    Pour le contexte boh l'éclaircir un chouillat n'est pas compliqué? Sinon franchement c'est parfait!
    Lihuén
    Lihuén
    FémininAge : 34Messages : 544

    Mer 8 Oct 2014 - 19:33

    Tu veux que j'éclaircisse la couleur du texte en laissant la même police ? (juste histoire d'être sûre^^)



    Carmina
    Carmina
    FémininAge : 37Messages : 506

    Mer 8 Oct 2014 - 19:34

    Un petit peu s'il te plait :)
    Lihuén
    Lihuén
    FémininAge : 34Messages : 544

    Mer 8 Oct 2014 - 20:27

    Comme ça www ?

    S'il y a d'autres détails que tu aimerais changer n'hésite pas, il faut que ça te plaise (:



    Carmina
    Carmina
    FémininAge : 37Messages : 506

    Mer 8 Oct 2014 - 20:30

    HIiiii c'est perfectooooo

    Ouai je suis un peu fofolle et super contente du résultat.

    Si je peux embéter sur un dernier point! Les X du staff peuvent-ils avoir un lien pour mener à un profil du staff? Juste ça! Après franchement non niquel chrome c'est magnifique j'adore, je manquerais pas de te faire un gros merci sur le fofo en crédit!!!! parce que j'en révais de cette PA
    Lihuén
    Lihuén
    FémininAge : 34Messages : 544

    Mer 8 Oct 2014 - 20:51

    Oh ça me fait plaisir alors si ça te plaît ^_^

    Voilà qui est fait !

    Tu veux encore modifier quelque chose ou je t'envoie le code ?



    Carmina
    Carmina
    FémininAge : 37Messages : 506

    Mer 8 Oct 2014 - 20:52

    C'est parfait!!!!!!!

    Je veux bien le code *-* je vais pouvoir terminer le design et si je me motive bien le mettre en place demain grace à toi \o
    Lihuén
    Lihuén
    FémininAge : 34Messages : 544

    Mer 8 Oct 2014 - 21:02

    Parfait alors, le voici ! ^_^

    HTML

    Code:
        <div id="fond_PA">
          <h1 id="titre_PA">Bienvenue sur XMH</h1>
          <h3 id="soustitre_PA">Forum NC-18. 15 lignes RP. Création Juillet 2012. XMH inspiré du forum
            XMEN HORIZON 05/2006-07/2012<br>
            Contexte ARLATHAN et ZEXION. DESIGN DIEU</h3>
          <div class="cadre_PA staff"> <span class="titre_cadre titre_staff">STAFF</span>
            <div class="bouton_croix"> <img class="image_staff un" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg">
              <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg"></a>
            </div>
            <div class="bouton_croix"> <img class="image_staff deux" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg">
              <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg"></a>
            </div>
            <div class="bouton_croix"> <img class="image_staff trois" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg">
              <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg"></a>
            </div>
            <div class="bouton_croix"> <img class="image_staff quatre" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg">
              <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg"></a>
            </div>
            <div class="bouton_croix"> <img class="image_staff cinq" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg">
              <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg"></a>
            </div>
          </div>
          <div id="contexte_titre"> <span class="titre_cadre titre_contexte">CONTEXTE</span>
            <div class="cadre_PA contexte">
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
                et condimentum ligula. Donec pulvinar, massa et vulputate viverra,
                purus dolor sagittis massa, vel egestas orci justo ac lorem.
                Maecenas at lacinia ex, ac viverra risus. Vivamus ipsum lacus,
                ultrices dictum molestie id, condimentum quis erat. Etiam quam
                tortor, pellentesque eu aliquam a, ultrices eu nibh. Maecenas porta
                placerat vehicula. Ut vitae maximus erat. Proin eget purus non orci
                convallis auctor. Praesent vulputate sed est vitae auctor. Mauris
                eleifend consequat mattis. Aliquam tortor augue, commodo vitae
                faucibus nec, semper in magna. Praesent vitae nibh et tortor posuere
                convallis. Vestibulum dignissim bibendum ante et sollicitudin.
                Nullam hendrerit sapien non erat venenatis, molestie tincidunt
                mauris condimentum. </p>
              <p> Integer eget augue lacus. Fusce venenatis orci et vehicula
                finibus. Phasellus rhoncus quis purus a bibendum. Phasellus egestas
                ultrices sapien id condimentum. Proin vel fermentum lectus. Duis vel
                vehicula sem, at iaculis augue. Proin suscipit fringilla dignissim.
                Vestibulum efficitur nunc sit amet mauris viverra luctus. Aenean
                vitae velit lectus. Sed accumsan porta quam. Aliquam sit amet porta
                velit. Vivamus dapibus urna nec consectetur rhoncus. Maecenas vitae
                bibendum odio. In velit nunc, elementum et cursus vel, interdum eu
                risus. </p>
            </div>
          </div>
          <div class="cadre_PA postes_vacants"> <span class="titre_cadre titre_pv">POSTES
              VACANTS</span>
            <div id="pv"> <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv10.png"></a>
              <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv10.png"></a>
              <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv10.png"></a>
              <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv10.png"></a>
              <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv10.png"></a>
              <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv10.png"></a>
            </div>
          </div>
          <div id="partenaires_PA"> <span class="titre_cadre titre_partenaires">TOP
              PARTENAIRES</span>
            <div class="img_partenaires"> <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten10.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten10.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten10.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten10.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten10.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten10.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten10.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten10.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten10.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten10.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten10.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten10.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten10.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten10.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten10.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten10.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten10.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten10.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten10.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten10.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten10.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten10.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten10.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten10.png"></a>
            </div>
            <span id="nous_lier"> <a href="#">NOUS LIER</a> // <a href="#">PLUS </a>//
              <a href="#">VOUS</a> </span> <a href="#"><img src="http://img2.wikia.nocookie.net/__cb20120221101557/eden-eternal/fr/images/2/23/Logo_facebook_mini.gif"></a>
          </div>
          <div class="cadre_PA navigation_PA"> <span class="titre_cadre titre_navig">NAVIGATION</span>
              <div class="bouton_croix_navig"> <img class="image_navig un" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg">
                <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg"></a>
              </div>
              <div class="bouton_croix_navig"> <img class="image_navig deux" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg">
                <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg"></a>
              </div>
              <div class="bouton_croix_navig"> <img class="image_navig trois" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg">
                <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg"></a>
              </div>
              <div class="bouton_croix_navig"> <img class="image_navig quatre" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg">
                <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg"></a>
              </div>
              <div class="bouton_croix_navig"> <img class="image_navig cinq" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg">
                <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg"></a>
              </div>
              <div class="bouton_croix_navig"> <img class="image_navig six" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg">
                <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg"></a>
              </div>
            </div>
        </div>
        <link href="//fonts.googleapis.com/css?family=Cinzel:400,700,900" rel="stylesheet" type="text/css" />


    CSS

    Code:

    /* ------------ MISE EN FORME PA ------------ */
    #fond_PA {
      height: 505px;
      width: 898px;
      background-color: #100e0f;
    }
    #titre_PA {
      color: #5a0e0f;
      font-family: Cinzel;
      font-size: 48px;
      text-shadow: 0px 0px 15px #4c3436;
      margin-bottom: -25px;
      text-align: center;
    }
    #soustitre_PA {
      color: #434142;
      font-family: Cinzel;
      opacity: 0.5;
      text-align: center;
    }
    .cadre_PA {
      background: rgba(35, 30, 33, 0.5);
      box-shadow: 2px 2px 2px black;
      font-family: Arial;
      color: #5a0e0f;
      position: relative;
      display: inline-block;
      z-index: 0;
    }
    .titre_cadre {
      color: #5a0e0f;
      font-family: Cinzel;
      font-weight: bold;
      font-size: 30px;
      z-index: 2;
      text-align: left;
      display: inline-block;
      position: absolute;
    }
    /* MISE EN FORME DU CADRE STAFF */
    .staff {
      width: 268px;
      height: 143px;
      float: left;
      margin-left: 10px;
    }
    .titre_staff {
      width: 15px;
      word-wrap: break-word; 
      top: -10px;
      left: -5px;
      line-height: 32px;
    }
    .bouton_croix {
      display: inline-block;
      margin: 150px auto 20px auto;
      overflow: visible;
      width: 31px;
      height: 28px;
    }
    .bouton_croix .image_staff {
      position: absolute;
      width: 200px;
      height: 120px;
      z-index: 5;
      visibility: hidden;
    }
    .bouton_croix .un {
      margin: -140px 0px 0px 0px;
    }
    .bouton_croix .deux {
      margin: -140px 0px 0px -34px;
    }
    .bouton_croix .trois {
      margin: -140px 0px 0px -68px;
    }
    .bouton_croix .quatre {
      margin: -140px 0px 0px -102px;
    }
    .bouton_croix .cinq {
      margin: -140px 0px 0px -136px;
    }
    .bouton_croix:hover .image_staff {
      visibility: visible;
    }
    /* MISE EN FORME DU CONTEXTE */
    #contexte_titre {
      overflow: visible;
      display: inline-block;
      width: 430px;
      height: 160px;
    }
    .contexte {
      width: 416px;
      height: 160px;
      padding: 5px;
      text-align: justify;
      overflow: auto;
      left: -10px;
      top: 17px;
    }
    .contexte p {
      font-family: Cinzel;
      color: #b6b4b4;
    }
    .titre_contexte {
      width: 416px;
      margin-left: -20px;
    }
    /* MISE EN FORME POSTES VACANTS */
    .postes_vacants {
      width: 92px;
      height: 381px;
      float: right;
      margin-right: 30px;
    }
    .titre_pv {
      width: 15px;
      word-wrap: break-word;
      top: -20px;
      right: -5px;
      line-height: 32px;
    }
    #pv {
      margin-top: 30px;
    }
    .img_pv {
      margin: 2px 0px 2px 0px;
    }
    /*MISE EN FORME PARTENAIRES */
    #partenaires_PA {
      position: relative;
      display: inline-block;
      margin: 80px 0px 0px 20px;
      width: 300px;
      height: 150px;
      float: left;
    }
    .titre_partenaires {
      width: 320px;
      left: 5px;
      top: -30px;
    }
    .img_partenaires {
      margin-top: 10px;
    }
    .img_partenaires img {
      margin: 1px 1px 0px 0px;
    }
    #nous_lier {
      color: #5a0e0f;
      text-align: center;
      font-size: 13px;
      display: block;
      padding: 10px;
    }
    #nous_lier a {
      text-decoration: none;
      color: #5a0e0f;
      font-family: Cinzel;
      font-weight: bold;
    }
    /* MISE EN FORME NAVIGATION */
    .navigation_PA {
      width: 326px;
      height: 191px;
      margin-top: 42px;
    }
    .titre_navig {
      right: -20px;
      top: -15px;
    }
    .bouton_croix_navig {
      margin: 3px 0px 3px -370px;
      display: block;
      width: 31px;
      height: 28px;
    }
    .image_navig {
      width: 326px;
      height: 191px;
      display: inline-block;
      position: absolute;
      visibility: hidden;
    }
    .bouton_croix_navig .un {
      margin: -2px 0px 0px 38px;
    }
    .bouton_croix_navig .deux {
      margin: -33px 0px 0px 38px;
    }
    .bouton_croix_navig .trois {
      margin: -64px 0px 0px 38px;
    }
    .bouton_croix_navig .quatre {
      margin: -95px 0px 0px 38px;
    }
    .bouton_croix_navig .cinq {
      margin: -126px 0px 0px 38px;
    }
    .bouton_croix_navig .six {
      margin: -157px 0px 0px 38px;
    }
    .bouton_croix_navig:hover .image_navig {
      visibility: visible;
    }

    Tu me diras si tout fonctionne quand tu l'installes sur ton forum ! Wink



    Carmina
    Carmina
    FémininAge : 37Messages : 506

    Mer 8 Oct 2014 - 21:34

    Héhé je te montre sur le fofo test: http://testdesign.newforumpro.com/

    Sur le fofo officiel, je pense que nous le mettrons en place demain, mais je te mpoterais!

    Merci !!!!!!!!!

    J'ai juste une question ^^' comment puis-je faire coller la PA aux bords du forum ? Si tu vois ce que je veux dire ^^'
    Lihuén
    Lihuén
    FémininAge : 34Messages : 544

    Mer 8 Oct 2014 - 21:40

    Essaie de remplacer la largeur de la PA, qui pour le moment est en pixels et donc définit une largeur fixe, par un 100%, qui veut dire qu'elle s'adapte à la largeur de ton forum, comme ceci :

    Code:
     #fond_PA {
      height: 505px;
      width: 100%;
      background-color: #100e0f;
    }

    Je remarque aussi qu'avec Firefox, le cadre de la PA est légèrement trop petit et que la navigation dépasse... Il faudrait peut-être changer la hauteur (height) à 510 ou 515px pour régler le problème.



    Carmina
    Carmina
    FémininAge : 37Messages : 506

    Mer 8 Oct 2014 - 22:00

    J'ai augmenté en hauteur (jai plus firefox pou vérifier XD)

    Mais le 100% ça réduit le cadre, bon osef, c'était très bien en px XD
    Lihuén
    Lihuén
    FémininAge : 34Messages : 544

    Mer 8 Oct 2014 - 22:03

    Sinon essaie d'augmenter légèrement la largeur en pixels...

    Pour la hauteur c'est tout bon maintenant !



    Carmina
    Carmina
    FémininAge : 37Messages : 506

    Mer 8 Oct 2014 - 22:04

    Non mais ça voulait déjà pas avec le QEEL, donc la PA peut avoir un cadre légèrement plus petit, sinon ça déforme pour la banière, c'est du détail que je vais être la seule à remarquer mdr et je suis fatiguée j'ai passé la journée su le reste du design, c'est très bien XD

    t'as été génial en tous les cas! Encore merci
    Lihuén
    Lihuén
    FémininAge : 34Messages : 544

    Mer 8 Oct 2014 - 22:11

    Je comprends^^

    Tu me diras alors si tout s'est bien passé en l'insérant sur ton forum et on pourra clore le sujet Very Happy



    Carmina
    Carmina
    FémininAge : 37Messages : 506

    Mer 8 Oct 2014 - 22:12

    vuep !!! j'espère que demain j'aurais tout fini! pour le mettre en place Very Happy me reste encore du "détail"
    Lihuén
    Lihuén
    FémininAge : 34Messages : 544

    Dim 12 Oct 2014 - 18:41

    Coucou !

    Alors, tu as eu le temps de mettre tout ça en place ? Very Happy



    Carmina
    Carmina
    FémininAge : 37Messages : 506

    Dim 12 Oct 2014 - 20:16

    Coucou

    Ouuuh j'ai zappé de poster: tiens : http://xmh-the-after-years.forum-gratuit.tv/

    Very Happy

    J'suis pas fonda et j'ai merdé sur le recodage du QEEL mais tu verras ton nom apparaitre QUAND l'admin sera re la Wink
    Lihuén
    Lihuén
    FémininAge : 34Messages : 544

    Dim 12 Oct 2014 - 20:28

    Oh ça donne chouette avec le reste du design ! Very Happy

    Du coup, pense à mettre l'icône "terminé" dans le titre du sujet Wink



    Carmina
    Carmina
    FémininAge : 37Messages : 506

    Dim 12 Oct 2014 - 20:33

    Vuep un gros merci à toi *-* et c'est fait!
    Contenu sponsorisé


      La date/heure actuelle est Ven 17 Mai 2024 - 14:20