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 à ne pas rater :
LEGO Icons 10331 – Le martin-pêcheur
35 €
Voir le deal

    Commande page d'acceuil- Coin Psy

    Zooé
    Zooé
    FémininAge : 27Messages : 66

    Lun 29 Avr 2013 - 18:03

    Un gros bonjour à toute l'équipe!!
    Commande
    Adresse du forum : http://coinpsycologieyeah.forumdiet.net/
    Description des éléments : Commande page d'acceuil- Coin Psy Pa1011
    En faite, ce qui serait génial, c'est que l'orsque l'on clique sur " coin psy " par exemple, la ou il y a marqué blablabla... qu'en faite s'affiche un texte spécial pour cet onglet ^^.

    Coin Psy:
    Ce forum est un forum dédié à la psychologie, les membres donnent des conseils et avis, mais en aucun cas cela remplace une séance psychologique chez un spécialiste, nous ne sommes pas des proféssionels. Tu pourras y retrouver pleins de catégories diverses pour te libérer !
    Pour les nouveaux membres qui faites vos premiers pas sur Coin Psy, je vous conseil :
    - De vous présenter.
    - De mettre une photo de profil.
    - De lire attentivement les règles.

    Le staff:
    Je ne sais pas du tout si c'est possible ou pas! Mais j'aimerai beaucoup que dans la partie staf, il y est écrit en tout beau "Administrateur" Avec mon image de profil du forum: https://2img.net/u/2817/56/15/08/avatars/1-85.jpg
    Et en-dessous, "envoyez un mp" ( url: http://coinpsycologieyeah.forumdiet.net/privmsg?folder=inbox )
    et profil: http://coinpsycologieyeah.forumdiet.net/u1
    Pareil pour la modératrice: ( photo de profil: https://2img.net/u/2817/56/15/08/avatars/17-28.jpg )
    envoyez un mp: url: http://coinpsycologieyeah.forumdiet.net/privmsg?folder=inbox
    Et profil: http://coinpsycologieyeah.forumdiet.net/u17.

    Actualités:
    ( je pourrais le modifier moi même ? )
    - Un sondage est lancé sur un nouvel habillage pour le forum.
    - Retrouvez le logo du forum & la bannière à partager.

    Pour plus se renseignement, (Lien hypertexte si possible ): Cliquez ici ( http://coinpsycologieyeah.forumdiet.net/f5-news-du-forum )

    Les règles:
    -Le point le plus fort du forum est le respect, cela est le plus important. Un membre ne respectant pas cette règle se verra sanctionné rapidement...
    - La modération n'est pas disponible 24/24h, si jamais, vous, en tant que membre, êtes témoin d'une scene raciste, incitant à la haine et tout ce qui s'en suit au non respect: Vous êtes priez dans parler à la modération.

    Pour plus d'information sur "comment adhérer un groupe" (lien hypertexte): Cliquez ici ( http://coinpsycologieyeah.forumdiet.net/t2-comment-adherer-un-groupe )


    Je m'escuse d'avance si j'en demande trop!

    Couleurs ou tons :Alors....dans des tons plutot marins, bordures bleus foncés et l'intérrieure ABD3D7

    Images :Pas d'image, mais il faudrait que la page d'acceuil façe environ: L: 500 Px. H: 375 pix ( vers cette taille là )
    Autres précisions : Je rajoute que j'aimerais bien directement quand on arrive sur mon forum sans rien cliquer que la page d'acceuil soit sur l'onglet "Coin Psy" automatiquement ^^


    Je ne sais pas si c'est trop pour vous pas, escusez moi si ça l'ait! Et merci d'avance! Very Happy
    Klash
    Klash
    MasculinAge : 44Messages : 20653

    Mar 30 Avr 2013 - 7:22

    La commande est validée !▬ il est autorisé de la relancer toutes les 48h minimum
    ▬ une commande laissée sans nouvelles sera relancée au bout de 10 jours
    ▬ après la relance du modérateur, si nous n'avons toujours pas d'actualisation de la commande elle sera archivée après une semaine



    Commande page d'acceuil- Coin Psy 376864signichigo
    Zooé
    Zooé
    FémininAge : 27Messages : 66

    Mar 30 Avr 2013 - 15:42

    Merci beaucoup!
    Këdherys
    Këdherys
    MasculinAge : 27Messages : 130

    Jeu 2 Mai 2013 - 14:57

    Je t'avais déjà envoyé un MP avec un aperçu, mais je veux bien reprendre la commande avec les nouveautés qui se sont rajoutées !

    Donc, je me mets au travail, petite précision, je garde l'image du Lapin ? xD




    Zooé
    Zooé
    FémininAge : 27Messages : 66

    Jeu 2 Mai 2013 - 18:20

    Oui j'ai uvue ! Merci beaucoup Very Happy
    C'est très bien, j'adore Mais.. niveau dimensioner c'est trop petit :\ j'ai du me tromper, désolée, mais j'aimerais bien que ce soir un peu plus grand !

    Et sinon, dans l'onglet "Staff" , es que les images y sont deja mise comme je l'avais demandé, ou je le fait :) ?
    Këdherys
    Këdherys
    MasculinAge : 27Messages : 130

    Jeu 2 Mai 2013 - 18:43

    Je vais le faire bien entendu, mais tu veux des images avec infobulle ?

    Sinon, je vais augmenter la taille de tout ça, et mettre les couleurs que tu as demandé.




    Zooé
    Zooé
    FémininAge : 27Messages : 66

    Jeu 2 Mai 2013 - 19:55

    Je veux bien pour l'inforbulle,
    Merci encore pour tout Very Happy
    Këdherys
    Këdherys
    MasculinAge : 27Messages : 130

    Sam 4 Mai 2013 - 1:44

    Désolé du retard, j'ai enfin fini !

    voilà à quoi ça ressemble :

    Aperçu:

    Le code CSS :

    Code:
    #PA{
       position:relative;
       z-index:10;
       width:800px; /*Largeur de la PA*/
       height:300px; /*Longeur de la PA*/
       overflow:hidden;
       background-color:black;
       padding:0px;
       border-radius:5px 5px 5px 5px;
         margin:0px;
    }

    ul{/*Nécessaire pour les onglets se colle à la bordure*/
       margin-left:-700px;
         margin-top:0px;
       padding:0px;
    }

    #PA ul li{
       display:block;
       border-left:2px blue solid;
       margin:0px;
       width:100px;
       height:75px;
       background-color:#ABD3D7;
       -webkit-opacity:0.7;
      -moz-opacity:0.7;   
      opacity:0.7;
       font-size:24px;
       
    }

    #PA ul li{
    -webkit-opacity:0.7;
      -moz-opacity:0.7;
      opacity:0.7;
       font-size:24px;
    }
    span{
         margin:0px;
       -webkit-opacity:1;
      opacity:1;
       text-align:left;
       font-size:20px;
       padding:5px;
       overflow:auto;
    }

    ul li:first-of-type{

       border-radius:5px 0px 0px 0px;
    }
    ul li:last-of-type{
       
       border-radius:0px 0px 0px 5px;
    }

    #Onglet1{
       display:block;
       position:relative;
       z-index:0;
       margin-left:100px;
       margin-top:-65px;
       width:700px;
       height:300px;
       
       background-color:#ABD3D7;
       -webkit-transition:all .25s ease-in;
       -webkit-opacity:1;
       -webkit-transform:scale(1);
         -moz-transition:all .25s ease-in;
       -moz-opacity:1;
       -moz-transform:scale(1);
         transition:all .25s ease-in;
       opacity:1;
       transform:scale(1);


    }
    #Onglet2{
       display:block;
       position:relative;
       margin-left:100px;
       margin-top:-105px;
       padding:10px;
       width:700px;
       height:300px;
       
       background-color:#ABD3D7;
       -webkit-transition:all .25s ease-in;
       -webkit-opacity:0;
       -webkit-transform:scale(0);
         -moz-transition:all .25s ease-in;
       -moz-opacity:0;
       -moz-transform:scale(0);
         transition:all .25s ease-in;
       opacity:0;
       transform:scale(0);
    }
    #Onglet3{
       display:block;
       position:relative;
       margin-left:100px;
       margin-top:-180px;
       width:700px;
       height:300px;
       
       background-color:#ABD3D7;
         -webkit-transition:all .25s ease-in;
          -webkit-opacity:0;
       -webkit-transform:scale(0);
         -moz-transition:all .25s ease-in;
       -moz-opacity:0;
       -moz-transform:scale(0);
         transition:all .25s ease-in;
       opacity:0;
       transform:scale(0);
    }
    #Onglet4{
       display:block;
       position:relative;
       z-index:3;
       margin-left:100px;
       margin-top:-280px;
       width:700px;
       height:300px;
       
       background-color:#ABD3D7;
       -webkit-transition:all .25s ease-in;
          -webkit-opacity:0;
       -webkit-transform:scale(0);
         -moz-transition:all .25s ease-in;
       -moz-opacity:0;
       -moz-transform:scale(0);
         transition:all .25s ease-in;
       opacity:0;
       transform:scale(0);
    }

    #PA .Lien{
       -webkit-transition:all .25s ease-in;
         -moz-transition:all .25s ease-in;
      transition:all .25s ease-in;
       position:relative;
       left:0px;
       text-decoration:none;
       color:blue;
       
    }
    #PA .Liens{
          -webkit-transition:all .25s ease-in;
         -moz-transition:all .25s ease-in;
      transition:all .25s ease-in;
       position:relative;
       right:0px;
       text-decoration:none;
       color:blue;
       
    }

    #PA .Lien:hover{
       -webkit-transition:all .25s ease-in;
         -moz-transition:all .25s ease-in;
      transition:all .25s ease-in;
       position:relative;
       left:10px;
       color:green;
    }



    #PA .Liens:hover{
       -webkit-transition:all .25s ease-in;
         -moz-transition:all .25s ease-in;
      transition:all .25s ease-in;
       position:relative;
       right:10px;
       color:green;
    }


    /*Effets dynamique des Onglets*/

    #PA ul li:hover{
       -webkit-opacity:1;
         -moz-opacity:1;
         opacity:1;
    }

    /*Effets dynamique du Contenu*/


    ul li:hover #Onglet2, ul li:focus #Onglet2{
       -webkit-transition:all .25s ease-in;
       -webkit-transform:scale(1);
       -webkit-opacity:1;
      -moz-transition:all .25s ease-in;
       -moz-transform:scale(1);
       -moz-opacity:1;
    transition:all .25s ease-in;
       transform:scale(1);
       opacity:1;
         
    }
    ul li:hover #Onglet3, ul li:focus #Onglet3{
       -webkit-transition:all .25s ease-in;
       -webkit-transform:scale(1);
       -webkit-opacity:1;
      -moz-transition:all .25s ease-in;
       -moz-transform:scale(1);
       -moz-opacity:1;
    transition:all .25s ease-in;
       transform:scale(1);
       opacity:1;
    }
    ul li:hover #Onglet4, ul li:focus #Onglet4{
       -webkit-transition:all .25s ease-in;
       -webkit-transform:scale(1);
       -webkit-opacity:1;
      -moz-transition:all .25s ease-in;
       -moz-transform:scale(1);
       -moz-opacity:1;
    transition:all .25s ease-in;
       transform:scale(1);
       opacity:1;
    }

    /* Menu pour le Staff */

    #Onglet2{
       
       text-align:Center;
    }

    #Onglet2 span img{
       -webkit-transition:all .25s ease-in;
       -moz-transition:all .25s ease-in; 
        transition:all .25s ease-in;
       -webkit-filter:grayscale(100%) blur(2px);
         -moz-filter:grayscale(100%) blur(2px);
         filter:grayscale(100%) blur(2px);
    }

    #Onglet2 span span{
       display:none;
       text-align:center;
       margin:auto;
    }

    #Onglet2 .Span:hover img{
       -webkit-transition:all .25s ease-in;
         -moz-transition:all .25s ease-in;
         transition:all .25s ease-in;
       -webkit-filter:grayscale(0%) blur(0px);
         -moz-filter:grayscale(0%) blur(0px);
         filter:grayscale(0%) blur(0px);
    }

    #Onglet2 .Span:hover span{
       display:block;
       width:700px;
       position:absolute;

       
    }

    Et le code HTML :

    Code:
    <div id="PA">
          <ul>
             <li>Coin Psy
             <span id="Onglet1">
                Ce forum est un forum dédié à la psychologie, <br/>
                les membres donnent des conseils et avis, mais en aucun cas cela remplace une séance psychologique chez un spécialiste, nous ne sommes pas des proféssionels. <br/>
                Tu pourras y retrouver pleins de catégories diverses pour te libérer ! <br/>
                Pour les nouveaux membres qui faites vos premiers pas sur Coin Psy, je vous conseil :<br/>
                - De vous présenter.<br/>
                - De mettre une photo de profil.<br/>
                - De lire attentivement les règles.<br/>
             </span>
             </li>
             <li>Le Staff
             <span id="Onglet2">
             <span class="Span"><img src="http://r28.imgfast.net/users/2817/56/15/08/avatars/1-85.jpg" alt="Avatar"/><span><a class="Liens"href="http://coinpsycologieyeah.forumdiet.net/privmsg?folder=inbox">Message</a>  <a class="Lien" href="http://coinpsycologieyeah.forumdiet.net/u1">Profil</a></span></span>
             <span class="Span"><img src="http://r28.imgfast.net/users/2817/56/15/08/avatars/17-28.jpg" alt="Avatar"/><span><a class="Liens" href="http://coinpsycologieyeah.forumdiet.net/privmsg?folder=inbox">Message</a>  <a class="Lien" href="http://coinpsycologieyeah.forumdiet.net/u17.">Profil</a></span></span>
             </span>
             </li>
             <li>Actu
             <span id="Onglet3">
             <!--Tu écris ici tes News !-->
             - Un sondage est lancé sur un nouvel habillage pour le forum.<br/>
             - Retrouvez le logo du forum & la bannière à partager.<br/>
             <br/>
             Pour plus se renseignement, Cliquez  <a class="Lien" href="http://coinpsycologieyeah.forumdiet.net/f5-news-du-forum">Ici</a> <br/>
             </span>
             </li>
             <li>Les Règles
             <span id="Onglet4">
                -Le point le plus fort du forum est le respect, cela est le plus important. Un membre ne respectant pas cette règle se verra sanctionné rapidement...<br/>
                - La modération n'est pas disponible 24/24h, si jamais, vous, en tant que membre, êtes témoin d'une scene raciste, incitant à la haine et tout ce qui s'en suit au non respect:<br/> Vous êtes priez dans parler à la modération.<br/>
                <br/>
    Pour plus d'information sur "comment adhérer un groupe" : Cliquez <a class="Lien" href=" http://coinpsycologieyeah.forumdiet.net/t2-comment-adherer-un-groupe">ici</a>

             </span>
             </li>
          </ul>
       </div>
    Zooé
    Zooé
    FémininAge : 27Messages : 66

    Sam 4 Mai 2013 - 10:29

    Merci,
    Désolée mais ça ne marche pas, à partir du moment ou je met les codes l'écritures de mon forum devient beaucoup plus grande :\
    Këdherys
    Këdherys
    MasculinAge : 27Messages : 130

    Sam 4 Mai 2013 - 14:28

    Rofl, je vais voir ça ç'doit être un fail dans mon magnifique CSS tout crade XD




    Këdherys
    Këdherys
    MasculinAge : 27Messages : 130

    Sam 4 Mai 2013 - 14:47

    C'est toujours le même HTML, mais le CSS est différent ^^ :


    Code CSS :
    Code:
    #PA{
       position:relative;
       z-index:10;
       width:800px; /*Largeur de la PA*/
       height:300px; /*Longeur de la PA*/
       overflow:hidden;
       background-color:black;
       padding:0px;
       border-radius:5px 5px 5px 5px;
         margin:0px;
    }

    ul{/*Nécessaire pour les onglets se colle à la bordure*/
       margin-left:-700px;
         margin-top:0px;
       padding:0px;
    }

    #PA ul li{
       display:block;
       border-left:2px blue solid;
       margin:0px;
       width:100px;
       height:75px;
       background-color:#ABD3D7;
       -webkit-opacity:0.7;
      -moz-opacity:0.7;   
      opacity:0.7;
       font-size:24px;
       
    }

    #PA ul li{
    -webkit-opacity:0.7;
      -moz-opacity:0.7;
      opacity:0.7;
       font-size:24px;
    }
    #PA span{
         margin:0px;
         margin-left:100px;
         margin-top:-65px;
       -webkit-opacity:1;
         opacity:1;
       text-align:left;
       font-size:20px;
       padding:5px;
       overflow:auto;
    }

    ul li:first-of-type{

       border-radius:5px 0px 0px 0px;
    }
    ul li:last-of-type{
       
       border-radius:0px 0px 0px 5px;
    }

    #Onglet1{
       display:block;
       position:block;
       z-index:0;
       margin-left:150px;
       margin-top:-65px;
       width:700px;
       height:300px;
       
       background-color:#ABD3D7;
       -webkit-transition:all .25s ease-in;
       -webkit-opacity:1;
       -webkit-transform:scale(1);
         -moz-transition:all .25s ease-in;
       -moz-opacity:1;
       -moz-transform:scale(1);
         transition:all .25s ease-in;
       opacity:1;
       transform:scale(1);


    }
    #Onglet2{
       display:block;
       position:absolute;
         top:65px;
       margin-left:100px;
       margin-top:-160px;
       padding:10px;
       width:700px;
       height:300px;
       
       background-color:#ABD3D7;
       -webkit-transition:all .25s ease-in;
       -webkit-opacity:0;
       -webkit-transform:scale(0);
         -moz-transition:all .25s ease-in;
       -moz-opacity:0;
       -moz-transform:scale(0);
         transition:all .25s ease-in;
       opacity:0;
       transform:scale(0);
    }
    #Onglet3{
       display:block;
       position:absolute;
         top:65px;
       margin-left:100px;
       margin-top:-255px;
       width:700px;
       height:300px;
       
       background-color:#ABD3D7;
         -webkit-transition:all .25s ease-in;
          -webkit-opacity:0;
       -webkit-transform:scale(0);
         -moz-transition:all .25s ease-in;
       -moz-opacity:0;
       -moz-transform:scale(0);
         transition:all .25s ease-in;
       opacity:0;
       transform:scale(0);
    }
    #Onglet4{
       display:block;
       position:absolute;
         top:65px;
       z-index:3;
       margin-left:100px;
       margin-top:-280px;
       width:700px;
       height:300px;
       
       background-color:#ABD3D7;
       -webkit-transition:all .25s ease-in;
          -webkit-opacity:0;
       -webkit-transform:scale(0);
         -moz-transition:all .25s ease-in;
       -moz-opacity:0;
       -moz-transform:scale(0);
         transition:all .25s ease-in;
       opacity:0;
       transform:scale(0);
    }

    #PA .Lien{
       -webkit-transition:all .25s ease-in;
         -moz-transition:all .25s ease-in;
      transition:all .25s ease-in;
       position:relative;
       left:0px;
       text-decoration:none;
       color:blue;
       
    }
    #PA .Liens{
          -webkit-transition:all .25s ease-in;
         -moz-transition:all .25s ease-in;
      transition:all .25s ease-in;
       position:relative;
       right:0px;
       text-decoration:none;
       color:blue;
       
    }

    #PA .Lien:hover{
       -webkit-transition:all .25s ease-in;
         -moz-transition:all .25s ease-in;
      transition:all .25s ease-in;
       position:relative;
       left:10px;
       color:green;
    }



    #PA .Liens:hover{
       -webkit-transition:all .25s ease-in;
         -moz-transition:all .25s ease-in;
      transition:all .25s ease-in;
       position:relative;
       right:10px;
       color:green;
    }


    /*Effets dynamique des Onglets*/

    #PA ul li:hover{
       -webkit-opacity:1;
         -moz-opacity:1;
         opacity:1;
    }

    /*Effets dynamique du Contenu*/


    ul li:hover #Onglet2, ul li:focus #Onglet2{
       -webkit-transition:all .25s ease-in;
       -webkit-transform:scale(1);
       -webkit-opacity:1;
      -moz-transition:all .25s ease-in;
       -moz-transform:scale(1);
       -moz-opacity:1;
    transition:all .25s ease-in;
       transform:scale(1);
       opacity:1;
         
    }
    ul li:hover #Onglet3, ul li:focus #Onglet3{
       -webkit-transition:all .25s ease-in;
       -webkit-transform:scale(1);
       -webkit-opacity:1;
      -moz-transition:all .25s ease-in;
       -moz-transform:scale(1);
       -moz-opacity:1;
    transition:all .25s ease-in;
       transform:scale(1);
       opacity:1;
    }
    ul li:hover #Onglet4, ul li:focus #Onglet4{
       -webkit-transition:all .25s ease-in;
       -webkit-transform:scale(1);
       -webkit-opacity:1;
      -moz-transition:all .25s ease-in;
       -moz-transform:scale(1);
       -moz-opacity:1;
    transition:all .25s ease-in;
       transform:scale(1);
       opacity:1;
    }

    /* Menu pour le Staff */

    #Onglet2{
       
       text-align:Center;
    }

    #Onglet2 span img{
       -webkit-transition:all .25s ease-in;
       -moz-transition:all .25s ease-in; 
        transition:all .25s ease-in;
       -webkit-filter:grayscale(100%) blur(2px);
         -moz-filter:grayscale(100%) blur(2px);
         filter:grayscale(100%) blur(2px);
    }

    #Onglet2 span span{
       display:none;
       text-align:center;
       margin:auto;
    }

    #Onglet2 .Span:hover img{
       -webkit-transition:all .25s ease-in;
         -moz-transition:all .25s ease-in;
         transition:all .25s ease-in;
       -webkit-filter:grayscale(0%) blur(0px);
         -moz-filter:grayscale(0%) blur(0px);
         filter:grayscale(0%) blur(0px);
    }

    #Onglet2 .Span:hover span{
       display:block;
       width:700px;
       position:absolute;

       
    }




    Zooé
    Zooé
    FémininAge : 27Messages : 66

    Sam 4 Mai 2013 - 21:02

    Désolée, mais toujours rien, là tout est normal sauf que la PA n'apparait pas !
    Zooé
    Zooé
    FémininAge : 27Messages : 66

    Lun 6 Mai 2013 - 19:08

    Up! Sad
    Zooé
    Zooé
    FémininAge : 27Messages : 66

    Mer 8 Mai 2013 - 11:23

    up
    Neva
    Neva
    FémininAge : 33Messages : 18565

    Jeu 9 Mai 2013 - 12:28

    Salut,

    Fais attention, tu es en avance sur ton up. Tu aurais dû attendre 48h complètes, c'est le minimum du minimum

    Au passage, je vois que tes peanut's sont à -102. Ta demande reste ok pour l'instant mais Never est un forum d'entraide alors nous demandons à ceux qui nous demandent des services d'en rendre aussi pour que le forum puisse fonctionner. Pas besoin de compétences particulières pour cela, je te renvoie vers ce tableau et tu peux toujours demander si tu ne trouves pas où participer. :)

    Pense à bien lire les règles de la section dans laquelle tu te trouves et n'hésite pas à te référer aux règles générales aussi



     
    Këdherys
    Këdherys
    MasculinAge : 27Messages : 130

    Sam 11 Mai 2013 - 1:17

    Néanmoins, la commande est lancée, je l'ai prise donc je la continue ... Zooé, tu es sous quel navigateur au juste ? C'est peut-être l'origine du bug (sinon j'dois revoir tout mon code, donc ça me rassurerais xDD)




    Neva
    Neva
    FémininAge : 33Messages : 18565

    Sam 18 Mai 2013 - 23:40

    Zooé, toujours là ?



     
    Neva
    Neva
    FémininAge : 33Messages : 18565

    Mer 29 Mai 2013 - 18:17

    Salut,

    Toujours en attente de nouvelles ^^
    Deuxième passage



     
    Anonymous
    Invité

    Jeu 6 Juin 2013 - 18:40

      Hey,

      Pas de nouvelles, pas de résultat.
      Troisième relance.

      Bonne soirée.
    Anonymous
    Invité

    Mer 19 Juin 2013 - 11:36

      Hey,

      Sans nouvelles, j'archive donc.

      Bonne continuation.
    Contenu sponsorisé


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