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 : 9740

    le Mer 16 Juil 2014 - 21:11

    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 - 18:01, édité 1 fois



    Je mets les voiles, que le vent te soit favorable matelot !
    avatar
    Onyx
    FémininAge : 23Messages : 2910

    le Jeu 17 Juil 2014 - 14:15

    C'est joli *o*



    avatar
    Halloween
    FémininAge : 23Messages : 9740

    le Sam 19 Juil 2014 - 12:04

    Merci =3



    Je mets les voiles, que le vent te soit favorable matelot !
    avatar
    Ozymandias
    MasculinAge : 19Messages : 41

    le Mar 22 Juil 2014 - 19:06

    Merci beaucoup, cette PA est magnifique. Un très bon codage
    avatar
    Catalane
    FémininAge : 23Messages : 110

    le Mer 23 Juil 2014 - 12:26

    Superbe merci Wink




    avatar
    shala
    FémininAge : 25Messages : 213

    le Mer 23 Juil 2014 - 17:46

    merci^^



    avatar
    narakye
    FémininAge : 23Messages : 446

    le Mer 23 Juil 2014 - 18:15

    Comme toujours magnifique
    avatar
    Aile
    FémininAge : 29Messages : 134

    le Mer 23 Juil 2014 - 18:27

    Absolument magnifique! Merci.



    avatar
    Daisy Hardman
    FémininAge : 19Messages : 60

    le Mer 23 Juil 2014 - 22:17

    merci
    avatar
    Little Melody
    FémininAge : 16Messages : 64

    le Jeu 24 Juil 2014 - 16:55

    Merci ♥
    avatar
    Fayzl4D
    MasculinAge : 20Messages : 84

    le Jeu 24 Juil 2014 - 16:57

    merci
    avatar
    Raven Sumire
    FémininAge : 23Messages : 43

    le Jeu 24 Juil 2014 - 22:46

    Merci !!
    avatar
    Célyo
    FémininAge : 25Messages : 41

    le Ven 25 Juil 2014 - 6:35

    c'est très beau
    avatar
    Allison01
    FémininAge : 32Messages : 176

    le Ven 25 Juil 2014 - 10:44

    Merci Very Happy
    avatar
    Tutti-Frutti
    FémininAge : 24Messages : 26

    le Ven 25 Juil 2014 - 15:16

    Merci !
    avatar
    NaLu
    FémininAge : 21Messages : 112

    le Lun 28 Juil 2014 - 14:50

    Merci



    avatar
    O'Daim
    FémininAge : 21Messages : 116

    le Lun 28 Juil 2014 - 22:54

    Oh *^* c'est super joli, merci !
    avatar
    Elora Hanta
    FémininAge : 25Messages : 69

    le Mar 29 Juil 2014 - 18:18

    très beau  Very Happy 
    avatar
    Doan Lavita
    FémininAge : 19Messages : 72

    le Mer 30 Juil 2014 - 10:48

    Superbe... Merci!



    avatar
    Féhéla
    FémininAge : 43Messages : 232

    le Ven 1 Aoû 2014 - 18:35

    Absolument magnifique ^^
    avatar
    Le Dévoreur de temps
    MasculinAge : 37Messages : 57

    le Dim 3 Aoû 2014 - 13:21

    Trop beau, merci !
    avatar
    skaera22
    MasculinAge : 22Messages : 72

    le Dim 3 Aoû 2014 - 14:40

    thx
    avatar
    Stitch56
    FémininAge : 23Messages : 197

    le Lun 4 Aoû 2014 - 20:31

    Marchi ♥
    avatar
    DixieM.
    FémininAge : 25Messages : 49

    le Lun 11 Aoû 2014 - 11:59

    C'est trop beau *-*
    avatar
    Angie H.-Carter
    FémininAge : 33Messages : 687

    le Lun 11 Aoû 2014 - 17:08

    j'aime beaucoup je te le prend en test merci^^



    Your my brillant! You shine into the darkness and you guide me in my life with no fear. I love you so much and i don't want to loose you in my heart. You will be my love forerver. You and me it's like the sky and the sea...This is LIFE!
    Contenu sponsorisé


      La date/heure actuelle est Dim 28 Mai 2017 - 23:57