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.

-25%
Le deal à ne pas rater :
PC Portable Gamer 16,1” HP Victus 16 – 16 Go /512 Go
749.99 € 999.99 €
Voir le deal

    (HALLOW) Recherche d'une belle PA ♥

    Layla4
    Layla4
    FémininAge : 25Messages : 149

    Jeu 6 Mar 2014 - 21:40

    Rappel du premier message :

    Ma demande



       Hello ! Ma page d'accueil sur mon forum se fait vieille - en plus de buguer - et je fais justement la demande ici à qui voudra la prendre pour en avoir une belle et neuve :3 merci à celui qui s'en occupera **

       Schéma(s) et Eléments
       Schémas :
    Spoiler:
    C'est juste pour donner une idée, suivre ce schéma n'est pas obligatoire !
       Tailles des éléments : Pour les images de staff, prévoir des dimensions 100x100 pour les icônes et sinon, ce serait bien si la PA fasse plus de largeur que de hauteur, au risque de déformer le forum =)
       Effets voulus : Ce serait possible d'avoir les bords de la PA arrondis ?

       Ressources
       Comme je l'ai dit plus haut, des icônes 100x100 pour le staff . Sinon, je n'ai pas d'autres exigences en ce point Wink

       Autres précisions ?
        Oui, j'aimerais que, au passage du curseur de la souris sur le staff, une petite fenêtre s'ouvre où il y aurait écrit "rang - profil - mp" si c'est possible ! Et encore merci d'avance ^^
       


    Dernière édition par Layla4 le Jeu 8 Mai 2014 - 12:57, édité 3 fois
    • Revenir en haut
    Anonymous
    Invité

    Lun 5 Mai 2014 - 17:25

    Ca donnerait ceci.
    • Revenir en haut
    Layla4
    Layla4
    FémininAge : 25Messages : 149

    Lun 5 Mai 2014 - 20:16

    J'aime bien le résultat ! Pour les partenaires, c'est exactement ça. Par contre, ce serait possible de rétrécir les icônes du staff ? Et d'avoir un petit espace en-dessous(ou ailleurs) pour pouvoir caser les tops-sites ?
    Merci d'avance x)
    • Revenir en haut
    Anonymous
    Invité

    Lun 5 Mai 2014 - 20:23

    Les icônes sont en 100*100, donc je réduis de combien (sachant qu'après la place pour le texte dans la bulle sera considérablement réduite). Personnellement j'aurai plutôt casé les top dans le deuxième onglet, pour égaliser les informations. Mais c'est à toi de voir.
    • Revenir en haut
    Layla4
    Layla4
    FémininAge : 25Messages : 149

    Mar 6 Mai 2014 - 11:15

    Pour le staff, si au lieu de mettre des bulles, tu mettais des carrés, est-ce que cela prendrait moins de place ? Toujours en 100*100 ? Pour les top-sites, mets-les dans le deuxième onglet alors s'il te plaît =)
    • Revenir en haut
    Anonymous
    Invité

    Mar 6 Mai 2014 - 11:30

    Non je pense que ça reviendrait au même =/
    • Revenir en haut
    Layla4
    Layla4
    FémininAge : 25Messages : 149

    Mar 6 Mai 2014 - 14:10

    Ah... et ça donne quoi si tu rétrécis à 80*80 ? =)
    • Revenir en haut
    Anonymous
    Invité

    Mar 6 Mai 2014 - 14:29

    C'est fait, et comme dit précédemment : ça dépasse x) Sachant qu'en plus il n'y a que "pseudo" d'écrit, pour ton forum tu auras un prénom et un nom, ça prendra le double de place.
    • Revenir en haut
    Layla4
    Layla4
    FémininAge : 25Messages : 149

    Mar 6 Mai 2014 - 14:53

    Ah... et c'est grave ? x)
    • Revenir en haut
    Anonymous
    Invité

    Mar 6 Mai 2014 - 14:54

    Bah si tu veux que ça dépasse de la bulle c'est toi qui vois hein, c'est pas ma page d'accueil xD
    • Revenir en haut
    Layla4
    Layla4
    FémininAge : 25Messages : 149

    Mar 6 Mai 2014 - 16:54

    Ben mets juste le pseudo et le rang alors Very Happy
    • Revenir en haut
    Anonymous
    Invité

    Mar 6 Mai 2014 - 17:15

    C'est modifié
    • Revenir en haut
    Layla4
    Layla4
    FémininAge : 25Messages : 149

    Mar 6 Mai 2014 - 17:46

    Super, merci beaucoup ! Tu peux me passer les codes alors, pour que je puisse l'installer ? =)
    édit --> tous les admins ne seront pas sur la PA, tu ne pourrais pas agrandir le bloc du staff ? x)
    • Revenir en haut
    Anonymous
    Invité

    Mar 6 Mai 2014 - 17:56

    Tu ne chercherais pas à me faire fuir de ton sujet par hasard ? Parce que je suis pas loin quand même xD Tu me soutiens que tu veux réduire, je te le déconseille mais je le fais quand même et au final il faut ragrandir ... m'enfin. Voici le code ^^

    Le CSS
    Code:
    /***************************** MISE EN FORME PA *****************************/

    /*** IMAGES DU STAFF ***/

    .imgPA {
      border-radius: 50%;
      width: 100px;
      height: 100px;
    }

    .info {
      position: relative;
      z-index: 24;
      text-decoration: none;
    }
     
    c.info:hover {
      z-index: 25;
    }
     
    c.info span {
      display: none;
    }
     
    c.info:hover span {
      display: block;
      position: absolute;
      top: -9em;
      left: -0.05em;
      border-radius: 50%;
      width: 101px;
      height: 101px;
      background-color: #923740;
      color: #F3F3F3;
      text-align: center;
      font-weight: none;
    }

    /*** SYSTEME D'ONGLETS ***/

    .paonglet {
      display: inline-block;
      margin-left: 20px;
      margin-right: 20px;
      padding: 10px;
      cursor: pointer;
      background-color: #FFA8F9;
      color: #66262D;
    }
               
    .paonglet_0 {
      border-radius: 25px;
    }

    .paonglet_1 {
      border-radius: 25px;
      color: #923740;
    }

    .contenu_paonglet {
      padding: 25px;
      display: none;
      width: 780px;
      border-radius: 25px;
      background-color: #923740;
    }

    .contenu_paonglet a{
      text-decoration: none !important;
    }

    .bloc_pa {
      background-color: #FFA8F9;
      padding: 25px;
      color: #8C353C;
      position: relative;
      top: -1em;
      text-align: justify;
      border-radius: 25px;
    }

    .titre_pa {
      font-family: 'Pacifico', cursive;
      font-size: 25px;
      text-align: center;
      color: #FFA8F9;
    }

    .titre_pa:hover {
      color: #F1DADC !important;
    }
     

    /***************************** FIN MISE EN FORME PA *****************************/

    La PA
    Code:
    <script type="text/javascript">
                //<!--
                        function change_paonglet(name)
                        {
                                document.getElementById('paonglet_'+anc_paonglet).className = 'paonglet_0 paonglet';
                                document.getElementById('paonglet_'+name).className = 'paonglet_1 paonglet';
                                document.getElementById('contenu_paonglet_'+anc_paonglet).style.display = 'none';
                                document.getElementById('contenu_paonglet_'+name).style.display = 'block';
                                anc_paonglet = name;
                        }
                //-->
                </script>
    <div class="paonglets">
        <span class="paonglet_0 paonglet" id="paonglet_informations" onclick="javascript:change_paonglet('informations');">Informations</span> <span class="paonglet_0 paonglet" id="paonglet_contact" onclick="javascript:change_paonglet('contact');">Partenaires</span>
    </div><br />
    <div class="contenu_paonglets">
       
       <div class="contenu_paonglet" id="contenu_paonglet_informations">
          
          <table>
             
             <tbody>
                
                <tr>
                   
                   <td>
                      
                      <div class="titre_pa">
                          Contexte
                      </div>
                      
                      <div class="bloc_pa" style="width: 300px; height: 250px; overflow: auto;">
                          Haec igitur prima lex amicitiae sanciatur, ut ab amicis honesta petamus, amicorum causa honesta faciamus, ne exspectemus quidem, dum rogemur; studium semper adsit, cunctatio absit; consilium vero dare audeamus libere. Plurimum in amicitia amicorum bene suadentium valeat auctoritas, eaque et adhibeatur ad monendum non modo aperte sed etiam acriter, si res postulabit, et adhibitae pareatur. Nisi mihi Phaedrum, inquam, tu mentitum aut Zenonem putas, quorum utrumque audivi, cum mihi nihil sane praeter sedulitatem probarent, omnes mihi Epicuri sententiae satis notae sunt. atque eos, quos nominavi, cum Attico nostro frequenter audivi, cum miraretur ille quidem utrumque, Phaedrum autem etiam amaret, cotidieque inter nos ea, quae audiebamus, conferebamus, neque erat umquam controversia, quid ego intellegerem, sed quid probarem. Primi igitur omnium statuuntur Epigonus et Eusebius ob nominum gentilitatem oppressi. praediximus enim Montium sub ipso vivendi termino his vocabulis appellatos fabricarum culpasse tribunos ut adminicula futurae molitioni pollicitos. Etenim si attendere diligenter, existimare vere de omni hac causa volueritis, sic constituetis, iudices, nec descensurum quemquam ad hanc accusationem fuisse, cui, utrum vellet, liceret, nec, cum descendisset, quicquam habiturum spei fuisse, nisi alicuius intolerabili libidine et nimis acerbo odio niteretur. Sed ego Atratino, humanissimo atque optimo adulescenti meo necessario, ignosco, qui habet excusationem vel pietatis vel necessitatis vel aetatis. Si voluit accusare, pietati tribuo, si iussus est, necessitati, si speravit aliquid, pueritiae. Ceteris non modo nihil ignoscendum, sed etiam acriter est resistendum. Quae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur. Illud autem non dubitatur quod cum esset aliquando virtutum omnium domicilium Roma, ingenuos advenas plerique nobilium, ut Homerici bacarum suavitate Lotophagi, humanitatis multiformibus officiis retentabant. Nec piget dicere avide magis hanc insulam populum Romanum invasisse quam iuste. Ptolomaeo enim rege foederato nobis et socio ob aerarii nostri angustias iusso sine ulla culpa proscribi ideoque hausto veneno voluntaria morte deleto et tributaria facta est et velut hostiles eius exuviae classi inpositae in urbem advectae sunt per Catonem, nunc repetetur ordo gestorum.
                      </div>
                      
                      <div class="titre_pa">
                          Saison
                      </div>
                      
                      <div class="bloc_pa">
                         
                         <center>
                             <img src="http://i58.servimg.com/u/f58/18/40/69/79/partly10.png" />
                         </center>
                         
                      </div>
                      
                   </td>
                   
                   <td style="width: 30px;">
                      
                   </td>
                   
                   <td>
                      
                      <div class="titre_pa">
                          Staff
                      </div>
                      
                      <div class="bloc_pa" style="width: 250px;">
                         
                         <center>
                             <c class="info"><img src="http://i58.servimg.com/u/f58/18/43/33/39/113.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important">Pseudo</d> <br />Rang </span></c> <c class="info"><img src="http://i58.servimg.com/u/f58/18/43/33/39/113.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important">Pseudo</d> <br />Rang </span></c> <c class="info"><img src="http://i58.servimg.com/u/f58/18/43/33/39/113.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important">Pseudo</d> <br />Rang </span></c> <c class="info"><img src="http://i58.servimg.com/u/f58/18/43/33/39/113.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important">Pseudo</d> <br />Rang </span></c> <c class="info"><img src="http://i58.servimg.com/u/f58/18/43/33/39/113.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important">Pseudo</d> <br />Rang </span></c>
                         </center>
                         
                      </div>
                      
                   </td>
                   
                </tr>
                
             </tbody>
             
          </table>
          
       </div>
       
       <div class="contenu_paonglet" id="contenu_paonglet_contact">
          
          <div class="titre_pa">
              Partenaires
          </div>
          
          <div class="bloc_pa" style="width 450px;">
              <marquee><a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" /></a> </marquee>
          </div><br />
          <div class="titre_pa">
              Top-sites
          </div>
          
          <div class="bloc_pa" style="width 450px;">
             
             <center>
                 <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" /></a>
             </center>
             
          </div>
          
       </div>
       
    </div>
     <script type="text/javascript">
                //<!--
                        var anc_paonglet = 'informations';
                        change_paonglet(anc_paonglet);
                //-->
                </script> <link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css" />
    • Revenir en haut
    Layla4
    Layla4
    FémininAge : 25Messages : 149

    Mar 6 Mai 2014 - 18:15

    Non mais pas agrandir les bulles, le cadre du staff dans lesquelles elles sont mises xD (en fait il manque juste deux bulles ><) mais tant pis, merci pour les codes x)
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Ven 22 Nov 2024 - 17:17