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.


    Une Pa contre un coeur

    Jull421
    Jull421
    FémininAge : 30Messages : 145

    Ven 28 Fév 2014 - 1:10

    Ma demande



       Salut, je sais ce que je veux, mais je ne suis pas capable de faire le squelette du code. en gros, vous avez pas a faire les image ou encore agencer les couleur ou choisir le bon ''font'', je suis capable de faire cela. en gros, j'ai besoin de quelqu'un qui fait le code. je me repette xD. Merci d'avance a celui qui acceptera

       Schéma(s) et Eléments
       Schémas :
    Schémas:
       Tailles des éléments : la taille de l'image ou du moin, dans cette proportion.
       Effets voulus :je vais y aller point par point pour que se soit plus simple:

    • Les ronds marquer Staff doit être des image avec un contour. lorsque l'on passe le souris sur les rond, un carré apparet ou l'on peut avoir accet a un texte. les nom doivent chevaucher le tout et être modifiable


    • Le rectangle bleu poudre des partenaire doit être surmonter d'un titre le chevauchant (comme dans l'image) avec un encadre de 1 pixel


    • Le carré vert doit dénuer de cadre, et est simplement une zone de texte


    • les News un rectangle bien simple avec un zone de texte


    • Les onglet (contexte, Event, Prédéfini) doivent changer par un clic et changer la zone de texte défini par le carré vert sur le schéma


    • Si posible, après avoir ouvert un onglet, on peut le fermer en clic de nouveau dessus.


    • ne pas mettre de Signe pour NU ou votre nom, il seront écrit dans la zone de texte qui apparet lors de l'ouverture de la page


    • j’aimerais bien un fond image pour le new et pour le reste de la PA si posible (les deux différent)



       Ressources
       je m’arrangerais moi même ♥.

       Autres précisions ?
        Gros merci a celui qui acceptera, s'il veux, je lui ferrais une image en pixel art de son choix
       
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Ven 28 Fév 2014 - 6:08

    Je vais essayer ^^
    Je posterais ça soit dans la soirée, soit ce week end Wink
    • Revenir en haut
    Jull421
    Jull421
    FémininAge : 30Messages : 145

    Ven 28 Fév 2014 - 13:17

    ok merci! ♥



    Une Pa contre un coeur 140228025614860943
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Sam 1 Mar 2014 - 15:06

    Je devrais avoir fini dans l'après-midi.
    Il ne me reste que ne "news" et le "partenaires"
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Sam 1 Mar 2014 - 16:24

    Voici un screen de mon travail.
    Je n'ai pas réussi à faire l'effet (hover) pour les images (ronds).
    Je n'ai pas mis d'image mais je t'ai mis le code pour que tu n'ais qu'à mettre ton url (d'ou le cercle avec la transparence).

    Screen:

    Code:
    <div class="corps">
       <table class="table">
          <tr>
             <td><div class="img1"></td>
             <td><div class="img2"></td>
          </tr>
          <tr>
             <td><div class="noms1">NOM</div></td>
             <td><div class="noms2">NOM</div></td>
          </tr>
       </table>
       <div class="news">
          <center><span class="newstitle">NEWS</span></center>
          <marquee direction="up" scrollamount="2">icez ifezj ifoe zanjckraioe iazjic znjcrenauiecnz    jc zenjcenz    j cnjk ez   njkc eznjiceu   i fnjkf enzjk nez   jk cnzjkc enzkjc nejzkndejkejaiov ekoa vnfio rnejkvfnjkv frnz vnfrjk vfrnzk vrfznkv frizog riolv,fklzv fioz nklv fdnjk v</marquee>
       </div>
       <div align="right"><div id="accueil1"><div id="accueil2"><div id="accueil3"><div id="accueil4">

          <div class="ongls"><span class="ongl1"><a href="#accueil1">Accueil</a></span>
          <span class="ongl2"><a href="#accueil2">Contexte</a></span>
          <span class="ongl3"><a href="#accueil3">Prédéfinie</a></span>
          <span class="ongl4"><a href="#accueil4">Events</a></span></div>

          <div id="content1">

          <div id="content2">
             <div class="info_accueil">Ici se trouve le contenu de votre second onglet.</div>
          </div>

          <div id="content3">
             <div class="info_accueil">Ici se trouve le contenu de votre troisième onglet.</div>
          </div>

          <div id="content4">
             <div class="info_accueil">Ici se trouve le contenu de votre quatrième onglet.</div>
          </div>

             <div class="info_accueil"></div>
          </div>

       </div></div></div></div>
       </div>

       <div align="center">
       <div class="partitle">Partenaires</div>
       <div class="partmsg"><marquee scrollamount="2">partenaires</marquee></div>
       </div>
    </div>

    Code:
    /*Onglets*/
    .ongls{
       margin: -305px 5px 70px 0px;
    }
       .ongl1, .ongl2, .ongl3, .ongl4
    {
    display: inline-block;
    width: 80px;
    height: 18px;
    margin-left: 7px;
    background-color: #b4c385;
    border: 1px solid #808489;
    border: 1px solid #808489;
    border: 1px solid #808489;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    text-align: center;
    }
    .ongl1:hover, .ongl2:hover, .ongl3:hover, .ongl4:hover
    {
    background-color: #c8e75f;
    }
    .ongl1 a, .ongl2 a, .ongl3 a, .ongl4 a
    {
    display: block;
    padding-top: 2px;
    font-weight: bold;
    text-decoration: none !important;
    color: #e5fae4 !important;
    font-size: 12px;
    }
    .ongl1 a:hover, .ongl2 a:hover, .ongl3 a:hover, .ongl4 a:hover
    {
    color: #446291 !important;;
    }

    /*Clics*/
    #content1
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: hidden;
    background: #b5e61d;
    font-size: 11px;
    color: #3c506f;
    margin-right: 10px;
    margin-top: -35px;
    }
    #content2, #content3, #content4
    {
    display: none;
    }
    #accueil1:target #content1
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: hidden;
    font-size: 11px;
    color: #b5e61d;
    opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100);
    }
    #accueil2:target #content2
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: hidden;
    background: #b5e61d;
    font-size: 11px;
    color: #3c506f;
    opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100);
    }
    #accueil3:target #content3
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: hidden;
    background: #b5e61d;
    font-size: 11px;
    color: #3c506f;
    }
    #accueil4:target #content4
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: hidden;
    background: #b5e61d;
    font-size: 11px;
    color: #3c506f;
    }
    .info_accueil
    {
    padding: 10px;
    text-align: justify;
    }

    .credit
    {
    display: block;
    text-align: right;
    margin-right: 20px;
    }
    .credit a
    {
    font-size: 10px;
    text-decoration: none !important;
    }

    /*All*/
    .corps{
       width: 600px;
       height: 344px;
       border: 3px black solid;
       margin: 40px 10px 10px 40px;
    }
    .table{
       margin: -20px 0 0 -20px;
    }
    .img1, .img2{
       width: 100px;
       height: 100px;
       border-radius: 100px;
       -moz-border-radius: 100px;
       -webkit-border-radius: 100px;
       background-image: url(URL);
       border: 1px solid black;
    }
    .img1:hover, .img2:hover{
       width: 100px;
       height: 100px;
       border-radius: 10px;
       -moz-border-radius: 10px;
       -webkit-border-radius: 10px;
       background-color: #EEE;
       border: 1px solid black;
    }
    .txt1{
       text-visibility: hidden;
    }
    .txt1:hover{
       text-visibility: hidden;
    }
    .noms1, .noms2{
       margin: -15px 0 0 0;
       font-size: 20px;
       width: 100px;
       text-align: center;
       text-shadow: 0px 0px 5px #000;
       color: #FFF;
    }
    .news{
       margin: 10px;
       width: 130px;
       height: 170px;
       border: 2px solid black;
       text-align: justify;
       padding: 0px 2px 2px 2px;
       font-size: 14px;
       overflow: hidden;
    }
    .newstitle{
       text-align: center;
       font-weight: bold;
       font-size: 22px;
    }
    .partmsg{
       background-color: #98d9ea;
       margin: -15px 10px 5px 10px;
       height: 25px;
       padding: 10px 5px 5px 5px;
    }
    .partitle{
       margin-top: 38px;
       text-align: center;
       font-weight: bold;
       font-size: 22px;
    }

    Je t'ai ajouté deux
    Code:
    <marquee>
    une pour le texte des news (de haut en bas) et une pour les partenaires (droite à gauche)
    • Revenir en haut
    Jull421
    Jull421
    FémininAge : 30Messages : 145

    Sam 1 Mar 2014 - 17:48

    http://monde-des-tenebres.web-rpg.com/

    Le code ne fonctionne pas j'ai pourtant copié le premier code sur la PA et le deuxième dans la feuille CSS

    et merci de m'aider a avoir une belle PA♥




    Une Pa contre un coeur 140228025614860943
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Sam 1 Mar 2014 - 18:10

    Attends je regarde
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Sam 1 Mar 2014 - 18:15

    C'est ton forum test ?

    edit :

    Essais ça.

    Code:
    /*Onglets*/
    .ongls{
     margin: -305px 5px 70px 0px;
    }
     .ongl1, .ongl2, .ongl3, .ongl4
    {
    display: inline-block;
    width: 80px;
    height: 18px;
    margin-left: 7px;
    background-color: #b4c385;
    border: 1px solid #808489;
    border: 1px solid #808489;
    border: 1px solid #808489;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    text-align: center;
    }
    .ongl1:hover, .ongl2:hover, .ongl3:hover, .ongl4:hover
    {
    background-color: #c8e75f;
    }
    .ongl1 a, .ongl2 a, .ongl3 a, .ongl4 a
    {
    display: block;
    padding-top: 2px;
    font-weight: bold;
    text-decoration: none !important;
    color: #e5fae4 !important;
    font-size: 12px;
    }
    .ongl1 a:hover, .ongl2 a:hover, .ongl3 a:hover, .ongl4 a:hover
    {
    color: #446291 !important;;
    }

    /*Clics*/
    #content1
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: hidden;
    background: #b5e61d;
    font-size: 11px;
    color: #3c506f;
    margin-right: 10px;
    margin-top: -35px;
    }
    #content2, #content3, #content4
    {
    display: none;
    }
    #accueil1:target #content1
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: hidden;
    font-size: 11px;
    color: #b5e61d;
    opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100);
    }
    #accueil2:target #content2
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: hidden;
    background: #b5e61d;
    font-size: 11px;
    color: #3c506f;
    opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100);
    }
    #accueil3:target #content3
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: hidden;
    background: #b5e61d;
    font-size: 11px;
    color: #3c506f;
    }
    #accueil4:target #content4
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: hidden;
    background: #b5e61d;
    font-size: 11px;
    color: #3c506f;
    }
    .info_accueil
    {
    padding: 10px;
    text-align: justify;
    }

    .credit
    {
    display: block;
    text-align: right;
    margin-right: 20px;
    }
    .credit a
    {
    font-size: 10px;
    text-decoration: none !important;
    }

    /*All*/
    .corps{
     width: 600px;
     height: 344px;
     border: 3px black solid;
     margin: 40px 10px 10px 40px;
    }
    .table{
     margin: -20px 0 0 -20px;
    }
    .img1{
     width: 100px;
     height: 100px;
     border-radius: 100px;
     -moz-border-radius: 100px;
     -webkit-border-radius: 100px;
     background-image: url(URL);
     border: 1px solid black;
    }
    .img2{
     width: 100px;
     height: 100px;
     border-radius: 100px;
     -moz-border-radius: 100px;
     -webkit-border-radius: 100px;
     background-image: url(URL);
     border: 1px solid black;
     margin-left: -50px;
    }
    .img1:hover, .img2:hover{
     width: 100px;
     height: 100px;
     border-radius: 10px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     background-color: #EEE;
     border: 1px solid black;
    }
    .noms1, .noms2{
     margin: -15px 0 0 0;
     font-size: 20px;
     width: 100px;
     text-align: center;
     text-shadow: 0px 0px 5px #000;
     color: #FFF;
    }
    .news{
     margin: -50px 10px 10px 10px;
     width: 130px;
     height: 170px;
     border: 2px solid black;
     text-align: justify;
     padding: 0px 2px 2px 2px;
     font-size: 14px;
     overflow: hidden;
    }
    .newstitle{
     text-align: center;
     font-weight: bold;
     font-size: 22px;
    }
    .partmsg{
     background-color: #98d9ea;
     margin: -15px 10px 5px 10px;
     height: 25px;
     padding: 10px 5px 5px 5px;
    }
    .partitle{
     margin-top: 38px;
     text-align: center;
     font-weight: bold;
     font-size: 22px;
    }

    Code:
    <div class="corps">
     <table class="table">
     <tr>
     <td><div class="img1"></td>
     <td><div class="img2"></td>
     </tr>
     <tr>
     <td><div class="noms1">NOM</div></td>
     <td><div class="noms2">NOM</div></td>
     </tr>
     </table>
     <div class="news">
     <center><span class="newstitle">NEWS</span></center>
     <marquee direction="up" scrollamount="2">icez ifezj ifoe zanjckraioe iazjic znjcrenauiecnz jc zenjcenz j cnjk ez njkc eznjiceu i fnjkf enzjk nez jk cnzjkc enzkjc nejzkndejkejaiov ekoa vnfio rnejkvfnjkv frnz vnfrjk vfrnzk vrfznkv frizog riolv,fklzv fioz nklv fdnjk v</marquee>
     </div>
     <div align="right"><div id="accueil1"><div id="accueil2"><div id="accueil3"><div id="accueil4">

     <div class="ongls"><span class="ongl1"><a href="#accueil1">Accueil</a></span>
     <span class="ongl2"><a href="#accueil2">Contexte</a></span>
     <span class="ongl3"><a href="#accueil3">Prédéfinie</a></span>
     <span class="ongl4"><a href="#accueil4">Events</a></span></div>

     <div id="content1">

     <div id="content2">
     <div class="info_accueil">Ici se trouve le contenu de votre second onglet.</div>
     </div>

     <div id="content3">
     <div class="info_accueil">Ici se trouve le contenu de votre troisième onglet.</div>
     </div>

     <div id="content4">
     <div class="info_accueil">Ici se trouve le contenu de votre quatrième onglet.</div>
     </div>

     <div class="info_accueil"></div>
     </div>

     </div></div></div></div>
     </div>

     <div align="center">
     <div class="partitle">Partenaires</div>
     <div class="partmsg"><marquee scrollamount="2">partenaires</marquee></div>
     </div>
    </div>
    • Revenir en haut
    Jull421
    Jull421
    FémininAge : 30Messages : 145

    Sam 1 Mar 2014 - 18:34

    non, c'est le forum pour la PA (il y a rien de fini xD

    et sa fonction toujours pas



    Une Pa contre un coeur 140228025614860943
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Sam 1 Mar 2014 - 18:42

    Hum... attends je continue de regarder.

    Le truc c'est que ça réagit pas comme sur le test que je fais avec mon programme.
    Peux-tu remettre le premier code ?
    • Revenir en haut
    Jull421
    Jull421
    FémininAge : 30Messages : 145

    Sam 1 Mar 2014 - 19:23

    premier code remi

    j'ai aussi enlever le code qui etait sur le Css



    Une Pa contre un coeur 140228025614860943
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Sam 1 Mar 2014 - 23:44

    Tout le code que j'ai fais ?
    • Revenir en haut
    Jull421
    Jull421
    FémininAge : 30Messages : 145

    Dim 2 Mar 2014 - 1:04

    non le seul code qui reste c'est le code de la PA, je sais pas d’où venais le reste du code



    Une Pa contre un coeur 140228025614860943
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Dim 2 Mar 2014 - 17:27

    Code mis à jour. Je pense que ça devrait aller (j'ai fais les modifs en direct sur mon forum test). Dis-m'en des nouvelles :

    Code:
    <div class="corps">
     
    <div align="left">
     
    <table class="table">
     
    <tbody>
     
    <tr>
     
    <td>
     
    <div class="img1">
     
    </div>
     
    </td>
     
    <td>
     
    <div class="img2">
     
    </div>
     
    </td>
     
    </tr>
     
    <tr>
     
    <td>
     
    <div class="noms1">
     NOM
    </div>
     
    </td>
     
    <td>
     
    <div class="noms2">
     NOM
    </div>
     
    </td>
     
    </tr>
     
    </tbody>
     
    </table>
     
    </div>
     
    <div align="left">
     
    <div class="news">
     
    <center>
     <span class="newstitle">NEWS</span>
    </center>
     <marquee scrollamount="2" direction="up">icez ifezj ifoe zanjckraioe iazjic znjcrenauiecnz jc zenjcenz j cnjk ez njkc eznjiceu i fnjkf enzjk nez jk cnzjkc enzkjc nejzkndejkejaiov ekoa vnfio rnejkvfnjkv frnz vnfrjk vfrnzk vrfznkv frizog riolv,fklzv fioz nklv fdnjk v</marquee>
    </div>
     
    </div>
     
    <div align="right">
     
    <div id="accueil1">
     
    <div id="accueil2">
     
    <div id="accueil3">
     
    <div id="accueil4">
     
    <div class="ongls">
     <span class="ongl1"><a href="#accueil1">Accueil</a></span> <span class="ongl2"><a href="#accueil2">Contexte</a></span> <span class="ongl3"><a href="#accueil3">Prédéfinie</a></span> <span class="ongl4"><a href="#accueil4">Events</a></span>
    </div>
     
    <div id="content1">
     
    <div id="content2">
     
    <div class="info_accueil">
     Ici se trouve le contenu de votre second onglet.
    </div>
     
    </div>
     
    <div id="content3">
     
    <div class="info_accueil">
     Ici se trouve le contenu de votre troisième onglet.
    </div>
     
    </div>
     
    <div id="content4">
     
    <div class="info_accueil">
     Ici se trouve le contenu de votre quatrième onglet.
    </div>
     
    </div>
     
    <div class="info_accueil">
     
    </div>
     
    </div>
     
    </div>
     
    </div>
     
    </div>
     
    </div>
     
    </div>
     
    <div align="center">
     
    <div class="partitle">
     Partenaires
    </div>
     
    <div class="partmsg">
     <marquee scrollamount="2">partenaires</marquee>
    </div>
     
    </div>
    </div>

    Code:
    /*Onglets*/
    .ongls{
     margin: -300px 5px 70px 0px;
    }
     .ongl1, .ongl2, .ongl3, .ongl4
    {
    display: inline-block;
    width: 80px;
    height: 18px;
    margin-left: 7px;
    background-color: #b4c385;
    border: 1px solid #808489;
    border: 1px solid #808489;
    border: 1px solid #808489;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    text-align: center;
    }
    .ongl1:hover, .ongl2:hover, .ongl3:hover, .ongl4:hover
    {
    background-color: #c8e75f;
    }
    .ongl1 a, .ongl2 a, .ongl3 a, .ongl4 a
    {
    display: block;
    padding-top: 2px;
    font-weight: bold;
    text-decoration: none !important;
    color: #e5fae4 !important;
    font-size: 12px;
    }
    .ongl1 a:hover, .ongl2 a:hover, .ongl3 a:hover, .ongl4 a:hover
    {
    color: #446291 !important;;
    }

    /*Clics*/
    #content1
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: hidden;
    background: #b5e61d;
    font-size: 11px;
    color: #3c506f;
    margin-right: 10px;
    margin-top: -35px;
    }
    #content2, #content3, #content4
    {
    display: none;
    }
    #accueil1:target #content1
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: hidden;
    font-size: 11px;
    color: #b5e61d;
    opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100);
    }
    #accueil2:target #content2
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: hidden;
    background: #b5e61d;
    font-size: 11px;
    color: #3c506f;
    opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100);
    }
    #accueil3:target #content3
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: hidden;
    background: #b5e61d;
    font-size: 11px;
    color: #3c506f;
    }
    #accueil4:target #content4
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: hidden;
    background: #b5e61d;
    font-size: 11px;
    color: #3c506f;
    }
    .info_accueil
    {
    padding: 10px;
    text-align: justify;
    }

    .credit
    {
    display: block;
    text-align: right;
    margin-right: 20px;
    }
    .credit a
    {
    font-size: 10px;
    text-decoration: none !important;
    }

    /*All*/
    .corps{
     width: 600px;
     height: 344px;
     border: 3px black solid;
     margin: 40px 10px 10px 40px;
    }
    .table{
     margin: -20px 0 0 -20px;
    }
    .img1{
     width: 100px;
     height: 100px;
     border-radius: 100px;
     -moz-border-radius: 100px;
     -webkit-border-radius: 100px;
     background-image: url(URL);
     border: 1px solid black;
    margin-right: 50px;
    }
    .img2{
     width: 100px;
     height: 100px;
     border-radius: 100px;
     -moz-border-radius: 100px;
     -webkit-border-radius: 100px;
     background-image: url(URL);
     border: 1px solid black;
     margin-left: -50px;
    }
    .img1:hover, .img2:hover{
     width: 100px;
     height: 100px;
     border-radius: 10px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     background-color: #EEE;
     border: 1px solid black;
    }
    .noms1{
     margin: -15px 0 0 0;
     font-size: 20px;
     width: 100px;
     text-align: center;
     text-shadow: 0px 0px 5px #000;
     color: #FFF;
    }
    .noms2{
     margin: -15px 0 0 -50px;
     font-size: 20px;
     width: 100px;
     text-align: center;
     text-shadow: 0px 0px 5px #000;
     color: #FFF;
    }
    .news{
     margin: 0px 10px 10px 10px;
     width: 130px;
     height: 170px;
     border: 2px solid black;
     text-align: justify;
     padding: 0px 2px 2px 2px;
     font-size: 14px;
     overflow: hidden;
    }
    .newstitle{
     text-align: center;
     font-weight: bold;
     font-size: 22px;
    }
    .partmsg{
     background-color: #98d9ea;
     margin: -15px 10px 5px 10px;
     height: 25px;
     padding: 10px 5px 5px 5px;
    }
    .partitle{
     margin-top: 38px;
     text-align: center;
     font-weight: bold;
     font-size: 22px;
    }
    • Revenir en haut
    Jull421
    Jull421
    FémininAge : 30Messages : 145

    Dim 2 Mar 2014 - 18:59

    l'enplacement est bon =D

    mais il y a un trukc bizzard, quand je clic sur un onglet la page dessant

    autre truck, quand je passe la souris sur les rouds des admins, il y a pas un carré d'information qui aparet,



    Une Pa contre un coeur 140228025614860943
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Dim 2 Mar 2014 - 19:48

    C'est normal que la page descende. C'est parce que le contente est plus bas (le contenu vert).

    Pour le hover, tu ne m'as pas donné d'infos sur les carrés que tu voulais (rien que le contenu ni la taille).
    • Revenir en haut
    Jull421
    Jull421
    FémininAge : 30Messages : 145

    Dim 2 Mar 2014 - 21:10

    ok

    et pour les hover

    un carré 150X150 avec du texte svp ♥



    Une Pa contre un coeur 140228025614860943
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Lun 3 Mar 2014 - 0:05

    Code:
    /*Onglets*/
    .ongls{
       margin: -300px 5px 70px 0px;
    }
       .ongl1, .ongl2, .ongl3, .ongl4
    {
    display: inline-block;
    width: 80px;
    height: 18px;
    margin-left: 7px;
    background-color: #b4c385;
    border: 1px solid #808489;
    border: 1px solid #808489;
    border: 1px solid #808489;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    text-align: center;
    }
    .ongl1:hover, .ongl2:hover, .ongl3:hover, .ongl4:hover
    {
    background-color: #c8e75f;
    }
    .ongl1 a, .ongl2 a, .ongl3 a, .ongl4 a
    {
    display: block;
    padding-top: 2px;
    font-weight: bold;
    text-decoration: none !important;
    color: #e5fae4 !important;
    font-size: 12px;
    }
    .ongl1 a:hover, .ongl2 a:hover, .ongl3 a:hover, .ongl4 a:hover
    {
    color: #446291 !important;;
    }

    /*Clics*/
    #content1
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: hidden;
    background: #b5e61d;
    font-size: 11px;
    color: #3c506f;
    margin-right: 10px;
    margin-top: -35px;
    }
    #content2, #content3, #content4
    {
    display: none;
    }
    #accueil1:target #content1
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: hidden;
    font-size: 11px;
    color: #b5e61d;
    opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100);
    }
    #accueil2:target #content2
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: hidden;
    background: #b5e61d;
    font-size: 11px;
    color: #3c506f;
    opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100);
    }
    #accueil3:target #content3
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: hidden;
    background: #b5e61d;
    font-size: 11px;
    color: #3c506f;
    }
    #accueil4:target #content4
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: hidden;
    background: #b5e61d;
    font-size: 11px;
    color: #3c506f;
    }
    .info_accueil
    {
    padding: 10px;
    text-align: justify;
    }

    .credit
    {
    display: block;
    text-align: right;
    margin-right: 20px;
    }
    .credit a
    {
    font-size: 10px;
    text-decoration: none !important;
    }

    /*All*/
    .corps{
       width: 600px;
       height: 344px;
       border: 3px black solid;
       margin: 40px 10px 10px 40px;
    }
    .table{
       margin: -20px 0 0 -20px;
    }
    .img1{
       width: 100px;
       height: 100px;
       border-radius: 100px;
       -moz-border-radius: 100px;
       -webkit-border-radius: 100px;
       background-image: url(URL);
       border: 1px solid black;
    margin-right: 50px;
    text-indent:-9999px;
    }
    .img2{
       width: 100px;
       height: 100px;
       border-radius: 100px;
       -moz-border-radius: 100px;
       -webkit-border-radius: 100px;
       background-image: url(URL);
       border: 1px solid black;
       margin-left: -50px;
    text-indent:-9999px;
    }
    .img1:hover{
       width: 150px;
       height: 150px;
       border-radius: 10px;
       -moz-border-radius: 10px;
       -webkit-border-radius: 10px;
       background-color: gray;
       border: 1px solid black;
    margin: 0 0px -50px 0;
    z-index: 3;
    position: relative;
    text-indent:4px;
    }
    .img2:hover{
       width: 150px;
       height: 150px;
       border-radius: 10px;
       -moz-border-radius: 10px;
       -webkit-border-radius: 10px;
       background-color: gray;
       border: 1px solid black;
       margin: 0 -50px -50px -50px;
    z-index: 3;
    position: relative;
    text-indent:4px;
    }
    .noms1{
       margin: -15px 0 0 0;
       font-size: 20px;
       width: 100px;
       text-align: center;
       text-shadow: 0px 0px 5px #000;
       color: #FFF;
    }
    .noms2{
       margin: -15px 0 0 -50px;
       font-size: 20px;
       width: 100px;
       text-align: center;
       text-shadow: 0px 0px 5px #000;
       color: #FFF;
    }
    .news{
       margin: 0px 10px 10px 10px;
       width: 130px;
       height: 170px;
       border: 2px solid black;
       text-align: justify;
       padding: 0px 2px 2px 2px;
       font-size: 14px;
       overflow: hidden;
    }
    .newstitle{
       text-align: center;
       font-weight: bold;
       font-size: 22px;
    }
    .partmsg{
       background-color: #98d9ea;
       margin: -15px 10px 5px 10px;
       height: 25px;
       padding: 10px 5px 5px 5px;
    }
    .partitle{
       margin-top: 38px;
       text-align: center;
       font-weight: bold;
       font-size: 22px;
    }
    Code:
    <div class="corps">
       
       <div align="left">
          
          <table class="table">
             
             <tbody>
                
                <tr>
                   
                   <td>
                      
                      <div class="img1">
                          blablabla
                      </div>
                      
                   </td>
                   
                   <td>
                      
                      <div class="img2">
                         
                         <div class="info1">
                             blablabla
                         </div>
                         
                      </div>
                      
                   </td>
                   
                </tr>
                
                <tr>
                   
                   <td>
                      
                      <div class="noms1">
                          NOM
                      </div>
                      
                   </td>
                   
                   <td>
                      
                      <div class="noms2">
                          NOM
                      </div>
                      
                   </td>
                   
                </tr>
                
             </tbody>
             
          </table>
          
       </div>
       
       <div align="left">
          
          <div class="news">
             
             <center>
                 <span class="newstitle">NEWS</span>
             </center>
              <marquee scrollamount="2" direction="up">icez ifezj ifoe zanjckraioe iazjic znjcrenauiecnz jc zenjcenz j cnjk ez njkc eznjiceu i fnjkf enzjk nez jk cnzjkc enzkjc nejzkndejkejaiov ekoa vnfio rnejkvfnjkv frnz vnfrjk vfrnzk vrfznkv frizog riolv,fklzv fioz nklv fdnjk v</marquee>
          </div>
          
       </div>
       
       <div align="right">
          
          <div id="accueil1">
             
             <div id="accueil2">
                
                <div id="accueil3">
                   
                   <div id="accueil4">
                      
                      <div class="ongls">
                          <span class="ongl1"><a href="#accueil1">Accueil</a></span> <span class="ongl2"><a href="#accueil2">Contexte</a></span> <span class="ongl3"><a href="#accueil3">Prédéfinie</a></span> <span class="ongl4"><a href="#accueil4">Events</a></span>
                      </div>
                      
                      <div id="content1">
                         
                         <div id="content2">
                            
                            <div class="info_accueil">
                                Ici se trouve le contenu de votre second onglet.
                            </div>
                            
                         </div>
                         
                         <div id="content3">
                            
                            <div class="info_accueil">
                                Ici se trouve le contenu de votre troisième onglet.
                            </div>
                            
                         </div>
                         
                         <div id="content4">
                            
                            <div class="info_accueil">
                                Ici se trouve le contenu de votre quatrième onglet.
                            </div>
                            
                         </div>
                         
                         <div class="info_accueil">
                            
                         </div>
                         
                      </div>
                      
                   </div>
                   
                </div>
                
             </div>
             
          </div>
          
       </div>
       
       <div align="center">
          
          <div class="partitle">
              Partenaires
          </div>
          
          <div class="partmsg">
              <marquee scrollamount="2">partenaires</marquee>
          </div>
          
       </div>
    </div>
    • Revenir en haut
    Jull421
    Jull421
    FémininAge : 30Messages : 145

    Lun 3 Mar 2014 - 0:44

    Merci♥ alors a ton choix tu veu quoi en pixel art?



    Une Pa contre un coeur 140228025614860943
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Lun 3 Mar 2014 - 0:46

    Oh.. heu... je n'ai pas fais ça pour une création graphique ^^'
    Je voulais juste tester mes connaissances hi hi Wink
    • Revenir en haut
    Jull421
    Jull421
    FémininAge : 30Messages : 145

    Mar 4 Mar 2014 - 16:02

    ha ok! Merci alors *hug*



    Une Pa contre un coeur 140228025614860943
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Sam 8 Mar 2014 - 10:15

    Penses juste à éditer ton premier message pour indiquer que ta demande est faite en cochant le "V" sous le titre.
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Mar 26 Nov 2024 - 10:54