AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment :
Funko POP! Jumbo One Piece Kaido Dragon Form : ...
Voir le deal

    Catégorie et navigation svp

    Natsuya Gaïaguard
    Natsuya Gaïaguard
    FémininAge : 33Messages : 144

    Sam 1 Déc 2012 - 13:25

    Commande
    Elément à coder : [catégorie et Navigation]
    Adresse du forum : [http://mysteres-du-monde.lebonforum.com/]
    Description du résultat voulu :
    Lien pour un aperçut du résultat souhaité -> https://i.servimg.com/u/f41/17/81/01/93/comend10.png

    Pour la navigation, je voudrais juste qu’il colle au thème évidemment et qu’il soit fixé en haut de la page pour qu’on l’ait toujours sous la main.

    Couleurs ou tons : [Pour les couleurs, je voudrais quelque chose dans les tons bleu vert sombre pour les fond et cadre et dans les jaunes pour les écritures, mais surtout que ce soit harmonieux donc si vous trouver un autre arrangement de couleur ça m’ira. Je veux juste que cela respecte le thème fantastique et nocturne du forum.]
    Images : [Pour les images, je vous laisse carte blanche ou au pire, je m’en occuperais. J’utilise des images de type manga et essaye de les faire correspondre aux différents forums.]
    Autres précisions : [Je pense que tout est dit, mais si vous avez besoin de précision, je serais ravi de vous en donner. Je tiens beaucoup à ce projet, mais suis loin d'être douée en codage ^^" ]



    Catégorie et navigation svp Signa10
    • Revenir en haut
    Klash
    Klash
    MasculinAge : 43Messages : 20653

    Sam 1 Déc 2012 - 13:40

    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



    Catégorie et navigation svp 376864signichigo
    • Revenir en haut
    Sélène
    Sélène
    FémininAge : 25Messages : 321

    Dim 2 Déc 2012 - 22:18

    Bonsoir bonsoir,

    Je veux bien prendre ta commande, il me faut juste des images de test donc pour les catégories :smile:
    Pour les onglets tu veux au survol ou au clic ?

    Bisous.



    Catégorie et navigation svp 469642signselene

    Thanks père nono ou mère nono anonyme
    • Revenir en haut
    Natsuya Gaïaguard
    Natsuya Gaïaguard
    FémininAge : 33Messages : 144

    Lun 3 Déc 2012 - 13:24

    Super merci beaucoup !!

    Pour les onglets je préférais au clic pour que cela reste sur la catégorie voulut même quand on sort du champ.

    Pour les image, tu veux que je t'en passe ?



    Catégorie et navigation svp Signa10
    • Revenir en haut
    Sélène
    Sélène
    FémininAge : 25Messages : 321

    Lun 3 Déc 2012 - 16:52

    Dak.

    Oui je veux bien.



    Catégorie et navigation svp 469642signselene

    Thanks père nono ou mère nono anonyme
    • Revenir en haut
    Natsuya Gaïaguard
    Natsuya Gaïaguard
    FémininAge : 33Messages : 144

    Lun 3 Déc 2012 - 17:45

    Voila une image test pour les forum : https://i.servimg.com/u/f43/16/83/43/86/sans_t10.png

    Dit moi si tu as besoin de plus.



    Catégorie et navigation svp Signa10
    • Revenir en haut
    Sélène
    Sélène
    FémininAge : 25Messages : 321

    Lun 3 Déc 2012 - 17:52

    Parfait je m'y met ♥



    Catégorie et navigation svp 469642signselene

    Thanks père nono ou mère nono anonyme
    • Revenir en haut
    Natsuya Gaïaguard
    Natsuya Gaïaguard
    FémininAge : 33Messages : 144

    Lun 3 Déc 2012 - 18:23

    Ok MERCIIIIII :friends:



    Catégorie et navigation svp Signa10
    • Revenir en haut
    Natsuya Gaïaguard
    Natsuya Gaïaguard
    FémininAge : 33Messages : 144

    Dim 9 Déc 2012 - 11:34

    coucou

    petit up pour savoir si tu t'en sortais



    Catégorie et navigation svp Signa10
    • Revenir en haut
    Sélène
    Sélène
    FémininAge : 25Messages : 321

    Dim 9 Déc 2012 - 12:59

    Coucou,

    Alors vu que j'ai d'autres commandes en cours, j'avance plus lentement que prévue mais tu auras un essai bientôt.



    Catégorie et navigation svp 469642signselene

    Thanks père nono ou mère nono anonyme
    • Revenir en haut
    Natsuya Gaïaguard
    Natsuya Gaïaguard
    FémininAge : 33Messages : 144

    Dim 9 Déc 2012 - 13:42

    Ok je comprend ^^



    Catégorie et navigation svp Signa10
    • Revenir en haut
    Sélène
    Sélène
    FémininAge : 25Messages : 321

    Jeu 13 Déc 2012 - 19:15

    Coucou,

    La structure est prête (le système onglet est installé, la catégorie en générale aussi, je n'ai plus qu'à personnaliser le titre de forum, les descriptions ... et c'est bon)
    Tu auras donc un essai prochainement mais tu m'excusera je suis malade hé oui ^^



    Catégorie et navigation svp 469642signselene

    Thanks père nono ou mère nono anonyme
    • Revenir en haut
    Natsuya Gaïaguard
    Natsuya Gaïaguard
    FémininAge : 33Messages : 144

    Jeu 13 Déc 2012 - 19:18

    HAAAAAAAAAA Super :friends:

    merci pour le boulot déjà fait et celui à venir ^0^

    Soigne toi bien.



    Catégorie et navigation svp Signa10
    • Revenir en haut
    Natsuya Gaïaguard
    Natsuya Gaïaguard
    FémininAge : 33Messages : 144

    Ven 21 Déc 2012 - 13:09

    Re, je sais je suis embêtante, mais j'aurais voulu savoir si j'aurais pu avoir le premier jet avant noël.



    Catégorie et navigation svp Signa10
    • Revenir en haut
    Angelusia
    Angelusia
    FémininAge : 39Messages : 1159

    Sam 29 Déc 2012 - 9:39

    Bonjour, nous sommes sans nouvelles...Ce topic est-il toujours d'actualité ? Merci de nous tenir informés du déroulement de cette demande.
    Attention, l'absence de réponse à ce message entrainera l'archivage du topic d'ici trois semaines.
    • Revenir en haut
    Natsuya Gaïaguard
    Natsuya Gaïaguard
    FémininAge : 33Messages : 144

    Sam 29 Déc 2012 - 12:20

    Oui oui oui, il est toujours d'actualité !!!

    J'allais justement faire un up dans pas longtemps pour avoir des nouvelles.



    Catégorie et navigation svp Signa10
    • Revenir en haut
    Natsuya Gaïaguard
    Natsuya Gaïaguard
    FémininAge : 33Messages : 144

    Mer 2 Jan 2013 - 14:07

    Up

    toujours d'actualité

    Bonne année à tous !!!



    Catégorie et navigation svp Signa10
    • Revenir en haut
    Sélène
    Sélène
    FémininAge : 25Messages : 321

    Jeu 3 Jan 2013 - 22:13

    Bonsoir,

    Excusez moi quelques soucis, je vous donne ça ce soir, désolé de cet petit embêtement.
    Bonne année et mes merveilleux voeux.

    J'aurais besoin par contre du format que vous utilisez pour vos images de description, merci.



    Catégorie et navigation svp 469642signselene

    Thanks père nono ou mère nono anonyme
    • Revenir en haut
    Natsuya Gaïaguard
    Natsuya Gaïaguard
    FémininAge : 33Messages : 144

    Jeu 3 Jan 2013 - 22:52

    tu n'as qu'à prendre celle de l'image que je t'avais passé la dernière fois.

    sinon pas grave, j'avais juste un peu peur que tu es laissé tombé ou oublié

    donc maintenant que je sais que c'est bon, pas de problème ^^



    Catégorie et navigation svp Signa10
    • Revenir en haut
    Sélène
    Sélène
    FémininAge : 25Messages : 321

    Jeu 3 Jan 2013 - 22:54

    Je la trouvais plus merci.



    Catégorie et navigation svp 469642signselene

    Thanks père nono ou mère nono anonyme
    • Revenir en haut
    Sélène
    Sélène
    FémininAge : 25Messages : 321

    Ven 4 Jan 2013 - 0:31

    Hey hey,

    me voilà avec mon jet : http://ocelline-testdesign.forumactif.org/?tt=1



    Catégorie et navigation svp 469642signselene

    Thanks père nono ou mère nono anonyme
    • Revenir en haut
    Natsuya Gaïaguard
    Natsuya Gaïaguard
    FémininAge : 33Messages : 144

    Ven 4 Jan 2013 - 0:48

    Super sauf pour le texte de description qui est caché quand on passe sur l'image

    au besoin, on met les sous forum en dessous dans le même style que ce que j'ai déjà sur mon forum



    Catégorie et navigation svp Signa10
    • Revenir en haut
    Sélène
    Sélène
    FémininAge : 25Messages : 321

    Ven 4 Jan 2013 - 2:18

    Tu parles du texte caché par les sous-forums ? A la rigueur je peux régler ça avec du margin :smile:

    Edit : Corrigé, dis moi si ça te conviens : http://ocelline-testdesign.forumactif.org/?tt=1



    Catégorie et navigation svp 469642signselene

    Thanks père nono ou mère nono anonyme
    • Revenir en haut
    Natsuya Gaïaguard
    Natsuya Gaïaguard
    FémininAge : 33Messages : 144

    Ven 4 Jan 2013 - 11:52

    Je pense que c'est bon comme ça ^^

    Je réglerais un peu la transparence pour qu'on puisse voir un peu mieux l'image de fond, mais sinon c'est très bien comme ça ^^

    MERCI beaucoup pour le boulot ^0^



    Catégorie et navigation svp Signa10
    • Revenir en haut
    Sélène
    Sélène
    FémininAge : 25Messages : 321

    Ven 4 Jan 2013 - 12:22

    Coucou,

    Alors je vais te donner les codes :smile:

    Ton index box :
    Code:
    <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
          <tr>
              <td valign="bottom">
                <!-- BEGIN switch_user_logged_in -->
                <span class="gensmall">{LAST_VISIT_DATE}

                {CURRENT_TIME}

                </span>
                <!-- END switch_user_logged_in -->
                <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
              </td>
              <td class="gensmall" align="right" valign="bottom">
                <!-- BEGIN switch_user_logged_in -->
                <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>

                <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>

                <!-- END switch_user_logged_in -->
                <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
              </td>
          </tr>
        </table>

    <!-- DEBUT MODIF ONGLETS -->


      <script type="text/javascript">
      //<![CDATA[
    var i = 0;

    document.write('<div align="center">
    <ul class="onglet">
     

    <li onMouseOver="change_cat(0);" class="onglet_actif" id="cat_0">mes test</li>
    <li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">test 2</li>
    <li onMouseOver="change_cat(2);" class="onglet_nactif" id="cat_2">test 3</li>
    <li onMouseOver="change_cat(3);" class="onglet_nactif" id="cat_3">test 4</li>
    <li onMouseOver="change_cat(4);" class="onglet_nactif" id="cat_4">test 5</li>
    <li onMouseOver="change_cat(5);" class="onglet_nactif" id="cat_5">test 6</li>
    <li onMouseOver="change_cat(6);" class="onglet_nactif" id="cat_6">test 8</li>

    </ul>
    </div>
    ');

    var compteur_cat = 0;

    var anc_cat = 0;

    var nom_cat = new Array('0','1','2','3','4','5','6');

     
    function change_cat(numero)
    {
     document.getElementById(nom_cat[anc_cat]).style.display = 'none';
     document.getElementById(nom_cat[numero]).style.display = 'block';
     document.getElementById('cat_'+nom_cat[anc_cat]).className = 'onglet_nactif';
     document.getElementById('cat_'+nom_cat[numero]).className ='onglet_actif';
     anc_cat = numero;
    }

    function capture_cat()
    {
    if(nom_cat[compteur_cat] == nom_cat[0])
    {document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" >');
    }
    else{
     document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" style="display:none;">');
    }
    compteur_cat++;
    }

    //-->
    </script>
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->

    <script type="text/javascript">
    <!--
    capture_cat();
    //]]>
    </script> 

    <!-- FIN MODIF ONGLETS -->

          <!-- END tablehead -->
          <!-- BEGIN cathead -->
          <tr>
              <!-- BEGIN inc -->
              <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
              <!-- END inc -->
              <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
                <h{catrow.cathead.LEVEL} class="hierarchy">
                    <span class="cattitle">
                      <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
                    </span>
                </h{catrow.cathead.LEVEL}>
              </td>
              <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
          </tr>
          <!-- END cathead -->
          <!-- BEGIN forumrow -->
          <tr>
              <!-- BEGIN inc -->
              <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
              <!-- END inc -->
              <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
                <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
              </td>
              <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
                <h{catrow.forumrow.LEVEL} class="hierarchy"><div class="catititre">
                    <span class="forumlink">
                      <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

                  </span>
                  </div> </h{catrow.forumrow.LEVEL}>
               

       

              <div class="forum-stats"><font color="#D1BA88">{catrow.forumrow.POSTS} messages, dans {catrow.forumrow.TOPICS} sujets.</font></div>
        <div class="forum-description">
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
        </div>
       
                <span class="gensmall">
                    <!-- BEGIN switch_moderators_links -->
                    {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                    <!-- END switch_moderators_links -->

                </span>
              </td>
              <!-- BEGIN forum_link_no -->
              <td class="row3 over" align="center" valign="middle" height="50"><div style="width: 150px">
                <span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
              </td>
       

       

              <!-- END forum_link_no -->
              {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
          </tr>
          <!-- END forumrow -->
          <!-- BEGIN catfoot -->
          <tr>
              <!-- BEGIN inc -->
              <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
              <!-- END inc -->
              <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
          </tr>
          <!-- END catfoot -->
          <!-- BEGIN tablefoot -->
        </table></div><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

    Le CSS :

    Code:
    a:link
    {
     text-decoration:none !important;
    }

    .onglet {
    display:inline-block;
    height:30px;
    margin:8px auto auto;
    margin-top:30px;
      background-color:#05093A;
      border-radius:10px 10px 10px;
      box-shadow: black 2px 2px 2px;
      color:white;
      border:2px solid white;
    }



    .onglet li {
    float:left;
    width: 100px;
    height: 30px;
    line-height:30px;
    text-align: center;
    vertical-align: middle;
    list-style-type:none;
      background-color:#05093A;
    }



    .onglet li a {
    display:block;
    text-decoration:none;
    margin-left:5px;

    }


    .onglet li a:hover {

    }


    #echange, #amusement, #administration {
    display :none;
    }

    .cat_forum {
    border-radius: 10px;
    background-color:#05093A;
    margin: auto;
    margin-bottom:30px;
      border:2px solid white;
      box-shadow: black 2px 2px 2px;
    }

    .catititre{
      font-size:20px;
      color:white;
      font-variant:small-caps;
      border-bottom:3px solid white;
    }

    Ensuite le code de la description que tu colles dans une page HTML :

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <title>Tutoriel "Animation sur un bloc"</title>
         
    <style type="text/css">
     
    div#conteneur{
      width:640px; /* La largeur du conteneur */
      margin:auto; /* On le centre dans la page */
      }
     
    div.bloc1{
      width:500px; /* La largeur */
      height: 80px; /* La hauteur */
      background-color:white; /* Couleur de fond */
      border:1px solid black; /* Cadre */
      margin:4px; /* L'espace entre mes blocs */
      overflow:hidden; /* On empêche le texte de sortir */
      float:left; /* On aligne les blocs à gauche */
      border-radius:10px 10px 10px 10px;
      }
     
    div.bloc2{
      width:418px; /* La largeur */
      height: 80px; /* La hauteur */
      background-color:white; /* Couleur de fond */
      color:black; /* Couleur du texte */
      font-family: Comic sans ms; /* Police */
      font-size: 12px; /* Taille de la police */
      text-align:center; /* Texte centré */
      position:absolute; /* On place le bloc en haut à gauche dans le bloc1 */
      overflow:auto; /* la scrollbar */
    margin-left:80px;
      }
    div.bloc3{
      width:80px; /* La largeur */
      height: 80px; /* La hauteur */
      background-color:white; /* Couleur de fond */
      color:black; /* Couleur du texte */
      font-family: Comic sans ms; /* Police */
      font-size: 12px; /* Taille de la police */
      text-align:center; /* Texte centré */
      position:absolute; /* On place le bloc en haut à gauche dans le bloc1 */
      overflow:auto; /* la scrollbar */
      }


    </style>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" >
    <!-- //

    $(document).ready(function(){
      $(".bloc2").css({"opacity" : "0"}); <!-- on cache tous les blocs contenant le texte -->
    $(".bloc3").css({"opacity" : "0"}); <!-- on cache tous les blocs contenant le texte -->

      $(".bloc1").mouseover(function(){ <!-- quand la souris survole le bloc 1 -->
          $(this).children(".bloc2").animate({
            opacity : "0.8" <!-- le texte apparait -->
          }, {queue:false, duration:1500} );
      });

    $(".bloc1").mousemove(function(){ <!-- quand la souris survole le bloc 1 -->
          $(this).children(".bloc3").animate({
            opacity : "0.9" <!-- le texte apparait -->
          }, {queue:false, duration:1500} );
      });

      $(".bloc1").mouseout(function(){ <!-- quand la souris quitte le bloc 1 -->
          $(this).children(".bloc2").animate({
            opacity : "0"  <!-- le texte disparait  -->
          }, {queue:false, duration:1500} );
      });
     
     $(".bloc1").mouseout(function(){ <!-- quand la souris quitte le bloc 1 -->
          $(this).children(".bloc3").animate({
            opacity : "0"  <!-- le texte disparait  -->
          }, {queue:false, duration:1500} );
      });

    });
    -->
    </script>

      </head>
      <body>

      <div id="conteneur">
          <!-- DEBUT du premier bloc -->
          <div class="bloc1">
            <div class="bloc2">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum mauris vitae ante scelerisque vitae scelerisque nulla lobortis. Donec vitae luctus orci. Phasellus sed felis justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed hendrerit facilisis justo id hendrerit. Morbi aliquet justo molestie augue pharetra facilisis fringilla eros porttitor. Sed facilisis urna a est ornare convallis. Nunc rutrum imperdiet purus eget posuere. Praesent scelerisque quam a ligula porttitor eget volutpat ligula tempus. Nulla odio ipsum, iaculis eget iaculis nec, condimentum eget metus. In dignissim facilisis pellentesque. Aliquam ac dui dui, non facilisis mauris. Curabitur mi arcu, vestibulum sed volutpat et, congue at elit. Suspendisse potenti.</p>
            </div>

    <div class="bloc3"> <ul> <li> <a href="http://ocelline-testdesign.forumactif.org/f7-test-test?tt=1"> Test </a></li> <li> <a href="http://ocelline-testdesign.forumactif.org/f7-test-test?tt=1"> Test </a></li></ul></div>
            <img src="http://i43.servimg.com/u/f43/16/83/43/86/sans_t10.png" />
          </div>
          <!-- Fin du premier bloc -->
         
     

      </body>
    </html>

    (une page HTML par descriptions différentes).

    Et dans la description des catégories tu met l'iframe qui générera ta page HTML à l'aide de ceci :
    http://creer-un-site.fr/generateur-d-iframe-118.php




    Catégorie et navigation svp 469642signselene

    Thanks père nono ou mère nono anonyme
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Lun 13 Mai 2024 - 8:06