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 littéraire (positionnement manuel)

    Partagez
    avatar
    Halloween
    FémininAge : 23Messages : 9741

    le Mer 16 Juil 2014 - 23:11

    Rappel du premier message :

    Plop,

    Un nouveau LS basé sur une demande de ryry0013.

    Comme toujours, un merci donne accès aux codes, ça fait toujours plaisir et ça prend pas 20 minutes de vos vies =3

    /!\ Je rappelle que cette section existe en cas de problème, je ne réponds pas aux MP (et encore moins quand ils sont rageux !).



    Page d'Accueil


    HTML & CSS ▬ Les éléments sont dans des divisions placées manuellement
    Aperçu ▬ www


    Il se peut que selon la taille de votre forum vous soyez obligés de repositionner les partenaires et les info-bulles (par le biais des "top" et "left" dans le CSS correspondant).

    CSS
    Code:
    /* -------------------------------- PA -------------------------------- */

    /* Positionnement des liens utiles */
    .liens_utiles {
      position: absolute;
      top: 14em;
      left: 3.5em;
      width: 100px;
      text-align: center;
    }

    /* Mise en forme des liens utiles */
    .liens_utiles a {
      font-family: times new roman;
      color: #20040D !important;
      font-size: 11px !important;
      text-transform: uppercase !important;
      letter-spacing: 1px;
      text-decoration: none !important;
    }

    /* Mise en forme des liens utiles au survol */
    .liens_utiles a:hover {
      color: #856570 !important;
      text-decoration: none !important;
    }

    /* Positionnement des partenaires */
    .partenaires_PA {
      position: absolute;
      top: 17em;
      left: 14.5em;
    }

    /* Positionnement des nouveautés */
    .news_PA {
      position: absolute;
      top: 15.5em;
      left: 28em;
      width: 175px;
      height: 120px;
      overflow: auto;
      text-align: justify;
      font-family: times new roman;
      font-size: 11px;
    }

    /* Mise en forme des liens du bloc "Nouveautés" */
    .news_PA a {
      color: #20040D !important;
      text-transform: uppercase !important;
      letter-spacing: 1px;
      text-decoration: none !important;
    }

    /* Mise en forme des liens du bloc "Nouveautés" au survol */
    .news_PA a:hover {
      color: #856570 !important;
      text-decoration: none !important;
    }

    /* Positionnement du bloc "Professeur dit" */
    .professeurs {
      position: absolute;
      top: 19.5em;
      left: 49.5em;
      width: 230px;
      height: 190px;
      overflow: auto;
      text-align: justify;
      font-family: times new roman;
      font-size: 11px;
      transform: rotate(-5deg);
    }

    /* Positionnement et opacité de la première image du staff */
    .staff_1 {
      position: absolute;
      top: 34em;
      left: 0em;
      opacity: 0.8;
    }

    /* Opacité de la première image du staff en hover */
    .staff_1:hover {
      opacity: 1;
    }

    /* Positionnement et opacité de la seconde image du staff */
    .staff_2 {
      position: absolute;
      top: 34em;
      left: 7em;
      opacity: 0.8;
    }

    /* Opacité de la seconde image du staff en hover */
    .staff_2:hover {
      opacity: 1;
    }

    /* Positionnement et opacité de la troisième image du staff */
    .staff_3 {
      position: absolute;
      top: 34em;
      left: 14em;
      opacity: 0.8;
    }

    /* Opacité de la troisième image du staff en hover */
    .staff_3:hover {
      opacity: 1;
    }

    /* Info-bulle des plumes vedettes */
    a.info{
      position: relative;
      z-index: 24;
      border-radius: 25px;
    }
     
    a.info:hover{
      z-index: 25;
    }
     
    a.info span{
      display: none;
      text-decoration: none !important;
    }
     
    a.info:hover span{
      display: block;
      position: absolute;
      top: -6em;
      left: 0em;
      width: 70px;
      height: 70px;
      border-radius: 50px;
      background-color: #20040D;
      color: #856570;
      text-align: center;
      font-weight: none;
      text-decoration: none !important;
    }

    /* Positionnement du contenu du bloc "Vedettes" */
    .vedettes {
      position: absolute;
      top: 35em;
      left: 27.5em;
    }
    /* -------------------------------- FIN PA -------------------------------- */


    PA
    Code:
    <div style="background-image: url('http://image.noelshack.com/fichiers/2014/29/1405340125-plumeartistiquepa.png'); width: 810px; height: 460px;">
       
       <div style="position: relative;">
          
          <div class="liens_utiles">
              <a href="http://plume-artistique.forumactif.org/t28-reglement-general#112">Règlement</a><br /><br /><a href="http://plume-artistique.forumactif.org/f17-presentation-de-l-artiste">Présentations</a><br /><br /><a href="http://plume-artistique.forumactif.org/c7-salons-des-groupes">Galerie</a><br /><br /><a href="http://plume-artistique.forumactif.org/f67-cours-de-graphisme">Cours <br />graphiques</a><br /><br /><a href="http://plume-artistique.forumactif.org/f68-cours-de-codage">Cours <br />codage</a>
          </div>
          
          <div class="partenaires_PA">
              <select onchange="location = this.value" style="background-color: #d3d3d3; width: 130px; color: #16161a"> <option>Nos amis</option> <option value="#">Lien</option> <option value="#">Lien 2</option> <option value="#">Lien 3</option> <option value="#">Lien 4</option> <option value="#">Lien 5</option></select>
          </div>
          
          <div class="news_PA">
              <span style="color: #856570 !important; font-size: 15px;">∞</span> Id ad ad elegerit eos mercenariae matrimonii est in illis diem incredibile apud. <a href="#">More ?</a><br /><br /><span style="color: #856570 !important; font-size: 15px;">∞</span> Id ad ad elegerit eos mercenariae matrimonii est in illis diem incredibile apud. <a href="#">More ?</a><br /><br /><span style="color: #856570 !important; font-size: 15px;">∞</span> Id ad ad elegerit eos mercenariae matrimonii est in illis diem incredibile apud. <a href="#">More ?</a><br /><br />
          </div>
          
          <div class="professeurs">
              Iura regenda parens Caesaribus patrimonii oppressas leges suis parens urbs cervices superbas efferatarum regenda oppressas superbas Caesaribus post retinacula permisit oppressas fundamenta libertatis oppressas retinacula iura superbas regenda velut et efferatarum retinacula velut dives gentium retinacula permisit velut latasque parens frugi velut et et libertatis iura liberis efferatarum urbs oppressas efferatarum latasque et velut velut venerabilis sempiterna prudens iura urbs oppressas post retinacula Caesaribus liberis prudens cervices tamquam gentium sempiterna libertatis dives permisit venerabilis et libertatis permisit cervices frugi permisit sempiterna et oppressas superbas cervices tamquam efferatarum et et superbas dives et gentium gentium retinacula permisit liberis prudens tamquam permisit. Iura regenda parens Caesaribus patrimonii oppressas leges suis parens urbs cervices superbas efferatarum regenda oppressas superbas Caesaribus post retinacula permisit oppressas fundamenta libertatis oppressas retinacula iura superbas regenda velut et efferatarum retinacula velut dives gentium retinacula permisit velut latasque parens frugi velut et et libertatis iura liberis efferatarum urbs oppressas efferatarum latasque et velut velut venerabilis sempiterna prudens iura urbs oppressas post retinacula Caesaribus liberis prudens cervices tamquam gentium sempiterna libertatis dives permisit venerabilis et libertatis permisit cervices frugi permisit sempiterna et oppressas superbas cervices tamquam efferatarum et et superbas dives et gentium gentium retinacula permisit liberis prudens tamquam permisit.
          </div>
           <img class="staff_1" src="http://image.noelshack.com/fichiers/2014/29/1405340105-plumeartistiqueliensstaff1.png" /> <img class="staff_2" src="http://image.noelshack.com/fichiers/2014/29/1405340105-plumeartistiqueliensstaff2.png" /> <img class="staff_3" src="http://image.noelshack.com/fichiers/2014/29/1405340105-plumeartistiqueliensstaff3.png" />
          <div class="vedettes">
              <a class="info"><img src="http://i39.servimg.com/u/f39/18/43/33/39/4910.png" style="width: 70px; border-radius: 50px;" /><span><br /><br />Pseudo</span></a> <a class="info"><img src="http://i39.servimg.com/u/f39/18/43/33/39/4910.png" style="width: 70px; border-radius: 50px;" /><span><br /><br />Pseudo</span></a>
          </div>
          
       </div>
       
    </div>





    Dernière édition par Halloween le Mar 22 Juil 2014 - 20:01, édité 1 fois



    Je déménage sur NMD o/
    Mon codebook
    avatar
    FREAKS*
    FémininAge : 22Messages : 30

    le Dim 28 Fév 2016 - 18:21

    Merci !
    avatar
    Thanos
    MasculinAge : 21Messages : 79

    le Mer 2 Mar 2016 - 3:37

    Merci beaucoup
    avatar
    Kazumi
    FémininAge : 17Messages : 45

    le Dim 3 Avr 2016 - 19:30

    Merci ! >w
    avatar
    Sadja
    MasculinAge : 19Messages : 74

    le Jeu 7 Avr 2016 - 19:44

    Merci beaucoup *0*
    avatar
    Cruella
    FémininAge : 23Messages : 7

    le Mer 13 Avr 2016 - 2:31

    PA sublime bravo :)



    avatar
    Reids
    FémininAge : 19Messages : 18

    le Ven 15 Avr 2016 - 19:19

    C'est tellement magnifique ! :aww: Bravo !
    avatar
    geen.
    FémininAge : 29Messages : 22

    le Sam 16 Avr 2016 - 22:13

    merci du partage :)
    avatar
    ghost.writer
    FémininAge : 22Messages : 27

    le Lun 25 Avr 2016 - 19:36

    merci beaucoup, j'cherchais justement à savoir comment faire ce genre de pa Razz :heart:



    uc
    avatar
    Dyrion
    MasculinAge : 20Messages : 3

    le Ven 6 Mai 2016 - 21:38

    Merci pour ce LS Very Happy
    avatar
    Pikabouh
    FémininAge : 15Messages : 123

    le Dim 15 Mai 2016 - 12:35

    Merci :')
    avatar
    0smose
    FémininAge : 21Messages : 164

    le Lun 16 Mai 2016 - 16:00

    Merci beaucoup ! :3





    But I'm only human
    And I bleed when I fall down... I'm only human and I crash and I break down. Your words in my head,
    knives in my heart. You build me up and then I fall apart.
    'Cause I'm only human.
    avatar
    Ciàran
    FémininAge : 27Messages : 185

    le Ven 27 Mai 2016 - 17:27

    merci beaucoup
    avatar
    Evalla
    FémininAge : 24Messages : 43

    le Dim 29 Mai 2016 - 18:27

    merci
    avatar
    Nausicäa Kaer
    FémininAge : 23Messages : 158

    le Ven 17 Juin 2016 - 22:53

    Merciiiiii
    avatar
    Venise
    FémininAge : 34Messages : 270

    le Mer 22 Juin 2016 - 11:15

    merci
    avatar
    OMJ
    FémininAge : 27Messages : 91

    le Mar 28 Juin 2016 - 19:09

    merci beaucoup :)
    avatar
    Argimpasa
    FémininAge : 26Messages : 85

    le Mar 19 Juil 2016 - 22:39

    Merci Very Happy
    avatar
    MissDream
    FémininAge : 22Messages : 144

    le Jeu 21 Juil 2016 - 17:49

    Sublime *.*

    avatar
    Kacisse
    FémininAge : 20Messages : 43

    le Lun 1 Aoû 2016 - 21:07

    très beau ! merci :)
    avatar
    aryanon
    MasculinAge : 20Messages : 50

    le Ven 12 Aoû 2016 - 18:51

    Merci Very Happy
    avatar
    [LT]BountyS4
    MasculinAge : 21Messages : 57

    le Ven 12 Aoû 2016 - 23:04

    Merci beaucoup !



    avatar
    Addixon
    FémininAge : 23Messages : 40

    le Mer 17 Aoû 2016 - 17:08

    merci!
    avatar
    Leak
    FémininAge : 19Messages : 14

    le Mer 31 Aoû 2016 - 0:12

    Merci!
    avatar
    Tatia38
    FémininAge : 28Messages : 304

    le Ven 2 Sep 2016 - 10:03

    sublime merci
    avatar
    Lughnassadh
    FémininAge : 26Messages : 17

    le Mar 6 Sep 2016 - 13:14

    How, c'est beau, merci !
    Contenu sponsorisé


      La date/heure actuelle est Mer 18 Oct 2017 - 9:25