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 :
Coffret dresseur d’élite ETB ...
Voir le deal
56.90 €

    PA tons sombres/rouge avec staff et navigation en hover

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

    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



    Nuagia
    Nuagia
    MasculinAge : 25Messages : 7

    Dim 16 Nov 2014 - 11:34

    Je vais donc emprunter cette PA un petit moment, merci vraiment de nous offrir ce code !
    picka234
    picka234
    FémininAge : 59Messages : 636

    Dim 16 Nov 2014 - 18:49

    cheers j aime beaucoup!!!!
    Celuna
    Celuna
    FémininAge : 33Messages : 133

    Lun 17 Nov 2014 - 9:36

    C'est mimi, merci pour ce magnifique partage
    Nominia
    Nominia
    FémininAge : 33Messages : 67

    Ven 21 Nov 2014 - 17:58

    Merci !
    Deamyx
    Deamyx
    MasculinAge : 28Messages : 237

    Sam 22 Nov 2014 - 0:42

    Vraiment un superbe travail merci.
    DarkEve
    DarkEve
    FémininAge : 36Messages : 21

    Sam 22 Nov 2014 - 16:20

    Superbe !! Merci du partage ! :love:



    PA tons sombres/rouge avec staff et navigation en hover - Page 3 Tumblr_mgwfuya5P71qgd9bmo10_500
    Gabriiielle
    Gabriiielle
    FémininAge : 32Messages : 53

    Sam 22 Nov 2014 - 16:59

    merci du partage c'est très beau !
    Anonymous
    Invité

    Sam 22 Nov 2014 - 17:23

    Très jolie PA, merci :)
    Anonymous
    Invité

    Lun 24 Nov 2014 - 11:29

    j'iame beaucou^p :)
    arvalis
    arvalis
    FémininAge : 29Messages : 55

    Mer 26 Nov 2014 - 17:58

    merci merci, c'est un très joli thème =)
    Shanyme Thibolt
    Shanyme Thibolt
    FémininAge : 30Messages : 156

    Mer 26 Nov 2014 - 18:10

    Merci beaucoup pour le partage.
    x_Titia
    x_Titia
    FémininAge : 33Messages : 92

    Sam 29 Nov 2014 - 11:45

    Superbe! Merci du partage! :)
    Nileeda
    Nileeda
    FémininAge : 27Messages : 42

    Sam 29 Nov 2014 - 16:34

    Merci :)
    AwenWolf
    AwenWolf
    FémininAge : 35Messages : 76

    Jeu 4 Déc 2014 - 15:59

    Merci *_*
    Reishi
    Reishi
    MasculinAge : 30Messages : 148

    Jeu 4 Déc 2014 - 20:09

    Impec, merci !
    Haniwa
    Haniwa
    FémininAge : 29Messages : 206

    Jeu 4 Déc 2014 - 21:22

    Merci
    Fame
    Fame
    MasculinAge : 34Messages : 240

    Jeu 4 Déc 2014 - 22:04

    Je veux bien voir ce que ça donnera sur mon forum et merci beaucoup Very Happy
    kyoichii
    kyoichii
    MasculinAge : 29Messages : 32

    Sam 6 Déc 2014 - 8:30

    Merci!
    Kahlan
    Kahlan
    FémininAge : 37Messages : 371

    Sam 6 Déc 2014 - 10:26

    Très belle PA ! Merci beaucoup !
    cali60
    cali60
    FémininAge : 38Messages : 58

    Sam 6 Déc 2014 - 16:20

    merci :)
    pixelman
    pixelman
    FémininAge : 43Messages : 241

    Sam 6 Déc 2014 - 19:19

    Sympa la PA *.* Merci




    Vit pour manger que de manger pour vivre !
    Citation du jour a écrit:"C'est avec une main sur le coeur que je te dis 'je t'aime',
    mais c'est avec un sourire que je te dis 'je te hais'.... "

    Sachem
    Sachem
    FémininAge : 27Messages : 51

    Dim 7 Déc 2014 - 17:25

    thks :love:
    Dydy
    Dydy
    FémininAge : 33Messages : 493

    Mar 9 Déc 2014 - 20:40

    merci du partage



    PA tons sombres/rouge avec staff et navigation en hover - Page 3 27978_signature_never_utopia_dydy_2
    avatar
    Catblack
    FémininAge : 28Messages : 85

    Mer 10 Déc 2014 - 18:04

    merci !!
    Yumi-chan
    Yumi-chan
    FémininAge : 30Messages : 67

    Jeu 11 Déc 2014 - 1:16

    C'est super, merci pour ce bel partage !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 13:32