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
    Halloween
    FémininAge : 22Messages : 9733

    le Mer 16 Juil 2014 - 21: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 - 18:01, édité 1 fois



    Je mets les voiles, que le vent te soit favorable matelot !
    Ekinox
    FémininAge : 22Messages : 15

    le Mar 19 Mai 2015 - 1:27

    C'est malade *-*
    Little--Angel
    FémininAge : 20Messages : 46

    le Mar 19 Mai 2015 - 14:36

    C'est magnifique *_*
    The Mad Hatter
    MasculinAge : 22Messages : 29

    le Mer 20 Mai 2015 - 15:38

    c'est super joli (l)



    Le meilleur moyen de réaliser l’impossible est de croire que c’est possible.
    Samluna
    FémininAge : 17Messages : 96

    le Mer 20 Mai 2015 - 17:34

    Roh god O_O C'est vachement beau... Les couleurs, le positionnement de chaque truc, les polices d'écriture, les images TOUT est parfait ! *bave* xD




    Priez pour Paris. Priez pour la liberté.
    Priez pour Paris. Priez pour l'égalité.
    Priez pour Paris. Pour la fraternité.

    #Pray for Paris
    Deamyx
    MasculinAge : 21Messages : 137

    le Jeu 21 Mai 2015 - 0:45

    Merci c'est très beau
    SunshineD
    FémininAge : 27Messages : 94

    le Mer 27 Mai 2015 - 3:54

    C'est superbe! :love:
    MLD
    FémininAge : 23Messages : 82

    le Ven 29 Mai 2015 - 6:08

    Merci du partage !
    Mystick
    FémininAge : 31Messages : 84

    le Dim 31 Mai 2015 - 20:46

    C'est la plus belle de toutes **
    Orange Sanguine
    FémininAge : 20Messages : 75

    le Lun 8 Juin 2015 - 2:17

    Woah *-* Merci c'est magnifique !



    Madras
    FémininAge : 31Messages : 255

    le Lun 8 Juin 2015 - 6:50

    Très joli
    Prisver
    FémininAge : 16Messages : 33

    le Mer 10 Juin 2015 - 17:28

    Merci. ~
    kreou
    FémininAge : 26Messages : 50

    le Mer 17 Juin 2015 - 3:10

    C'est vraiment très joli ! Merci !
    Foxe
    FémininAge : 16Messages : 122

    le Mar 23 Juin 2015 - 12:37

    Merci, c'est super beau !



    LyN[ss]
    FémininAge : 25Messages : 102

    le Mar 23 Juin 2015 - 14:32

    P.A toute aussi classe que le QEEL lui correspondant, encore une fois merci ! =D



    ❝Y.O.U G.E.T L.Y.N.[.S.S.].'.E.D❞
    how could you hate me? When all I ever wanted to be was you ? How could you love me? When all you ever gave me were open wounds ? Tell me why you broke me down and betrayed my trust in you ?
    Kaamee
    FémininAge : 21Messages : 110

    le Jeu 25 Juin 2015 - 15:25

    Merci ♥



    Aurifereis
    MasculinAge : 23Messages : 39

    le Mar 30 Juin 2015 - 19:56

    très sympa, merci du partage :)
    Atomixy
    MasculinAge : 20Messages : 28

    le Jeu 2 Juil 2015 - 10:48

    Woaw **
    Zibeline
    FémininAge : 31Messages : 76

    le Mar 7 Juil 2015 - 9:20

    Magnifique :love:
    Kamiiou
    FémininAge : 21Messages : 50

    le Lun 13 Juil 2015 - 14:45

    Vraiment superbe, merci !
    LatInna
    FémininAge : 21Messages : 22

    le Mar 28 Juil 2015 - 16:21

    Wow c'est sublime !!
    Merci beaucoup Very Happy
    Nighthayah
    FémininAge : 29Messages : 69

    le Mer 29 Juil 2015 - 22:22

    magnifique
    Kobye
    FémininAge : 20Messages : 37

    le Mar 4 Aoû 2015 - 22:52

    merci!
    Kelalin
    FémininAge : 24Messages : 1439

    le Mer 5 Aoû 2015 - 9:24

    Thank youuu ! (*´・v・)
    Myrlu
    FémininAge : 27Messages : 9

    le Dim 9 Aoû 2015 - 11:58

    Superbe merci ♥
    Mercurion
    MasculinAge : 22Messages : 58

    le Ven 14 Aoû 2015 - 9:47

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Lun 20 Fév 2017 - 15:25