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.


    (Eerie) Page d'accueil

    Anonymous
    Invité

    Jeu 28 Juil 2016 - 19:50

    Ma demande



    Bonjour ! J'aurais besoin d'une nouvelle page d'accueil ! J'ai fais un petit schéma, les images viennent d'un forum que je voulais faire et que du coup j'ai pas fais mais je l'ai gardé pour des test, du coup voilà ! (c'est une amie qui sait bidouiller un peu qui avait fait la base, et elle m'a donné son accord pour que je garde les images présentes), merci d'avance de lire ma demande !

    Schéma(s) et Eléments
    Schémas : https://www.pixenli.com/images/1469/1469726791058636000.png
    Tailles des éléments : Alors là, aucune idée o_o Je dirais que pour les images du staff, l'image en carré de base ferait 150*150, pour le contexte je ne sais pas du tout, et pour les membres du mois et les prédéfinis 100*100 je dirais, mais en largeur c'est sur du 800
    Effets voulus : Alours pour les effets, et bien c'est comme sur le schéma, après je ne sais plus le nom de l'effet mais quand on passe sa souris par exemple sur le contexte, le staff, ou les membres du mois, ça change et on voit ce qu'il y a écrit dedans D:
    Version de votre forum : PHPBB2


    Ressources
    Pas spécialement, les images seront changés en fonction, donc en image de base pour toutes les images, aucun soucis !
    Autres précisions ?
    Je vais essayer d'être la plus claire possible, mais n'hésitez pas à me dire des détails !

    > Alors moi et les distances... normalement tout est centré ou au même niveau, par exemple les premières bulles du staff sur la même ligne que les crédits et les membres du mois, ensuite le contexte plus ou moins au milieu avec les votes à côtés, les nouveautés seraient en dessous des membres, les liens utiles avec les groupes et les prédefs sur la même ligne, et juste en dessous le rôle play !

    > Le staff : Pour les images je changerais en fonction, là ou c'est écrit Staff un peu partout j'aimerais que ce soit écrit Pseudo (pour après mettre le nom de la personne), et quand on passe sa souris sur l'image de la personne, son rang dans le staff, sa disponibilité, mp (avec quand on clique dessus que ça puisse aller pour demander un mp)

    > Liens utiles : Là rien de très sorcier, juste que les liens renvois vers leur sujet en fait D:
    > Nouveautés : Rien de spécial non plus, juste s'il faut un lien de temps à autre mais sinon c'est du texte
    > Crédits : Bah les crédits owo
    > Role play : Du texte aussi

    > Votes : C'est une lettre par top sites, du coup faut que chaque lettre soit une image et qu'on puisse cliquer dessus

    > Contexte : Quand on passe la souris dessus, que le texte apparaissent, avec un scrolling car il est assez long

    > Stars du mois : Quand on passe la souris sur l'image, qu'on puisse voir le nom de la personne

    > Prédéfinis : Là quand on passe la souris on voit le groupe et j'aimerais juste en dessous que ce soit écrit "voir" et que si on clique dessus ça amène vers le groupe correspondant dans les prédefs

    > Groupes : Sur le schéma c'est les 42 XD En fait les carrés sont colorés selon le groupe (ils seront en 50*50 ou si c'est trop petit 100*100, comme ça arrange), et les 42 ce serait juste le nombre de membre dans chaque groupe ! (pour les couleurs, c'est sur mon forum sur le queel (http://mastersnekos.forumactif.org/) mais ce serait : première ligne de gauche à droite : #D12727 , #EE7154 , #C7B018 , #42A1AD et la deuxième : #F08F2D , #36A31D , #969595 , #A261C4

    > Les couleurs : alors tout ce que j'ai mis en rouge, ce serait plus en vert en fait, car le thème actuel est vert, le reste après normalement c'est bon, mais pour les images si le fond peut être blanc (comme le contexte sur le forum un peu plus loin en lien) quand on passe la souris dessus et le texte noir y a pas de soucis (voici d'ailleurs le forum dont c'est tiré qui est à moi comme je l'ai déjà précisé ici




    Dernière édition par Esper le Jeu 15 Sep 2016 - 19:22, édité 1 fois
    Eerie Ange's
    Eerie Ange's
    FémininAge : 23Messages : 166

    Dim 14 Aoû 2016 - 18:13

    Hey !
    Je suis tentée par ta commande, alors je voulais savoir si c'était encore d'actualité :3
    Anonymous
    Invité

    Lun 15 Aoû 2016 - 0:17

    Bonjour ! Oui toujours ^^
    Eerie Ange's
    Eerie Ange's
    FémininAge : 23Messages : 166

    Lun 15 Aoû 2016 - 10:06

    Bon bah alors je m'en occupe Very Happy
    Anonymous
    Invité

    Ven 19 Aoû 2016 - 18:29

    Pas de soucis !
    Eerie Ange's
    Eerie Ange's
    FémininAge : 23Messages : 166

    Mar 23 Aoû 2016 - 9:52

    Hey !
    Voilà le résultat !
    Au final, les images font 75x75 pour le staff et 50x50 pour les prédéfinis et les stars du mois (sinon je ne pouvais pas en mettre autant que sur le schéma ^^')
    Enfin bref, j'attends ton avis :3
    Anonymous
    Invité

    Mar 23 Aoû 2016 - 23:54

    Salut ^^ J'aime beaucoup ! Les cases pour les groupes sont un peu trop grande du coup je trouve owo Et les nouveautés un peu décaler pour que le voter empiète pas dessus et décaler les membres du mois à gauche, et ça devrait le faire je pense owo
    Eerie Ange's
    Eerie Ange's
    FémininAge : 23Messages : 166

    Jeu 25 Aoû 2016 - 7:58

    Alors j'ai un peu bidouillé, j'espère que ça correspond plus à tes attentes Very Happy

    (Du coup, pour les nouveautés, j'ai rajouté une barre de défilement pour éviter de tout déformer)
    Eerie Ange's
    Eerie Ange's
    FémininAge : 23Messages : 166

    Dim 4 Sep 2016 - 10:11

    Hey !
    Un petit message pour te demander des nouvelles de ta commande ~
    Anonymous
    Invité

    Jeu 15 Sep 2016 - 19:22

    Bonjour ! Désolé avec la rentrée j'ai carrément oublié le forum >< C'est super merci beaucoup ! Je vais voir la date du moment où on le mettra du coup !
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Dim 18 Sep 2016 - 11:23

    Salut!

    C'est marqué terminé, mais je ne vois les codes nul part. Vous avez fait ça en MP? Est-ce que le sujet peut être archivé?



    Eerie Ange's
    Eerie Ange's
    FémininAge : 23Messages : 166

    Dim 18 Sep 2016 - 12:44

    C'est normal que tu ne voies pas les codes, ils arrivent maintenant ^^'

    HTML
    Code:
    <div class="fond_pa">
                                                                                            
       <table style="width: 100%;">
                                                                                               
          <tbody>
                                                                                                  
             <tr>
                                                                                                     
                <td style="width: 300px;">
                                                  
                   <div class="titre_pa">
                                                      Le Staff                       
                   </div><br />                                                                 
                   <table>
                                                                                                       
                      <tbody>
                                                                                                          
                         <tr>
                                                                                                             
                            <td style="width: 50%;">
                                                                                                                            
                               <div class="staff_pa">
                                                                          <img src="http://image.noelshack.com/fichiers/2016/32/1471188662-150x150-1.jpg" /><span>Rang<br />Disponible<br /><a href="#">Mp</a></span>                                       
                               </div>
                                                                                                      
                               <div class="bulle_pa">
                                                                      <span>Pseudo</span>                                   
                               </div>
                                                                                                          
                            </td>
                                                                                                             
                            <td style="width: 50%;">
                                                                                                                
                               <div class="staff_pa">
                                                                          <img src="http://image.noelshack.com/fichiers/2016/32/1471188662-150x150-2.jpg" /><span>Rang<br />Disponible<br /><a href="#">Mp</a></span>                                       
                               </div>
                                                                                                      
                               <div class="bulle_pa">
                                                                      <span>Pseudo</span>                                   
                               </div>
                                                                                                  
                            </td>
                                                                                                             
                         </tr>
                                                                                                    
                         <tr>
                                                                                                             
                            <td>
                                                                                                                
                               <div class="staff_pa">
                                                                          <img src="http://image.noelshack.com/fichiers/2016/32/1471188662-150x150-3.jpg" /><span>Rang<br />Disponible<br /><a href="#">Mp</a></span>                                       
                               </div>
                                                                                                      
                               <div class="bulle_pa">
                                                                      <span>Pseudo</span>                                   
                               </div>
                                                                                                          
                            </td>
                                                                                                             
                            <td>
                                                                                                                
                               <div class="staff_pa">
                                                                          <img src="http://image.noelshack.com/fichiers/2016/32/1471188660-150x150-4.jpg" /><span>Rang<br />Disponible<br /><a href="#">Mp</a></span>                                       
                               </div>
                                                                                                      
                               <div class="bulle_pa">
                                                                      <span>Pseudo</span>                                   
                               </div>
                                                                                                  
                            </td>
                                                                                                             
                         </tr>
                                                                                            
                         <tr>
                                                                                                             
                            <td>
                                                                                                                
                               <div class="staff_pa">
                                                                          <img src="http://image.noelshack.com/fichiers/2016/32/1471188660-150x150-5.jpg" /><span>Rang<br />Disponible<br /><a href="#">Mp</a></span>                                       
                               </div>
                                                                                                      
                               <div class="bulle_pa">
                                                                      <span>Pseudo</span>                                   
                               </div>
                                                                                                          
                            </td>
                                                                                                             
                            <td>
                                                                                                                
                               <div class="staff_pa">
                                                                          <img src="http://image.noelshack.com/fichiers/2016/32/1471188660-150x150-6.jpg" /><span>Rang<br />Disponible<br /><a href="#">Mp</a></span>                                       
                               </div>
                                                                                                      
                               <div class="bulle_pa">
                                                                      <span>Pseudo</span>                                   
                               </div>
                                                                                                  
                            </td>
                                                                                                             
                         </tr>
                                                                                                    
                      </tbody>
                                                                                                       
                   </table>
                                                   <br />                               
                   <div class="titre_pa">
                                                      Liens utiles                               
                   </div>
                                                                                
                   <div class="liens_pa">
                                                      <a href="#">Règlement</a><br /><a href="#">Groupes et adoptions</a><br />        <a href="#">Explications supplémentaires</a><br />      <a href="#">Présentations</a><br />      <a href="#">Bottin des Avatars</a><br />      <a href="#">Avatars Libres</a><br />      <a href="#">Prédéfinis</a><br />      <a href="#">Les Points</a><br />      <a href="#">Questions, suggestions ?</a><br />      <a href="#">Partenaires</a><br />                             
                   </div>
                                                                                  
                </td>
                                                                                                     
                <td style="width: 250px;">
                                                                            
                   <div class="titre_pa">
                                                      Crédits                               
                   </div>
                                                                          
                   <div class="credits_pa">
                                                  Design par X, Contexte par Y, PA par <a href="http://www.never-utopia.com/">Eerie Ange's</a> etc         
                   </div>
                                               <br />                         
                   <div class="contexte_pa">
                                                              <img src="http://image.noelshack.com/fichiers/2016/32/1471200146-contexte.jpg" /><span>Quam ob rem vita quidem talis fuit vel fortuna vel gloria, ut nihil posset accedere, moriendi autem sensum celeritas abstulit; quo de genere mortis difficile dictu est; quid homines suspicentur, videtis; hoc vere tamen licet dicere, P. Scipioni ex multis diebus, quos in vita celeberrimos laetissimosque viderit, illum diem clarissimum fuisse, cum senatu dimisso domum reductus ad vesperum est a patribus conscriptis, populo Romano, sociis et Latinis, pridie quam excessit e vita, ut ex tam alto dignitatis gradu ad superos videatur deos potius quam ad inferos pervenisse.<br /><br /> Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.<br /><br /> Sed ut tum ad senem senex de senectute, sic hoc libro ad amicum amicissimus scripsi de amicitia. Tum est Cato locutus, quo erat nemo fere senior temporibus illis, nemo prudentior; nunc Laelius et sapiens (sic enim est habitus) et amicitiae gloria excellens de amicitia loquetur. Tu velim a me animum parumper avertas, Laelium loqui ipsum putes. C. Fannius et Q. Mucius ad socerum veniunt post mortem Africani; ab his sermo oritur, respondet Laelius, cuius tota disputatio est de amicitia, quam legens te ipse cognosces. </span>                                       
                   </div><br />                 
                   <div style="width: 210px; margin: auto;">
                                       
                      <div style="background-color: #D12727;" class="groupe_pa">
                                                   42                         
                      </div>
                                                                         
                      <div style="background-color: #EE7154;" class="groupe_pa">
                                                   42                         
                      </div>
                                                                         
                      <div style="background-color: #C7B018;" class="groupe_pa">
                                                   42                         
                      </div>
                                                                         
                      <div style="background-color: #42A1AD;" class="groupe_pa">
                                                   42                         
                      </div><br />                         
                      <div style="background-color: #F08F2D;" class="groupe_pa">
                                                   42                         
                      </div>
                                                                         
                      <div style="background-color: #36A31D;" class="groupe_pa">
                                                   42                         
                      </div>
                                                                         
                      <div style="background-color: #969595;" class="groupe_pa">
                                                   42                         
                      </div>
                                                                         
                      <div style="background-color: #A261C4;" class="groupe_pa">
                                                   42                         
                      </div>
                             
                   </div><br />                         
                   <div class="titre_pa">
                                                      Role Play                               
                   </div>
                                                                                
                   <div class="liens_pa">
                                              Y/Y/H - 16 déconseillé<br />Avatar 200*400<br />10 lignes en rp' minium                         
                   </div>
                                                                    
                </td>
                                                                                                     
                <td style="width: 250px;">
                                                                                            
                   <div class="titre_pa">
                                                      Les Stars du Mois                       
                   </div>
                                             <br />                   
                   <div style="margin: auto; width: 177px">
                       
                      <div class="stars_predef_pa">
                                                                 <img src="http://image.noelshack.com/fichiers/2016/32/1471188658-100x100-1.jpg" /><span>Nom du membre</span>                                       
                      </div>
                                                                   
                      <div class="stars_predef_pa">
                                                                 <img src="http://image.noelshack.com/fichiers/2016/32/1471188659-100x100-2.jpg" /><span>Nom du membre</span>                                       
                      </div>
                                                                   
                      <div class="stars_predef_pa">
                                                                 <img src="http://image.noelshack.com/fichiers/2016/32/1471188659-100x100-3.jpg" /><span>Nom du membre</span>                                       
                      </div>
                       
                   </div><br />
                   <div style="float:left;width:40px; height: 240px;">
                                            <a href=""><img src="http://image.noelshack.com/fichiers/2016/33/1471282376-v.png" /></a><a href=""><img src="http://image.noelshack.com/fichiers/2016/33/1471282376-o.png" /></a><a href=""><img src="http://image.noelshack.com/fichiers/2016/33/1471282376-t.png" /></a><a href=""><img src="http://image.noelshack.com/fichiers/2016/33/1471282376-e.png" /></a><a href=""><img src="http://image.noelshack.com/fichiers/2016/33/1471282376-z.png" /></a><a href=""><img src="http://image.noelshack.com/fichiers/2016/33/1471282376--.png" /></a>                     
                   </div>
                                    
                   <div class="titre_pa">
                                                      Nouveautés                       
                   </div>
                                         <br />                 
                   <div style="overflow: auto; height: 180px; padding: 0 15px;" class="liens_pa">
                                          Quis enim aut eum diligat quem metuat, aut eum a quo se metui putet? Coluntur tamen simulatione dumtaxat ad tempus. Quod si forte, ut fit plerumque, ceciderunt, tum intellegitur quam fuerint inopes amicorum. Quod Tarquinium dixisse ferunt, tum exsulantem se intellexisse quos fidos amicos habuisset, quos infidos, cum iam neutris gratiam referre posset.                 
                   </div>
                                         <br />                 
                   <div class="titre_pa" style="clear: both;">
                                                      Prédéfinis                       
                   </div>
                                   <br />             
                   <div class="stars_predef_pa">
                                                              <img src="http://image.noelshack.com/fichiers/2016/32/1471188660-100x100-4.jpg" /><span>Groupe<br /><a href="#">Voir</a></span>                                       
                   </div>
                                                
                   <div class="stars_predef_pa">
                                                              <img src="http://image.noelshack.com/fichiers/2016/32/1471188660-100x100-5.jpg" /><span>Groupe<br /><a href="#">Voir</a></span>                                       
                   </div>
                                                
                   <div class="stars_predef_pa">
                                                              <img src="http://image.noelshack.com/fichiers/2016/32/1471188659-100x100-6.jpg" /><span>Groupe<br /><a href="#">Voir</a></span>                                       
                   </div>
                                                
                   <div class="stars_predef_pa">
                                                              <img src="http://image.noelshack.com/fichiers/2016/32/1471188660-100x100-7.jpg" /><span>Groupe<br /><a href="#">Voir</a></span>                                       
                   </div><br />               
                   <div class="stars_predef_pa">
                                                              <img src="http://image.noelshack.com/fichiers/2016/32/1471188660-100x100-8.jpg" /><span>Groupe<br /><a href="#">Voir</a></span>                                       
                   </div>
                                                
                   <div class="stars_predef_pa">
                                                              <img src="http://image.noelshack.com/fichiers/2016/32/1471188660-100x100-9.jpg" /><span>Groupe<br /><a href="#">Voir</a></span>                                       
                   </div>
                                                
                   <div class="stars_predef_pa">
                                                              <img src="http://image.noelshack.com/fichiers/2016/32/1471188661-100x100-10.jpg" /><span>Groupe<br /><a href="#">Voir</a></span>                                       
                   </div>
                                                
                   <div class="stars_predef_pa">
                                                              <img src="http://image.noelshack.com/fichiers/2016/32/1471188662-100x100-11.jpg" /><span>Groupe<br /><a href="#">Voir</a></span>                                       
                   </div>
                                                
                </td>
                                                                                                     
             </tr>
                                                                                                  
          </tbody>
                                                                                               
       </table>
    </div><link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kaushan+Script|Ubuntu+Mono" />

    CSS
    Code:
    .fond_pa {
      width:800px;
      background-color:#a9a59c;
      color: #2c2c2c;
    }

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

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

    .staff_pa {
      display: inline-block;
      font-family: 'Ubuntu Mono'!important;
    }
     
    .staff_pa img {
      border-radius: 100px;
      width:75px;
      border: 5px solid #ffffff;
    }


    .staff_pa span {
      display: inline-block;
      opacity: 0;
      width: 55px;
      height: 55px;
      background-color: #eeeeee;
      position: absolute;
      margin-left: -80px;
      margin-top: 5px;
      border-radius: 100px;
      padding: 10px;
      transition: all 1s;
      overflow-y:auto;
      overflow-x: hidden;
      text-align: center;
      color: #000000;
    }

    .staff_pa:hover span {
    opacity: 0.8;
      transition: all 1s;
    }

    .bulle_pa {
      float:right;
      margin-top: 10px;
      padding: 23px 6px;
      width: 40px;
      height: 20px;
      background-image: url(http://image.noelshack.com/fichiers/2016/33/1471426688-bubulle.png);
      text-align: center;}

    .bulle_pa span {
      font-size: 10px;
      transform: rotate(5deg);
      display: inline-block;
      color: #1A8A1A;
      font-family: 'Ubuntu Mono'!important;
    }

    .titre_pa {
      color: #176C17;
     font-size: 25px;
      font-family: 'Kaushan Script';
      text-align: center;
      text-shadow: -1px -1px 0px #ffffff;
    }

    .liens_pa {
      padding: 0px 30px;
      color #1e1e1e;
      text-align: justify;
      font-family: 'Ubuntu Mono'!important;
    }

    .liens_pa a {
      color #1e1e1e!important;
    }

    .credits_pa {
      text-align:center;
      padding: 0px 40px;
      font-family: 'Ubuntu Mono'!important;
    }


    .contexte_pa img {
      border-radius: 240px;
      width:240px;
      border: 5px solid #ffffff;
    }


    .contexte_pa span {
      display: inline-block;
      opacity: 0;
      width: 170px;
      height: 170px;
      background-color: #eeeeee;
      position: absolute;
      margin-left: -245px;
      margin-top: 5px;
      border-radius: 240px;
      padding: 35px;
      transition: all 1s;
      overflow:auto;
      font-size: 11px;
      text-align: justify;
      color: #000000;
      font-family: 'Ubuntu Mono'!important;
    }

    .contexte_pa:hover span {
    opacity: 0.8;
      transition: all 1s;
    }

    .groupe_pa {
      display: inline-block;
      border: 1px solid #000000;
      width: 20px;
      height: 20px;
      margin: 5px;
      padding: 8px;
      font-size: 20px;
      font-family: 'Ubuntu Mono'!important;
    }

    .stars_predef_pa {
      display: inline-block;
      font-family: 'Ubuntu Mono'!important;
    }

    .stars_predef_pa img {
      width: 50px;
      border-radius: 100px;
      border: 3px solid #ffffff;
    }

    .stars_predef_pa span {
      display: inline-block;
      opacity: 0;
      width: 40px;
      height: 30px;
      background-color: #eeeeee;
      position: absolute;
      padding: 10px 5px;
      margin-left: -53px;
      border-radius: 100px;
      transition: all 1s;
      overflow-y:auto;
      overflow-x: hidden;
      text-align: center;
      margin-top: 3px;
      color: #000000;
    }

    .stars_predef_pa a {
      color: #a7a7a7;
      text-decoration: none!important;
    }

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

    .stars_predef_pa:hover span {
    opacity: 0.8;
      transition: all 1s;
    }

    Si j'ai oublié une précision n'hésite pas à me demander :3
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Dim 2 Oct 2016 - 4:51

    Salut!

    @Esper, est-ce que tu as installé les codes? Tout va bien?



    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 14 Oct 2016 - 0:13

    N'ayant pas de nouvelles, j'archive le sujet.



    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Nov 2024 - 17:08