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
    Djeina
    FémininAge : 20Messages : 233

    le Dim 16 Aoû 2015 - 4:55

    J'adore. Merci pour le partage ^_^
    avatar
    Allya33
    FémininAge : 16Messages : 41

    le Ven 28 Aoû 2015 - 16:31

    C'est super beau, merci ♥
    avatar
    Tinkky
    FémininAge : 26Messages : 82

    le Mer 9 Sep 2015 - 15:29

    Vraiment jolie. Merci du partage ^_^
    avatar
    pawnee
    FémininAge : 27Messages : 21

    le Jeu 15 Oct 2015 - 21:06

    canon ! merci du partage!
    avatar
    Amacky
    FémininAge : 24Messages : 125

    le Ven 16 Oct 2015 - 12:14

    Magnifique comme toujours merci :)
    avatar
    SvenO
    MasculinAge : 23Messages : 78

    le Mer 4 Nov 2015 - 18:35

    C'est très beau ! Very Happy



    avatar
    Elodothe
    FémininAge : 22Messages : 9

    le Sam 28 Nov 2015 - 0:29

    Merci du partage, elle est très jolie!
    avatar
    Myrcella Heaven
    FémininAge : 20Messages : 53

    le Ven 4 Déc 2015 - 15:22

    Merci !
    avatar
    Miawcormick
    FémininAge : 23Messages : 11

    le Ven 4 Déc 2015 - 22:37

    Oh mais c'est magnifique, j'aime beaucpup ! *-*
    avatar
    Sly King
    FémininAge : 20Messages : 72

    le Dim 6 Déc 2015 - 14:00

    Merci du partage ♥
    avatar
    satine-chan
    FémininAge : 29Messages : 31

    le Dim 20 Déc 2015 - 21:45

    Merci beaucoup pour ce partage. *_*
    avatar
    Yamoto
    FémininAge : 15Messages : 13

    le Mar 22 Déc 2015 - 22:02

    Merci
    avatar
    Kaimie
    FémininAge : 18Messages : 52

    le Ven 25 Déc 2015 - 4:05

    Merci ! ^^
    avatar
    Kitket
    FémininAge : 33Messages : 93

    le Mer 30 Déc 2015 - 20:24

    MErci
    avatar
    naah
    FémininAge : 22Messages : 66

    le Jeu 31 Déc 2015 - 18:40

    Merci ♥
    avatar
    olibo31
    MasculinAge : 31Messages : 14

    le Dim 3 Jan 2016 - 17:02

    Hello, je trouve ça très chouette, merci :)
    avatar
    noksye
    FémininAge : 25Messages : 51

    le Ven 8 Jan 2016 - 23:44

    Merci !
    avatar
    Invité

    le Sam 9 Jan 2016 - 16:43

    Merci beaucoup :love:
    avatar
    Yumeki
    FémininAge : 24Messages : 136

    le Dim 31 Jan 2016 - 20:27

    OMG c'est beau !
    avatar
    Brume Sauvage
    FémininAge : 24Messages : 35

    le Lun 1 Fév 2016 - 12:43

    C'est beau ! Merci :3
    avatar
    Tchii
    FémininAge : 31Messages : 221

    le Ven 12 Fév 2016 - 22:00

    Coucou!
    Merci pour ce petit code.
    Et bravo pour le travail.
    A trés vite!
    Tchii.
    avatar
    Elissane
    FémininAge : 16Messages : 31

    le Lun 15 Fév 2016 - 1:24

    Juste magnifique!
    avatar
    beza
    FémininAge : 21Messages : 42

    le Sam 27 Fév 2016 - 11:47

    Merci !
    avatar
    Zuiichi
    MasculinAge : 23Messages : 115

    le Sam 27 Fév 2016 - 12:55

    Merci pour ce magnifique codage =)



    avatar
    Alkaïne
    FémininAge : 16Messages : 19

    le Sam 27 Fév 2016 - 21:13

    Merci c:
    Contenu sponsorisé


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