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/
    avatar
    Lust Caution
    FémininAge : 22Messages : 79

    le Lun 8 Sep 2014 - 18:34

    Je reste sans voix ! Magnifique.
    avatar
    Dadash_Pearl
    FémininAge : 25Messages : 40

    le Mar 9 Sep 2014 - 12:27

    Merci beaucoup Very Happy
    avatar
    Depp
    FémininAge : 26Messages : 298

    le Mar 9 Sep 2014 - 14:49

    Un grand merci :) c'est super chouette **



    avatar
    Asuka
    FémininAge : 23Messages : 104

    le Jeu 11 Sep 2014 - 13:23

    merci !!



    avatar
    MOON LEE
    FémininAge : 23Messages : 146

    le Jeu 11 Sep 2014 - 14:05

    Super!
    Merci!
    avatar
    Cassiopée is me
    FémininAge : 18Messages : 22

    le Jeu 11 Sep 2014 - 17:53

    Merci c'est splendide
    avatar
    Sentenza
    MasculinAge : 32Messages : 95

    le Jeu 11 Sep 2014 - 20:50

    Merci, très beau!
    avatar
    Kadence
    FémininAge : 35Messages : 55

    le Mar 16 Sep 2014 - 13:39

    Merci Very Happy
    avatar
    Saya Shirayuki
    FémininAge : 24Messages : 149

    le Mer 17 Sep 2014 - 15:11

    Vraiment superbe !
    avatar
    louha
    FémininAge : 29Messages : 213

    le Jeu 18 Sep 2014 - 2:27

    magnifique **
    avatar
    Hana Evali
    FémininAge : 27Messages : 164

    le Ven 19 Sep 2014 - 15:22

    Superbe !



    avatar
    SamyChou
    FémininAge : 20Messages : 31

    le Ven 19 Sep 2014 - 15:59

    C'est magnifique !!
    Un grand merci pour la partage ! ♥
    avatar
    phenixia74
    FémininAge : 38Messages : 32

    le Ven 19 Sep 2014 - 21:35

    Merci beaucoup pour ces codes Wink
    avatar
    Lissandra
    FémininAge : 19Messages : 7

    le Ven 19 Sep 2014 - 22:03

    Très belle page, bravo. :)
    avatar
    Phoenicia Collart
    FémininAge : 20Messages : 15

    le Ven 19 Sep 2014 - 23:36

    merci
    avatar
    liliebia
    FémininAge : 29Messages : 64

    le Dim 21 Sep 2014 - 17:34

    Merci ♥
    avatar
    Socrazy
    FémininAge : 29Messages : 11

    le Ven 26 Sep 2014 - 12:04

    Très belle PA, merci Wink
    avatar
    Insolence
    FémininAge : 25Messages : 23

    le Mar 30 Sep 2014 - 17:03

    Merci!
    avatar
    Pollux
    FémininAge : 26Messages : 96

    le Sam 4 Oct 2014 - 18:16

    Erciiii
    avatar
    White Lady
    FémininAge : 25Messages : 28

    le Lun 6 Oct 2014 - 22:27

    merci !
    avatar
    Kyuusei Ban
    FémininAge : 24Messages : 54

    le Mer 8 Oct 2014 - 16:05

    Merci, c'est super beau ^^ !
    avatar
    picka234
    Age : 52Messages : 440

    le Ven 10 Oct 2014 - 14:31

    ho c'est jolie merci



    Catblack
    FémininAge : 21Messages : 85

    le Dim 12 Oct 2014 - 16:30

    J'adore j'adore merci
    avatar
    Odanno
    MasculinAge : 23Messages : 11

    le Lun 13 Oct 2014 - 13:47

    Merchi beauwcoup l'ami
    avatar
    C. Hook
    FémininAge : 19Messages : 45

    le Mar 14 Oct 2014 - 18:56

    Merci ! <3
    Contenu sponsorisé


      La date/heure actuelle est Jeu 17 Aoû 2017 - 7:44