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 grise simple avec infobulles

    Partagez
    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Sam 6 Sep 2014 - 15:36

    Rappel du premier message :

    PA

    Voici une PA grise avec plusieurs effets: un défilement vers la gauche de l'image recouvrant le texte central, et des infobulles lorsqu'on survole les images du staff. Tous les liens sont à compléter, ainsi que les images, et éventuellement la police des titres. Les endroits en gris foncé sont destinés à accueillir des images; la grande fait 226px de haut et 221 de large, et les petites images du staff 30x30 et s'arrondissent toutes seules (=
    Cette PA est également adaptable en largeur, au niveau de la partie à l'extrême droite qui joue le rôle de "tampon" en s'adaptant.
    Spoiler:




    Et pour vous donner une idée de ce que ça donne une fois tous les images / liens ajoutés (image par Screen, merci à elle !) http://i39.servimg.com/u/f39/18/98/10/80/quand_12.jpg



    Le HTML

    Pour commencer, voici la structure à remplir. A priori, tous les endroits où il manque une information sont très visibles. Il faut coller ce code dans votre panneau d'admin -> Affichage -> Page d'accueil -> Généralités.

    Par contre, pour remplir ce code je vous déconseille de le coller directement dans son emplacement final. En effet ce champ n'est pas dédié à l'édition de HTML, il n'y a donc aucune couleur, et l'indentation du texte est peu lisible. Utilisez plutôt un éditeur HTML pour remplir le code, comme il y en a un dans modules-> gestion des codes HTML, avant de finalement déplacer votre code vers la page d'accueil.


    Code:
    <table id="PA" style="background-image: url(ADRESSE DE VOTRE IMAGE DE FOND);">
      <tbody>
        <tr>
          <td id="case1">
            <div id="navigation">
              <span class="titrePA">Barre de Navigation</span><br/>
              <a href="ADRESSE DU LIEN" class="lienfonce">Lien 1</a><br />
              <a href="ADRESSE DU LIEN" class="lienclair">Lien 2</a><br />
              <a href="ADRESSE DU LIEN" class="lienfonce">Lien 3</a><br />
              <a href="ADRESSE DU LIEN" class="lienclair">Lien 4</a><br />
              <a href="ADRESSE DU LIEN" class="lienfonce">Lien 5</a><br />
              <a href="ADRESSE DU LIEN" class="lienclair">Lien 6</a><br />
              <a href="ADRESSE DU LIEN" class="lienfonce">Lien 7</a><br />
            </div>
            <div id="annonces">
              <span class="titrePA">Annonces</span><br/>
              <em>00.00.2014</em> Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet
              <hr />
              <em>00.00.2014</em> Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet
              <hr />
              <em>00.00.2014</em> Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet
              <hr />
              <em>00.00.2014</em> Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet
              <hr />
            </div>
          </td>
          <td id="case2">
            <div id="defilant">
              <span class="titrePA">"Project Revival"</span><br/>
              <em>PROJECT REVIVAL, selon Hassan</em>Utque proeliorum periti rectores primo catervas densas opponunt et fortes, deinde leves armaturas, post iaculatores ultimasque subsidiales acies, si fors adegerit, iuvaturas, ita praepositis urbanae familiae suspensae digerentibus sollicite, quos insignes faciunt virgae dexteris aptatae velut tessera data castrensi iuxta vehiculi frontem omne textrinum incedit: huic atratum coquinae iungitur ministerium, dein totum promiscue servitium cum otiosis plebeiis de vicinitate coniunctis: postrema multitudo spadonum a senibus in pueros desinens, obluridi distortaque lineamentorum conpage deformes, ut quaqua incesserit quisquam cernens mutilorum hominum agmina detestetur memoriam Samiramidis reginae illius veteris, quae teneros mares castravit omnium prima velut vim iniectans naturae, eandemque ab instituto cursu retorquens, quae inter ipsa oriundi crepundia per primigenios seminis fontes tacita quodam modo lege vias propagandae posteritatis ostendit.
            </div>
            <div id="imagePA" style="background-image:url(ADRESSE DE VOTRE IMAGE)"></div>
          </td>
          <td rowspan="2">
            <div class="staffPA">
              <img src="ADRESSE DE VOTRE IMAGE" />
              <div class="infostaff" style="background-image:url(ADRESSE DE VOTRE IMAGE); position: absolute; top: -5px; left:40px;";><em>Autriche</em><br />Admin<br /<br /><a href="ADRESSE DU LIEN MP">MP</a><a href="ADRESSE DU LIEN PROFIL">PROFIL</a></div>
            </div> 
            <div class="staffPA">
              <img src="ADRESSE DE VOTRE IMAGE" />
              <div class="infostaff" style="background-image:url(ADRESSE DE VOTRE IMAGE)";><em>Autriche</em><br />Admin<br /<br /><a href="ADRESSE DU LIEN MP">MP</a><a href="ADRESSE DU LIEN PROFIL">PROFIL</a></div>
            </div>
            <div class="staffPA">
              <img src="ADRESSE DE VOTRE IMAGE" />
              <div class="infostaff" style="background-image:url(ADRESSE DE VOTRE IMAGE)";><em>Autriche</em><br />Admin<br /<br /><a href="ADRESSE DU LIEN MP">MP</a><a href="ADRESSE DU LIEN PROFIL">PROFIL</a></div>
            </div>
            <div class="staffPA">
              <img src="ADRESSE DE VOTRE IMAGE" />
              <div class="infostaff" style="background-image:url(ADRESSE DE VOTRE IMAGE)";><em>Autriche</em><br />Admin<br /<br /><a href="ADRESSE DU LIEN MP">MP</a><a href="ADRESSE DU LIEN PROFIL">PROFIL</a></div>
            </div>
            <div class="staffPA">
              <img src="ADRESSE DE VOTRE IMAGE" />
              <div class="infostaff" style="background-image:url(ADRESSE DE VOTRE IMAGE)";><em>Autriche</em><br />Admin<br /<br /><a href="ADRESSE DU LIEN MP">MP</a><a href="ADRESSE DU LIEN PROFIL">PROFIL</a></div>
            </div>
            <div class="staffPA">
              <img src="ADRESSE DE VOTRE IMAGE" />
              <div class="infostaff" style="background-image:url(ADRESSE DE VOTRE IMAGE)";><em>Autriche</em><br />Admin<br /<br /><a href="ADRESSE DU LIEN MP">MP</a><a href="ADRESSE DU LIEN PROFIL">PROFIL</a></div>
            </div>
            <div class="staffPA">
              <img src="ADRESSE DE VOTRE IMAGE" />
              <div class="infostaff" style="background-image:url(ADRESSE DE VOTRE IMAGE); position: absolute; top: -35px; left:40px;";><em>Autriche</em><br />Admin<br /<br /><a href="ADRESSE DU LIEN MP">MP</a><a href="ADRESSE DU LIEN PROFIL">PROFIL</a></div>
            </div>
          </td>
          <td id="case4" rowspan="2">
            <span class="titrePA">Contexte</span>
            <div id="contextePA">Utque proeliorum periti rectores primo catervas densas opponunt et fortes, deinde leves armaturas, post iaculatores ultimasque subsidiales acies, si fors adegerit, iuvaturas, ita praepositis urbanae familiae suspensae digerentibus sollicite, quos insignes faciunt virgae dexteris aptatae velut tessera data castrensi iuxta vehiculi frontem omne textrinum incedit: huic atratum coquinae iungitur ministerium, dein totum promiscue servitium cum otiosis plebeiis de vicinitate coniunctis: postrema multitudo spadonum a senibus in pueros desinens, obluridi distortaque lineamentorum conpage deformes, ut quaqua incesserit quisquam cernens mutilorum hominum agmina detestetur memoriam Samiramidis reginae illius veteris, quae teneros mares castravit omnium prima velut vim iniectans naturae, eandemque ab
            </div>
            <center>
            <span class="titrePA">Votez pour nous !</span><br/>
            <a href="ADRESSE DU LIEN"><img src="ADRESSE DE VOTRE IMAGE DE LAPIN°°" /></a><a href="ADRESSE DU LIEN"><img src="ADRESSE DE VOTRE IMAGE DE LAPIN°°" /></a><a href="ADRESSE DU LIEN"><img src="ADRESSE DE VOTRE IMAGE DE LAPIN°°" /></a>
            </center>
          </td>
          <td id="case5">
          </td>
        </tr>
        <tr id="footerPA">
          <td colspan="2">
            Tous droits réservés. Forum optimisé pour Chrome. <span style="font-size: 7px; color: gray;">Never-Utopia</span>
          </td>
        </tr>
      </tbody>
    </table>


    Le CSS
    Ok. Si vous regardez dès à présent ce que ça donne, vous allez tomber des nues, le résultat est vraiment laid. Mais pas de panique, il manque encore le CSS, qui va donner des couleurs et une forme plus convenable à tout ceci. (vous trouverez le CSS dans Affichage->Couleurs -> feuille de style CSS)
    Ajoutez-y ce code, puis validez Very Happy
    Code:

    /*PA par Alu' pour Never-Utopia*/

    #PA {background: #E0E0E0;font-size:10px; background-position: right top;}
    .titrePA{font-size:16px; font-family: Georgia, cursive; color:#006699;}
    #case4{vertical-align:top;}
    #case5{width:600px;}


    #navigation {width:169px; height:105px;}
    #navigation a{text-decoration: none; color: #006699;}

    .lienfonce {
      display:inline-block;
      background:#BDBDBD;
      width:100%;
      text-indent: 7px;
      }
    .lienclair{
      display:inline-block;
      background:#D8D8D8;
      width:100%;
      text-indent: 7px;
      }

    #annonces {
      height:111px;
      width: 159px;
      overflow:auto;
      padding:5px;
      font-family: cursive;
      font-size: 9px;
      background-color: #DADADA;
      }

    #annonces em, #defilant em {color:#006699;}

    #case2{
      position:relative;
      width:221px;
      height:226px;
      overflow:hidden;
      padding:0;
    }
    #defilant{
      position:relative;
      width:211px;
      height:216px;
      margin-top: -3px;
      overflow: auto;
      padding:5px;
      background-color: #DADADA;
    }
    #imagePA{
      position: absolute;
      top:0;
      left: 0;
      width:221px;
      height:226px;
      background-color:gray;
      -moz-transition: all 1s ease;
      -webkit-transition: all 1s ease;
      -o-transition: all 1s ease;
      transition: all 1s ease;
    }

    #case2:hover > #imagePA{margin-left: -221px;}

    #contextePA{
      width: 183px;
      height: 110px;
      padding: 5px;
      overflow: auto;
      margin-bottom: 15px;
      background-color: #DADADA;
      }

    .infostaff{
      position:absolute;
      top:-20;
      left:40px;
      opacity:0;
      visibility: hidden;
      height: 50px;
      width: 130px;
      background:#DADADA;
      background-position: left top;
      text-align: center;
      padding:10px;
      text-decoration: italic;
      -moz-transition: all 0.5s ease;
      -webkit-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
      -moz-box-shadow: 0px 0px 2px 0px #656565;
      -webkit-box-shadow: 0px 0px 2px 0px #656565;
      -o-box-shadow: 0px 0px 2px 0px #656565;
      box-shadow: 0px 0px 2px 0px #656565;
      filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=2);
      }

    .staffPA:hover > .infostaff{opacity:1; visibility: visible;}
    .infostaff em{color: #870808; font-size: 14px;}
    .infostaff a{color: black; text-decoration: none;}

    .staffPA {
      position:relative; 
      height: 30px;
      width: 30px;
      margin:5px;
      background-color: grey;
      border-radius: 50%;
    }
    .staffPA img{border-radius: 50%; overflow:hidden; height: 30px; width: 30px;}
    #footerPA {font-variant:small-caps; font-size: 9px; color: grey;}

    Et voilà, c'est terminé ! Laissez le crédit s'il vous plaît, il ne prend que peu de place (=

    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.


    Dernière édition par Alumine le Lun 8 Sep 2014 - 21:31, édité 1 fois
    avatar
    Nearween
    FémininAge : 19Messages : 208

    le Sam 10 Jan 2015 - 13:42

    merci pour le code ;D





    Stand by Me
    avatar
    Evil Queen 4ever
    FémininAge : 25Messages : 60

    le Sam 10 Jan 2015 - 15:58

    super





    avatar
    Boou
    FémininAge : 25Messages : 49

    le Sam 10 Jan 2015 - 16:45

    J'aime beaucoup cette PA. Elle est très jolie. Merci beaucoup ! c:
    avatar
    PLOIM
    FémininAge : 20Messages : 52

    le Sam 24 Jan 2015 - 16:34

    Merci pour le partage !
    avatar
    Hylia
    FémininAge : 18Messages : 97

    le Lun 16 Fév 2015 - 11:34

    Merci!



    avatar
    Zaidko
    FémininAge : 15Messages : 81

    le Mer 18 Fév 2015 - 14:31

    merci :3
    avatar
    Maya Seiko
    FémininAge : 24Messages : 122

    le Jeu 19 Fév 2015 - 6:29

    Merci beaucoup! :)
    avatar
    okeane
    FémininAge : 27Messages : 93

    le Mar 24 Fév 2015 - 23:08

    merci =)
    avatar
    Invité

    le Mer 25 Fév 2015 - 14:43

    MERCI
    avatar
    kreou
    FémininAge : 27Messages : 50

    le Jeu 26 Fév 2015 - 19:00

    Merci beaucoup ! :friends:
    avatar
    Rozenbrez
    FémininAge : 26Messages : 1382

    le Lun 9 Mar 2015 - 22:38

    Oh! Je ne savais pas que c'était ton LS!! Ayant vue cette PA toute simple sur plusieurs forums je me demandé bien d'où elle pouvait provenir. :hum: Merci pour ton partage de cette jolie PA. :)

    avatar
    Amacky
    FémininAge : 26Messages : 133

    le Ven 13 Mar 2015 - 15:32

    Merci :)
    avatar
    Necko
    MasculinAge : 20Messages : 26

    le Ven 27 Mar 2015 - 18:24

    Wow ! Bien
    avatar
    Grenouille
    FémininAge : 22Messages : 49

    le Sam 28 Mar 2015 - 0:12

    joli, thanks !
    avatar
    Yumi-chan
    FémininAge : 25Messages : 67

    le Lun 30 Mar 2015 - 1:59

    J'adore, merci ! :)
    avatar
    Azorus
    MasculinAge : 16Messages : 35

    le Mer 1 Avr 2015 - 13:07

    Merci Lumine :ggg1:



    Seul mon nounours peut me comprendre :cowboy: :gentleman: :bandit:


    GFX by Aleph'
    Sépia
    FémininAge : 21Messages : 70

    le Sam 11 Avr 2015 - 14:39

    merci!
    avatar
    pika-cerise
    FémininAge : 26Messages : 92

    le Mar 14 Avr 2015 - 18:41

    sublime
    avatar
    wiise
    FémininAge : 25Messages : 50

    le Mar 14 Avr 2015 - 21:08

    Merciiiiii 8D



    avatar
    Airore
    FémininAge : 19Messages : 132

    le Mer 15 Avr 2015 - 8:27

    Merci !
    avatar
    Haniwa
    FémininAge : 23Messages : 206

    le Mar 21 Avr 2015 - 17:14

    Merci
    avatar
    sandcreations
    FémininAge : 47Messages : 20

    le Mar 21 Avr 2015 - 18:29

    J'aime beaucoup, merci ! Very Happy
    avatar
    Yasashi
    FémininAge : 22Messages : 65

    le Jeu 23 Avr 2015 - 22:26

    C'est super joli !
    avatar
    Chadot
    FémininAge : 29Messages : 176

    le Sam 25 Avr 2015 - 8:17

    Merci



    avatar
    DaZeli
    FémininAge : 22Messages : 377

    le Lun 4 Mai 2015 - 20:49

    Merci!
    Contenu sponsorisé


      La date/heure actuelle est Mer 20 Juin 2018 - 11:50