AccueilFAQRechercherMembresGroupesS'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.


    PA tons sombres/rouge avec staff et navigation en hover

    Lihuén
    Lihuén
    FémininAge : 29Messages : 544

    le Dim 12 Oct 2014 - 20:18

    Rappel du premier message :

    Bonjour !

    Voici une PA que j'ai réalisée suite à la demande d'Euterpe, et que je viens donc vous proposer (:

    Ce que ça donne : clique
    Lorsque la souris passe sur une des petites croix du staff : clique
    Lorsque la souris passe sur une des petites croix de la navigation : clique


    Merci de ne pas enlever le crédit de N-U !

    Si vous rencontrez un problème, vous pouvez venir l'exposer ici.



    HTML

    Code:
        <div id="fond_PA">
          <h1 id="titre_PA">Bienvenue sur mon forum</h1>
          <h3 id="soustitre_PA">Ce forum a été créé le ... Il est inspiré de...</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/pv11.png"></a>
              <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv11.png"></a>
              <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv11.png"></a>
              <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv11.png"></a>
              <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv11.png"></a>
              <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv11.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/parten12.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.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>
          <span style="color: #434142; display:block; text-align: center; margin-top: 15px;">(c) Lihuén sur <a href="http://www.never-utopia.com/">Never-Utopia</a></span>
        </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: 515px;
      width: 900px;
      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;
      font-size: 11px;
      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: 1;
      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 {
      width: 416px;
      height: 160px;
      padding: 5px;
      text-align: justify;
      overflow: auto;
      left: -10px;
      top: 17px;
      font-family: Cinzel;
      color: #b6b4b4;
    }
    .contexte p {
      font-family: Cinzel;
      color: #b6b4b4;
    }
    .titre_contexte {
      width: 416px;
      margin-left: -20px;
    }
    #contexte_titre {
      overflow: visible;
      display: inline-block;
      width: 430px;
      height: 160px;
    }
    /* 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;
    }
    Vos commentaires et remerciements sont toujours bienvenus ^^


    Dernière édition par Lihuén le Mer 22 Oct 2014 - 7:07, édité 2 fois



    Nyotengu
    Nyotengu
    FémininAge : 25Messages : 85

    le Dim 5 Mar 2017 - 23:49

    merci
    Laurolay
    Laurolay
    FémininAge : 15Messages : 102

    le Jeu 9 Mar 2017 - 18:09

    Merci !
    Christtinne
    Christtinne
    FémininAge : 33Messages : 197

    le Dim 12 Mar 2017 - 4:09

    merci
    Plum
    Plum
    FémininAge : 53Messages : 21

    le Lun 13 Mar 2017 - 0:26

    merci pour le partage
    Luxuria
    Luxuria
    FémininAge : 22Messages : 83

    le Lun 13 Mar 2017 - 17:08

    whaa merci **
    TWISTY.RAIN
    TWISTY.RAIN
    FémininAge : 23Messages : 64

    le Ven 17 Mar 2017 - 20:06

    Merci beaucoup :) !



    PA tons sombres/rouge avec staff et navigation en hover - Page 15 Smile_so_sad_by_tuschen-daizswq
    Euterpe
    Euterpe
    FémininAge : 33Messages : 326

    le Dim 19 Mar 2017 - 16:56

    merci!
    Jane Bingum
    Jane Bingum
    FémininAge : 21Messages : 80

    le Lun 20 Mar 2017 - 12:05

    merci!!!
    Slyshaw
    Slyshaw
    MasculinAge : 18Messages : 15

    le Mar 18 Avr 2017 - 20:21

    Merci
    Sakura Sinister
    Sakura Sinister
    FémininAge : 32Messages : 35

    le Mer 19 Avr 2017 - 10:16

    Merci !
    Onizukaa
    Onizukaa
    FémininAge : 20Messages : 32

    le Mer 19 Avr 2017 - 22:53

    Eh bien merci, je suis sous le charme !
    Misery Devil
    Misery Devil
    FémininAge : 29Messages : 163

    le Mar 2 Mai 2017 - 17:27

    jolie ^^



    PA tons sombres/rouge avec staff et navigation en hover - Page 15 121584Signature
    Suna
    Suna
    FémininAge : 14Messages : 33

    le Jeu 4 Mai 2017 - 18:44

    Merci beaucoup du partage :')



    Salut à tous, mon nom est Suna en rapport avec Suna (un village de Ninja dans Naruto)
    Mes surnoms son Gaga, Erza et Gaara. j'aime beaucoup les mangas et en particulier Fairy Tail. Je suis fort en rpg, mnof e, codage et nulle à chier en graphisme.

    PA tons sombres/rouge avec staff et navigation en hover - Page 15 Url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwi90cbPor_SAhXHiRoKHe5MAGIQjRwIBw&url=https%3A%2F%2Ffr.pinterest.com%2Fpin%2F286049013812562888%2F&bvm=bv.148747831,d
    Laurolay
    Laurolay
    FémininAge : 15Messages : 102

    le Jeu 11 Mai 2017 - 11:56

    Thank you !!
    Abysse Yclette
    Abysse Yclette
    FémininAge : 27Messages : 123

    le Jeu 18 Mai 2017 - 11:32

    Merci ! =D



    PA tons sombres/rouge avec staff et navigation en hover - Page 15 742880velo
    damon w salvatore
    damon w salvatore
    FémininAge : 31Messages : 109

    le Dim 4 Juin 2017 - 17:24

    merci magnifique
    Lamire
    Lamire
    FémininAge : 25Messages : 96

    le Lun 5 Juin 2017 - 19:05

    Merci~
    Lybris
    Lybris
    FémininAge : 23Messages : 5

    le Sam 8 Juil 2017 - 23:39

    Merci!
    Joshua Upshur
    Joshua Upshur
    MasculinAge : 17Messages : 42

    le Ven 14 Juil 2017 - 5:19

    Pas mal ! Joli boulot



           
    Bunny Lune
    Bunny Lune
    FémininAge : 29Messages : 145

    le Jeu 20 Juil 2017 - 13:57

    Très belle PA merci du partage :)
    Ello
    Ello
    FémininAge : 19Messages : 12

    le Sam 22 Juil 2017 - 11:44

    Merci !
    Destan
    Destan
    MasculinAge : 40Messages : 37

    le Sam 29 Juil 2017 - 18:03

    Merci
    NaLu
    NaLu
    FémininAge : 24Messages : 140

    le Dim 30 Juil 2017 - 0:02

    Merci du partage ^^



    PA tons sombres/rouge avec staff et navigation en hover - Page 15 683430Sanstitre7
    Malizia.
    Malizia.
    FémininAge : 23Messages : 90

    le Mer 2 Aoû 2017 - 1:20

    Merci !
    IReezor
    IReezor
    MasculinAge : 29Messages : 10

    le Mer 2 Aoû 2017 - 2:01

    Très Jolie merci
    Contenu sponsorisé


      La date/heure actuelle est Lun 19 Aoû 2019 - 3:17