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 : 22Messages : 9734

    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 mets les voiles, que le vent te soit favorable matelot !
    avatar
    Pastomaniac
    FémininAge : 20Messages : 194

    le Lun 11 Aoû 2014 - 19:31

    Merciii c'est trop beau, comme d'hab ! *o*



    avatar
    Cruelly
    FémininAge : 23Messages : 2519

    le Lun 11 Aoû 2014 - 22:57

    magnifique merci ^^



    Construction d'un forum en cours ! Vous pouvez me donner votre avis ou m'apporter votre soutiens dans mon WIP :coeur:
    avatar
    Afterglow.winter
    FémininAge : 21Messages : 135

    le Mer 13 Aoû 2014 - 0:47

    Superbe  :love: 



    How do you get up from an all time low?
    avatar
    Liliumini
    FémininAge : 21Messages : 55

    le Jeu 14 Aoû 2014 - 10:23

    Merci du partage!
    avatar
    Sheo
    FémininAge : 25Messages : 26

    le Lun 18 Aoû 2014 - 0:05

    Merci !!!
    avatar
    Chione
    MasculinAge : 16Messages : 396

    le Lun 18 Aoû 2014 - 17:52

    Merci!




    FEZ!FEZ!
    avatar
    Dydy
    FémininAge : 26Messages : 489

    le Lun 18 Aoû 2014 - 18:13

    merci du partage!



    avatar
    Rynkka
    FémininAge : 18Messages : 117

    le Mar 19 Aoû 2014 - 17:56

    Merci!



    avatar
    Wild
    FémininAge : 21Messages : 57

    le Jeu 21 Aoû 2014 - 20:37

    Vraiment esthétique, merci !



    avatar
    bananecuite
    FémininAge : 21Messages : 17

    le Jeu 21 Aoû 2014 - 21:15

    je prends. *-*
    avatar
    Raween
    FémininAge : 25Messages : 109

    le Jeu 21 Aoû 2014 - 21:38

    Merci beaucoup ^^
    avatar
    MissMali
    FémininAge : 29Messages : 12

    le Ven 22 Aoû 2014 - 21:58

    Merci !
    avatar
    Ailou ~3
    FémininAge : 17Messages : 61

    le Sam 23 Aoû 2014 - 19:28

    Merci pour le partage ! Very Happy
    avatar
    demdre
    FémininAge : 22Messages : 24

    le Jeu 28 Aoû 2014 - 13:52

    j'adore ce kit ^^
    avatar
    petit lu
    FémininAge : 24Messages : 164

    le Dim 31 Aoû 2014 - 11:51

    Merci ♥
    avatar
    Rumi
    FémininAge : 29Messages : 10

    le Mar 2 Sep 2014 - 4:14

    Merci :love:
    avatar
    Kathee
    FémininAge : 23Messages : 579

    le Jeu 4 Sep 2014 - 14:59

    C'est tellement beau *___*
    avatar
    Nemesyss
    FémininAge : 26Messages : 29

    le Ven 5 Sep 2014 - 8:20

    c'est super merci Very Happy
    avatar
    San'ji
    FémininAge : 24Messages : 29

    le Sam 6 Sep 2014 - 18:00

    Sublime !! ♥



    avatar
    Mikasa
    FémininAge : 19Messages : 155

    le Dim 7 Sep 2014 - 4:17

    merci ! elle est juste trop magnifique !



    [center]
    avatar
    Euterpe
    FémininAge : 30Messages : 265

    le Dim 7 Sep 2014 - 14:17

    Merci!
    avatar
    ColorTime'Less
    FémininAge : 19Messages : 93

    le Dim 7 Sep 2014 - 14:34

    Parfait *o*
    Merci !
    avatar
    Calliste
    FémininAge : 24Messages : 30

    le Dim 7 Sep 2014 - 17:29

    je suis fan *.*
    avatar
    Junior.
    FémininAge : 19Messages : 76

    le Dim 7 Sep 2014 - 17:50

    Merci beaucoup ! **
    avatar
    petit lu
    FémininAge : 24Messages : 164

    le Dim 7 Sep 2014 - 23:02

    Merci pour le code
    Contenu sponsorisé


      La date/heure actuelle est Mer 22 Mar 2017 - 23:07