AccueilFAQRechercherMembresGroupesS'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.


    PA avec Onglets

    Partagez
    Loukoum
    FémininAge : 23Messages : 811

    le Ven 25 Sep 2015 - 12:13



    Bonjour / Bonsoir chers amis de Never-Utopia!  :hug:  


    Me voici ici pour vous laisser un petit code assez sympa de Page d'Accueil, codé par mes petites mains de A à Z!  :artiste:
    Vous comprendrez donc que le crédit "PA de Loukoum sur Never-Utopia" est à laisser sous peine de mort...  :bandit:

    A savoir que cette PA est une page HTLM, il faut donc être à l'aise avec ce genre de codes! A savoir aussi que votre page HTLM ne devra être modifiée qu'à l'aide de ce bouton et non de celui ci .
    :nanere:   Donc si vous êtes déjà perdu, passez votre chemin.

    Pour ceux qui sont trop fort  :cowboy:  nous allons passer au visuel =D
    Et pour que tout soit parfait, voici la PA en pleine application ici =D

    Donc pour ceux qui se sentent pousser des ailes, voilà les codes  :wesh:

    Etape 1 - Notre PA
    Voici donc le plus gros, la vrai PA!

    Vous devez donc créer une nouvelle page HTLM (PA > Module > Gestion des Pages HTLM), mais faites bien attention à cliquer sur "Création en mode avancé (HTLM)" et non sur "Création en mode simple (WYSIWYG)"!!!

    /!\ Les images pour les sabliers sont en 70x70. Si vous êtes à l'aise avec les codes, vous pouvez changer la taille. Mais si ce n'est pas le cas, comme il y a beaucoup de changement à faire, gardez cette taille (ou demandez de l'aide si vraiment vous voulez changer je vous mangerais pas)

    Pour le contexte, il y a de quoi intégrer une vidéo. Pensez à mettre le lien mais aussi à changer la taille, qui est pour le moment réglé à 0x0!
    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <base target="_blank" />
      <meta charset="UTF-8" />
      <title>Titre</title>
      <style>
    /*Effet sur les mots soulignés*/
    u {
      border-bottom: 2px dotted;
      border-color: #1d0e14;
      text-decoration: none;
    }

    /*Effet sur les mots en italique*/
    i {
      border-bottom: none;
      color: #ad8c62;
      text-decoration: none;
      text-shadow: 1px 1px 1px #000;
    }

    /*Effets sur vos liens*/
    a,a:link,a:visited,a:hover {
      text-decoration: none;
    }

    a {
      color: #C0A27B;
      font-family: Georgia;
      font-size: 10px;
      text-decoration: none;
    }

    a:hover {
      color: #00FFBF;
      font-size: 10px;
      font-family: Georgia;
      text-decoration: none;
    }

    a.lien,a.lien:link,a.lien:visited,a.lien:hover {
      text-decoration: none;
    }

    a.lien {
      font-size: 10px;
      font-family: Georgia;
      color: #C0A27B;
      text-shadow: 1px 1px 1px #000;
      text-decoration: none;
    }

    a.lien:hover {
      font-size: 10px;
      font-family: Georgia;
      color: #00FFBF;
      text-shadow: 1px 1px 1px #000;
      font-weight: bolder;
      text-decoration: none;
    }

    /*Affichage des Titres de votre PA*/
    .titre {
      background: #E5D5BA;
      font-family: 'MV Boli';
      font-size: 15px;
      text-align: center;
      text-shadow: 1px 1px 0 #62584b;
      border: 2px solid #1d0e14;
      border-bottom: 2px dotted #1d0e14;
    }

    /*Les styles des différents cadres. Vous pouvez tout changer SAUF la taille, soit width et height*/
    .staff {
      background: #E5D5BA;
      width: 310px;
      height: 140px;
      border: 2px solid #1d0e14;
      border-top: 0 dotted #1d0e14;
      padding: 10px;
    }

    /*Ces "info" sont les infobulles, vous pouvez donc changer la couleur et la taille. Normalement la position d'affichage ne doit pas être changée! L'info1 et info2 sont pour le Staff, et la 4 pour les Scénarios*/
    .info1 {
      position: relative;
      z-index: 24;
      text-decoration: none;
      font-family: Georgia;
      font-size: 10px;
    }

    .info1:hover {
      z-index: 25;
    }

    .info1 span {
      display: none;
    }

    .info1:hover span {
      display: block;
      position: absolute;
      top: -41px;
      left: -3px;
      width: 105px;
      height: 50px;
      background-color: #ad8c62;
      color: #61574b;
      text-align: center;
      font-weight: none;
      font-family: Georgia;
      font-size: 10px;
      border-radius: 20%;
    }

    /*Ceci concerne l'image des infobulles*/
    .imgwidget {
      border-radius: 20%;
      width: 100px;
      height: 50px;
      -moz-transition-duration: 1s;
      -moz-transition-timing-function: linear;
      -webkit-transition-duration: 1s;
      -webkit-transition-timing-function: linear;
      transition-duration: 1s;
      transition-timing-function: linear;
    }

    .info2 {
      position: relative;
      z-index: 24;
      text-decoration: none;
      font-family: Georgia;
      font-size: 10px;
    }

    .info2:hover {
      z-index: 25;
    }

    .info2 span {
      display: none;
    }

    .info2:hover span {
      display: block;
      position: absolute;
      top: -21px;
      left: 0;
      width: 100px;
      height: 30px;
      background-color: #ad8c62;
      color: #61574b;
      text-align: center;
      font-weight: none;
      font-family: Georgia;
      font-size: 10px;
    }

    .imgwidget1 {
      width: 100px;
      height: 30px;
      -moz-transition-duration: 1s;
      -moz-transition-timing-function: linear;
      -webkit-transition-duration: 1s;
      -webkit-transition-timing-function: linear;
      transition-duration: 1s;
      transition-timing-function: linear;
    }

    /*Ici on retrouve un code identique à notre complément de PA, alors touchez uniquement la même chose que tout à l'heure*/
    .onglet {
      cursor: pointer;
      font-family: 'MV Boli';
      font-size: 15px;
      text-align: center;
      text-shadow: 1px 1px 0 #62584b;
      border: 2px solid #1d0e14;
      border-bottom: 2px dotted #1d0e14;
    }

    .onglet_0 {
      background: #E5D5BA;
      border-bottom: 2px solid #1d0e14;
    }

    .onglet_1 {
      background: #E5D5BA;
    }

    .contenu_onglet {
      background: #E5D5BA;
      display: none;
      width: 300px;
      height: 146px;
      padding: 8px;
      overflow: auto;
      border: 2px solid #1d0e14;
      color: #61574b;
      font-size: 12px;
      text-align: justify;
    }

    .wanted {
      background: #E5D5BA;
      width: 320px;
      height: 150px;
      padding: 5px;
      border: 2px solid #1d0e14;
      border-top: 0 dotted #1d0e14;
      text-align: center;
      font-family: Georgia;
      font-size: 10px;
      color: #61574b;
    }

    .info4 {
      position: relative;
      z-index: 24;
      text-decoration: none;
      font-family: Georgia;
      font-size: 10px;
    }

    .info4:hover {
      z-index: 25;
    }

    .info4 span {
      display: none;
    }

    .info4:hover span {
      display: block;
      position: absolute;
      top: -2em;
      left: -2em;
      width: 150px;
      background-color: #ad8c62;
      color: #61574b;
      text-align: center;
      font-weight: none;
      border: 2px solid #1d0e14;
      font-family: Georgia;
      font-size: 10px;
    }

    .imgwidget2 {
      border-radius: 50%;
      width: 65px;
      height: 65px;
      -moz-transition-duration: 1s;
      -moz-transition-timing-function: linear;
      -webkit-transition-duration: 1s;
      -webkit-transition-timing-function: linear;
      transition-duration: 1s;
      transition-timing-function: linear;
      -moz-transform: rotate(25deg);
      -webkit-transform: rotate(25deg);
      transform: rotate(25deg);
    }

    .imgwidget2:hover {
      border-radius: 50%;
      width: 65px;
      height: 65px;
      -moz-transform: rotate(-25deg);
      -webkit-transform: rotate(-25deg);
      transform: rotate(-25deg);
    }

    .tops {
      width: 141px;
      background: #E5D5BA;
      height: 150px;
      padding: 5px;
      border: 2px solid #1d0e14;
      border-top: 0 dotted #1d0e14;
      text-align: center;
      font-family: Georgia;
      font-size: 10px;
      color: #61574b;
      overflow: auto;
    }

    .news {
      background: #E5D5BA;
      width: 141px;
      height: 150px;
      padding: 5px;
      border: 2px solid #1d0e14;
      border-top: 0 dotted #1d0e14;
      text-align: justify;
      font-family: Georgia;
      font-size: 10px;
      color: #61574b;
      overflow: auto;
    }

    .meteo {
      background: #E5D5BA;
      width: 320px;
      height: 110px;
      padding: 5px;
      border: 2px solid #1d0e14;
      border-top: 0 dotted #1d0e14;
      text-align: justify;
      font-family: Georgia;
      font-size: 10px;
      color: #61574b;
      overflow: auto;
    }

    .imgwidget3 {
      border-radius: 50%;
      width: 100px;
      height: 100px;
      -moz-transition-duration: 1s;
      -moz-transition-timing-function: linear;
      -webkit-transition-duration: 1s;
      -webkit-transition-timing-function: linear;
      transition-duration: 1s;
      transition-timing-function: linear;
    }

    .systeme_paonglets {
      width: 300px;
      margin: auto;
      text-align: center;
    }

    .paonglets {
      text-align: center;
    }

    /*Le style d'affichage des paonglets*/
    .paonglet {
      cursor: pointer;
      font-family: 'MV Boli';
      font-size: 15px;
      text-align: center;
      text-shadow: 1px 1px 0 #62584b;
      border: 2px solid #1d0e14;
      border-bottom: 2px dotted #1d0e14;
    }

    /*Ne pas toucher*/
    .paonglet_0 {
      background: #E5D5BA;
      border-bottom: 2px solid #1d0e14;
    }

    /*Ne pas toucher*/
    .paonglet_1 {
      background: #E5D5BA;
    }

    /*Le style d'affichage du contenu des paonglets*/
    .contenu_paonglet {
      margin: auto;
      background: #E5D5BA;
      display: none;
      width: 300px;
    /*Ne pas toucher*/
      height: 105px;
    /*Ne pas toucher*/
      padding: 8px;
      overflow: auto;
      border: 2px solid #1d0e14;
      color: #61574b;
      font-size: 12px;
      text-align: justify;
    }

    /*Les codes qui suivent sont pour mon paonglet "Sablier", permettant de donner cet effet glissé sur les images et l'apparition du texte en dessous*/
    .cate2 {
      width: 70px;
      height: 70px;
      overflow: hidden;
    }

    .cate2_img {
      position: relative;
      z-index: 2;
      width: 70px;
      height: 70px;
      margin-left: 0;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      background-color: #ad8c62;
    }

    .cate2:hover .cate2_img {
      margin-left: 70px;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }

    .cate2_description {
      position: relative;
      z-index: 1;
      width: 70px;
      height: 70x;
      margin-top: -70px;
      text-align: center;
      font-size: 11px;
      color: #FAF6F2;
      padding: 2px;
      overflow: auto;
    }

    /*modifier l'apparence des scrollbars de tout le forum*/
    ::-webkit-scrollbar {
      width: 5px;
    /*largeur de la scrollbar verticale*/
      height: 5px;
    /*hauteur de la scrollbar horizontale*/
      background-color: #ad8c62;
    }

    ::-webkit-scrollbar-track {
      background-color: #ad8c62;
    /*couleur du fond de la scrollbar*/
    }

    ::-webkit-scrollbar-thumb {
    /*la petite bande qui monte/descend*/
      background-color: /*couleur de l'ascenseur*/
    #1d0e14;
    }
      </style>
    </head>
    <body>
      <table align="center">
        <tr>
          <td>
            <div class="titre">
              Staff
            </div>
            <div class="staff">
              <span class="info1"><img class="imgwidget" src="IMAGE1" /> <span>TEXTE1 <a href="LIEN1" target="_blank">Profil</a> // <a href="LIEN1" target="_blank">MP</a></span></span>
              <span class="info1"><img class="imgwidget" src="IMAGE2" /> <span>TEXTE2 <a href="LIEN2" target="_blank">Profil</a> // <a href="LIEN2" target="_blank">MP</a></span></span>
              <span class="info1"><img class="imgwidget" src="IMAGE3" /> <span>TEXTE3 <a href="LIEN3" target="_blank">Profil</a> // <a href="LIEN3" target="_blank">MP</a></span></span><br />
              <span class="info1"><img class="imgwidget" src="IMAGE4" /> <span>TEXTE4 <a href="LIEN4" target="_blank">Profil</a> // <a href="LIEN4" target="_blank">MP</a></span></span>
              <span class="info1"><img class="imgwidget" src="IMAGE5" /> <span>TEXTE5 <a href="LIEN5" target="_blank">Profil</a> // <a href="LIEN5" target="_blank">MP</a></span></span>
              <span class="info1"><img class="imgwidget" src="IMAGE6" /> <span>TEXTE6 <a href="LIEN6" target="_blank">Profil</a> // <a href="LIEN6" target="_blank">MP</a></span></span><br />
              <div style="text-align: center;">
                <span class="info2"><img class="imgwidget1" src="IMAGE7" /> <span>TEXTE7 <a href="LIEN7" target="_blank">Profil</a> // <a href="LIEN7" target="_blank">MP</a></span></span>
                <span class="info2"><img class="imgwidget1" src="IMAGE8" /> <span>TEXTE8 <a href="LIEN8" target="_blank">Profil</a> // <a href="LIEN8" target="_blank">MP</a></span></span>
              </div>
            </div>
          </td>
          <td>
            <script type="text/javascript">
            //<!--
                    function change_onglet(name)
                    {
                            document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                            document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                            document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                            document.getElementById('contenu_onglet_'+name).style.display = 'block';
                            anc_onglet = name;
                    }
            //-->
            </script>
            <div class="systeme_onglets">
              <div align="center" class="onglets">
                <span class="onglet_1 onglet" id="onglet_NomOnglet1" onclick="javascript:change_onglet('NomOnglet1');"> Contexte </span>  <span class="onglet_0 onglet" id="onglet_NomOnglet2" onclick="javascript:change_onglet('NomOnglet2');"> Chronologie </span>  <span class="onglet_0 onglet" id="onglet_NomOnglet3" onclick="javascript:change_onglet('NomOnglet3');"> Nos écoles </span> 
              </div>
              <div class="contenu_onglets">
                <div class="contenu_onglet" id="contenu_onglet_NomOnglet1">
                  <!-- Debut 1er onglet -->
                  <iframe allowfullscreen="" frameborder="0" src="LIEN%20VIDEO" style="width: 0px; height: 0px; float:left;"></iframe> ICI VOTRE CONTEXTE
                </div><!-- Fin 1er onglet -->
                <div class="contenu_onglet" id="contenu_onglet_NomOnglet2">
                  <!-- Debut 2em onglet -->
                  ICI VOTRE CHRONO SI VOUS EN AVEZ UNE
                </div><!-- Fin 2em onglet -->
                <div class="contenu_onglet" id="contenu_onglet_NomOnglet3">
                  <!-- Debut 3em onglet -->
                  SI COMME NOUS VOUS AVEZ D'AUTRES FORUMS OU ALORS TROUVEZ UNE UTILITE A CET ONGLET, OU SUPPRIMEZ LE TOUT SIMPLEMENT ^^
                </div><!-- Fin 3em onglet -->
                <script type="text/javascript">
                //<!--
                    var anc_onglet = 'NomOnglet1';
                    change_onglet(anc_onglet);
                //-->
                </script>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="titre">
              On les veux
            </div>
            <div class="wanted">
             
              <span class="info4">
                <img class="imgwidget2" src="IMAGE1" /> <span>TEXTE1<br />
                <a class="postlink" href="LIEN1" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
              </span>
             
              <span class="info4">
                <img class="imgwidget2" src="IMAGE2" /> <span>TEXTE2<br />
                <a class="postlink" href="LIEN2" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
              </span>
             
              <span class="info4">
                <img class="imgwidget2" src="IMAGE3" /> <span>TEXTE3<br />
                <a class="postlink" href="LIEN3" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
              </span>
             
              <span class="info4">
                <img class="imgwidget2" src="IMAGE4" /> <span>TEXTE4<br />
                <a class="postlink" href="LIEN4" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
              </span><br />
             
              <span class="info4">
                <img class="imgwidget2" src="IMAGE5" /> <span>TEXTE5<br />
                <a class="postlink" href="LIEN5" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
              </span>
             
              <span class="info4">
                <img class="imgwidget2" src="IMAGE6" /> <span>TEXET6<br />
                <a class="postlink" href="LIEN6" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
              </span>
             
              <span class="info4">
                <img class="imgwidget2" src="IMAGE7" /> <span>IMAGE7<br />
                <a class="postlink" href="LIEN7" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
              </span>
             
              <span class="info4">
                <img class="imgwidget2" src="IMAGE8" /> <span>TEXTE8<br />
                <a class="postlink" href="LIEN8" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
              </span><br />
             
              <a class="postlink" href="LIEN" rel="nofollow" target="_blank">Découvrir plus de prédéfinis</a>
            </div>
          </td>
          <td>
            <table>
              <tr>
                <td>
                  <div class="titre">
                    Nos tops-sites
                  </div>
                  <div class="tops">
                    VOS TOP SITES
                  </div>
                </td>
                <td>
                  <div class="titre">
                    News
                  </div>
                  <div class="news">
                    <span style="color: #E7D197;">¤ DATE -</span> VOTRE SUPER NOUVELLE
                  </div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td>
            <div class="titre">
              Météo
            </div>
            <div class="meteo">
              <img class="imgwidget3" src="LIEN" style="float:left;" /> ICI SI VOUS VOULEZ METTRE LA METEO ET LA DATE A LAQUELLE SE DEROULE VOTRE RPG, VOUS POUVEZ =D
            </div>
          </td>
          <td>
            <script type="text/javascript">
            //<!--
                    function change_paonglet(name)
                    {
                            document.getElementById('paonglet_'+anc_paonglet).className = 'paonglet_0 paonglet';
                            document.getElementById('paonglet_'+name).className = 'paonglet_1 paonglet';
                            document.getElementById('contenu_paonglet_'+anc_paonglet).style.display = 'none';
                            document.getElementById('contenu_paonglet_'+name).style.display = 'block';
                            anc_paonglet = name;
                    }
            //-->
            </script>
            <div class="systeme_paonglets">
              <span class="paonglet_1 paonglet" id="paonglet_NomPaonglet1" onclick="javascript:change_paonglet('NomPaonglet1');"> Partenaires </span>  <span class="paonglet_0 paonglet" id="paonglet_NomPaonglet2" onclick="javascript:change_paonglet('NomPaonglet2');"> Crédits </span>  <span class="paonglet_0 paonglet" id="paonglet_NomPaonglet3" onclick="javascript:change_paonglet('NomPaonglet3');"> Sabliers&nbsp;</span>
              <div class="contenu_paonglets">
                <!-- Debut 1er paonglet -->
                <div class="contenu_paonglet" id="contenu_paonglet_NomPaonglet1">
                  Ici la liste de vos partenaires.
                </div><!-- Fin 1er paonglet -->
                <!-- Debut 2em paonglet -->
                <div class="contenu_paonglet" id="contenu_paonglet_NomPaonglet2">
                  La PA a été réalisée par <a href="http://mondeandmagiev5.forumactif.org/" target="_blank">Loukoum</a> sur <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a>.<br />
                  Ici le reste de vos crédits
                </div><!-- Fin 2em paonglet -->
                <!-- Debut 3em paonglet -->
                <div class="contenu_paonglet" id="contenu_paonglet_NomPaonglet3">
                  <table>
                    <tr>
                      <td>
                        <div class="cate2">
                          <div class="cate2_img"><img src="IMAGE1" /></div>
                          <div class="cate2_description">
                            TEXTE 1
                          </div>
                        </div>
                      </td>
                      <td>
                        <div class="cate2">
                          <div class="cate2_img"><img src="IMAGE2" /></div>
                          <div class="cate2_description">
                            TEXTE 2
                          </div>
                        </div>
                      </td>
                      <td>
                        <div class="cate2">
                          <div class="cate2_img"><img src="IMAGE3" /></div>
                          <div class="cate2_description">
                            TEXTE 3
                          </div>
                        </div>
                      </td>
                      <td>
                        <div class="cate2">
                          <div class="cate2_img"><img src="IMAGE4" /></div>
                          <div class="cate2_description">
                            TEXTE 4
                          </div>
                        </div>
                      </td>
                    </tr>
                  </table>
                  <div style="text-align: center;">
                    ICI UN PETIT TEXTE SI VOUS LE VOULEZ
                  </div>
                </div><!-- Fin 3em paonglet -->
              </div>
              <script type="text/javascript">
              //<!--
                    var anc_paonglet = 'NomPaonglet1';
                    change_paonglet(anc_paonglet);
              //-->
              </script>
            </div>
          </td>
        </tr>
      </table>
    </body>
    </html>


    Etape 2 - Mettre la PA en place
    Pour cela il vous suffit d'aller dans: PA > Affichage > Généralités, et de copier ce code =D
    Code:
     
    <div style="font-size: 40px; font-family: Mistral; text-align: center;">
                                 Bienvenue sur TITRE DE VOTRE FORUM, {USERNAME} !                         
    </div><br /><br /> 
    <div style="font-size: 18px; font-family: 'Monotype Corsiva'; text-align: center;">
                                 <a href="LIEN" class="postlink" target="_blank" rel="nofollow">~ Guide du débutant ~</a><br /><a rel="nofollow" target="_blank" class="postlink" href="LIEN">Le Règlement</a> ¤ <a rel="nofollow" target="_blank" class="postlink" href="LIEN">Le Contexte</a> ¤ <a rel="nofollow" target="_blank" class="postlink" href="LIEN">Le Bottin des Avatars</a> ¤ <a rel="nofollow" target="_blank" class="postlink" href="LIEN">Lien autre</a> ¤ <a rel="nofollow" target="_blank" class="postlink" href="LIEN">Lien autre</a> ¤ <a rel="nofollow" target="_blank" class="postlink" href="LIEN">Lien autre</a> 
    </div>
      <iframe src="ICI LE LIEN DE LA PAGE HTLM DE VOTRE PA" frameborder="0" scrolling="no" style="margin: auto; width: 700px; height: 570px;"></iframe>

    Et voilà =D
    Félicitation pour avoir survécu   :friends:
    Si vous avez des questions, postez les à la suite de ce message et je trouverais le temps pour vous répondre.
    Et si ça fait une semaine que vous attendez une réponse, hésitez pas à m'envoyer un petit MP Wink




    Aile de l'Ange
    FémininAge : 18Messages : 95

    le Lun 28 Sep 2015 - 10:58

    Merci du partage.
    (Je ne sais pas si on peut déjà poster. Dite le moi si ce n'est pas le cas.)
    Kelalin
    FémininAge : 24Messages : 1405

    le Lun 28 Sep 2015 - 17:35

    Merci ! (ˆˇˆ)-c<˘ˑ˘)
    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Ven 4 Mar 2016 - 19:29

    Hello! ^^
    Alors désolée du retard tout d'abord! ensuite, il y a plusieurs soucis avec ton code. Déjà, tu as dans tes deux premiers codes que tu fournis des balises qui ne sont pas fermées. Note aussi que la balise image et la balise break (br) doivent être fermées comme ceci:
    Code:
    <img src="" />
    <br />

    Aussi, tu utilises une balise dépréciée: la balise center. Pense à la remplacer soit par un text-align: center, soit par une largeur et un margin: auto selon ce que tu voulais faire.
    Enfin, tu utilises une balise n'existant pas: le "d". Tu devrais le modifier par une balise inline ou une balise block (span ou div donc).

    Merci d'avance pour les changements! ^^



    Loukoum
    FémininAge : 23Messages : 811

    le Ven 4 Mar 2016 - 21:41

    Hello Nyo, pas de soucis pour le retard j'avais totalement oublié que j'avais donné ce code ^^'

    Concernant la balise d, j'avais déjà tenter de la remplacer par une balise div, mais mon soucis c'est que les infobulles ne fonctionnent plus de ce fait...
    Du coup j'avoue que j'avais abandonné ce code, du moins de le corriger... Je l'ai juste gardé parce qu'il fonctionnait X)




    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Ven 4 Mar 2016 - 21:44

    Je vais tenter de le corriger moi alors, mais ça risque de me prendre du temps. Merci d'être repassée en tout cas! ^w^



    Loukoum
    FémininAge : 23Messages : 811

    le Sam 5 Mar 2016 - 15:54

    Tu n'es pas obligé de corriger hein!
    Mais si tu le fais c'est sur que c'est formidable *-*
    Merci à toi d'avoir regardé mon code et de proposer une correction, même si elle vient l'année prochaine j'ai tout mon temps!




    memoriam
    FémininAge : 24Messages : 54

    le Mer 20 Avr 2016 - 2:53

    oh elle est parfaite pour mon design actuel!!!merci beaucoup du partage :) je vais créditer bien sûr et avec plaisir.
    Loukoum
    FémininAge : 23Messages : 811

    le Dim 1 Mai 2016 - 15:45

    Merci beaucoup =D




    Onyx
    FémininAge : 23Messages : 2614

    le Ven 14 Oct 2016 - 4:05

    Salut!

    Ça fait pas un an, mais presque XD

    Alors merci du partage, j'ai procédé aux corrections et tout devrait être ok alors je valide le code et il sera bientôt déplacé au bon endroit Wink



    Loukoum
    FémininAge : 23Messages : 811

    le Sam 15 Oct 2016 - 15:30

    Un an ce n'est rien dans une vie Wink
    Et je n'étais pas pressée de toute façon !
    Et puis je vais pas vous embêter avec ça alors que vous aviez d'autres choses à faires Wink

    En tout cas merci beaucoup pour les corrections !!!




    Solitude
    FémininAge : 41Messages : 251

    le Dim 13 Nov 2016 - 10:45

    Merci



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    Contenu sponsorisé

    Aujourd'hui à 21:24


      La date/heure actuelle est Sam 10 Déc 2016 - 21:24