AccueilDernières imagesRechercherS'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.

Le Deal du moment : -27%
-27% sur la machine à café Expresso ...
Voir le deal
399.99 €

    PA grise simple avec infobulles

    Alumine
    Alumine
    FémininAge : 27Messages : 487

    Sam 6 Sep 2014 - 15:36

    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 !) https://i.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
    Screen
    Screen
    FémininAge : 32Messages : 92

    Sam 6 Sep 2014 - 15:58

    Merci :3
    Anonymous
    Invité

    Sam 6 Sep 2014 - 19:45

    Très sympathique, j'aime beaucoup la personnalisation de Screen (le modèle sans illustration est un peu moins explicite). Merci Alumine ^^

    Celà dit il faudrait intégrer un crédit vers NU avant que je ne déplace Wink
    Alumine
    Alumine
    FémininAge : 27Messages : 487

    Lun 8 Sep 2014 - 21:23

    Pas de problème, je m'occupe de ça !
    Merci pour ton travail (=

    Edit: c'est rajouté ! le crédit s'affiche après la petite phrase en bas. J'espère que tu me pardonneras si je ne refais pas mes screens mais je n'ai pas tofiltre sur cet ordi...
    Vegvisir
    Vegvisir
    FémininAge : 25Messages : 411

    Mer 17 Sep 2014 - 9:40

    J'aime beaucoup, merci !



    PA grise simple avec infobulles 1
    Anonymous
    Invité

    Dim 21 Sep 2014 - 19:19

    C'est tout bon, je déplace cette fois :3
    Kau
    Kau
    FémininAge : 22Messages : 148

    Dim 21 Sep 2014 - 20:36

    Elle est magnifique, j'adore le genre. Merci beaucoup !
    Féhéla
    Féhéla
    FémininAge : 51Messages : 238

    Ven 26 Sep 2014 - 6:09

    merci du partage
    Pee-Boo
    Pee-Boo
    FémininAge : 32Messages : 28

    Ven 26 Sep 2014 - 14:55

    Merci :hug:
    .lovely
    .lovely
    FémininAge : 27Messages : 54

    Ven 26 Sep 2014 - 23:57

    merci !!
    Miyoko
    Miyoko
    FémininAge : 32Messages : 213

    Sam 27 Sep 2014 - 11:36

    nice



    PA grise simple avec infobulles 641359838739
    Miss Tigri
    Miss Tigri
    FémininAge : 30Messages : 89

    Mer 1 Oct 2014 - 21:39

    J'adore !
    1charlotte
    1charlotte
    FémininAge : 23Messages : 196

    Lun 6 Oct 2014 - 1:25

    Fabulous **
    Jibunnie
    Jibunnie
    FémininAge : 27Messages : 106

    Lun 6 Oct 2014 - 15:20

    Merci 'Lumine
    avatar
    Wolftactick
    FémininAge : 23Messages : 71

    Lun 6 Oct 2014 - 19:37

    wuawu
    White Lady
    White Lady
    FémininAge : 32Messages : 28

    Lun 6 Oct 2014 - 21:58

    c'est parfait merci !
    zbou
    zbou
    FémininAge : 30Messages : 83

    Ven 10 Oct 2014 - 19:29

    Merci ♥
    Raween
    Raween
    FémininAge : 32Messages : 112

    Ven 10 Oct 2014 - 20:12

    Merci beaucoup <3
    Araik
    Araik
    FémininAge : 29Messages : 250

    Dim 12 Oct 2014 - 14:32

    Vraiment très agréable a lire



    PA grise simple avec infobulles Signat15
    Likilou
    Likilou
    MasculinAge : 31Messages : 309

    Dim 12 Oct 2014 - 15:58

    merci



    PA grise simple avec infobulles 707828SignArthur2
    Clémentine
    Clémentine
    FémininAge : 32Messages : 223

    Mer 15 Oct 2014 - 13:43

    Simple et peux ce placer avec n'importe quel code *_* Merci ♥



    PA grise simple avec infobulles 9w9t
    Chaussette
    Chaussette
    FémininAge : 31Messages : 59

    Mer 15 Oct 2014 - 14:33

    C'est super beau ! Merci beaucoup !
    Athos
    Athos
    FémininAge : 29Messages : 49

    Ven 17 Oct 2014 - 13:28

    C'est vraiment joli ! Merci du partage !
    Kahlan
    Kahlan
    FémininAge : 38Messages : 371

    Ven 17 Oct 2014 - 17:58

    Merci beaucoup pour ce partage
    Pooni
    Pooni
    FémininAge : 26Messages : 39

    Ven 17 Oct 2014 - 18:46

    Sympa ! Merci. <3
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 11:19