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
    Louchita
    FémininAge : 24Messages : 125

    le Ven 17 Oct 2014 - 21:32

    Merci =)



    avatar
    Dark6nika
    FémininAge : 24Messages : 118

    le Sam 18 Oct 2014 - 14:25

    Magnifique, merci beaucoup de partager ♥



    avatar
    Ratatouille
    FémininAge : 23Messages : 26

    le Sam 18 Oct 2014 - 20:50

    tres joli
    merci
    avatar
    ladybr
    FémininAge : 27Messages : 45

    le Dim 26 Oct 2014 - 23:56

    merci
    avatar
    Théandras
    FémininAge : 17Messages : 25

    le Mer 29 Oct 2014 - 14:54

    Mercii
    avatar
    Nymeria.
    FémininAge : 22Messages : 297

    le Jeu 30 Oct 2014 - 21:18

    C'est beau *-*
    avatar
    benficagirl
    FémininAge : 31Messages : 306

    le Lun 3 Nov 2014 - 21:03

    Merci beaucoup :)
    avatar
    Ehawee
    FémininAge : 24Messages : 4627

    le Lun 3 Nov 2014 - 21:26

    Elle est sublime Hallow <3 Je n'en ai pas l'utilité, immédiatement parlant, mais je tenais à le souligner <3



    Absence jusque début juillet pour cause de concours ; merci de vous adresser à d'autres membres du staff Wink


    avatar
    Carcajou
    FémininAge : 27Messages : 59

    le Mar 4 Nov 2014 - 16:40

    Joli ! :love: Merci
    avatar
    catkiller
    FémininAge : 22Messages : 70

    le Mar 11 Nov 2014 - 13:22

    Merci pour ce superbe codage *-*
    avatar
    Celuna
    FémininAge : 27Messages : 124

    le Lun 17 Nov 2014 - 9:05

    C'est très beau : Merci
    avatar
    EverLiam
    FémininAge : 28Messages : 931

    le Lun 17 Nov 2014 - 13:05

    Magnifique ^^





    avatar
    Ange Noiire
    FémininAge : 23Messages : 67

    le Lun 17 Nov 2014 - 16:34

    Merci beaucoup pour cette superbe page d'accueil Very Happy



    avatar
    Edel
    FémininAge : 24Messages : 370

    le Mar 18 Nov 2014 - 2:05

    Merci. :)



    Mon métier et mon art, c'est vivre - Montaigne
    avatar
    Nominia
    FémininAge : 26Messages : 67

    le Mer 19 Nov 2014 - 10:45

    Merci !
    avatar
    Crystal Shadow
    FémininAge : 33Messages : 29

    le Mar 25 Nov 2014 - 17:07

    Très jolie merci Very Happy
    avatar
    Lnou
    FémininAge : 24Messages : 52

    le Mer 26 Nov 2014 - 8:46

    Merci pour ce code, c'est très réussi, je trouve ! :)



    Lnou
    avatar
    Strawberry-Swan
    FémininAge : 25Messages : 195

    le Ven 28 Nov 2014 - 11:39

    Merci du partage !



      avatar
      Moro-PM
      FémininAge : 15Messages : 149

      le Ven 28 Nov 2014 - 13:41

      Meurchi beaucoup, cette PA est vraiment magnifique *^^^*
      avatar
      Calypso Luciano
      FémininAge : 26Messages : 333

      le Sam 29 Nov 2014 - 14:33

      merci ^^
      avatar
      Hyuna
      FémininAge : 20Messages : 96

      le Jeu 4 Déc 2014 - 20:56

      merciiii :3
      avatar
      Invité

      le Sam 13 Déc 2014 - 14:20

      Merci beaucoup !
      avatar
      fregadeth
      MasculinAge : 40Messages : 80

      le Sam 13 Déc 2014 - 14:51

      Merci
      avatar
      Susan Storm
      FémininAge : 37Messages : 77

      le Mer 17 Déc 2014 - 15:54

      Merchiiiiiii
      avatar
      Sweet Angel
      FémininAge : 34Messages : 147

      le Mer 24 Déc 2014 - 12:38

      J'adore! Thanks
      Contenu sponsorisé


        La date/heure actuelle est Mar 17 Oct 2017 - 0:11