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.


3 résultats trouvés pour pa

NyoTheNeko

[NYO] Page d'accueil pour Novus - Ven 27 Nov 2015 - 10:12

Alors pour le premier ça me le fait aussi sur Firefox.

Du coup, une des solutions est pour le padding de #pa .liens_rapides a:before, remplacer les valeurs actuelles par 8px 0 5px.
donc avoir:

Code:
padding: 8px 0 5px;


Pour le deux, pourquoi tu as des size dans ton CSS O___O Je pense que c'est une erreur ici dans ce message, mais si c'est dans ton CSS il faut absolument les supprimer xD
Mais sinon, c'est tout à fait ça, tu as bien compris. ^^

Pour la 3, alors... Effectivement, une animation va de 0 à 100%. Attention, tu remarqueras qu'il y a toujours deux keyframes et deux mises en places de l'animation: une fois webkit, pour safari et une fois normal pour les autres. Si tu mets 16 au lieu de 32, l'animation sera plus rapide car elle ne prendra que 16 secondes pour aller à tous les slides. Là, pour savoir combien de secondes il faut mettre, il n'y a qu'une solution: tester.

Au niveau de l'ajout des slides dans le HTML, un Slide correspond à ceci:
Code:
<div class="un_slide">
                                    <img src="http://img03.deviantart.net/2e84/i/2012/207/a/c/vidocq_by_rozyk007-d58ridh.jpg" />                         
        <div class="caption">
                                        Caption                       
        </div>
                                                             
      </div>

Après le dernier slide, il y a toujours encore deux div fermantes. Donc à chaque fois que tu colles une nouvelle slide, vérifie qu'il y a 4 div fermantes: comme ça tu es certain d'avoir mit au bon endroit.

au niveau du CSS, c'est donc ici:
Code:
/* Animation de la PA. Chaque slide a 20% de temps et l intervalle est de 5%. À réduire ou augmenter selon le nombre de slides. Ici il y a 4 slides. */
@-webkit-keyframes slider {
  0%, 20%, 100% {
    left: 0;
  }
  25%, 45% {
    left: -100%;
  }
  50%, 70% {
    left: -200%;
  }
  75%, 95% {
    left: -300%;
  }
}

@keyframes slider {
  0%, 20%, 100% {
    left: 0;
  }
  25%, 45% {
    left: -100%;
  }
  50%, 70% {
    left: -200%;
  }
  75%, 95% {
    left: -300%;
  }
}


Bien évidemment, si on veut ajouter des slides, le temps en % se réduit. Bien sûr le seul truc à faire pour trouver le % est de tester, mais ce que tu peux faire déjà, c'est diviser 100 par ton nombre de slides, et ensuite de bidouiller pour voir combien de temps tu veux donne rpour que le temps de slide et le temps de pause soit égal partout, tout en ayant 100 qui soit TOUJOURS à 0

Exemple avec 5: 0 - 15, 20 - 35, 40 - 55, 60 - 75, 80 - 95, 100 est donc à 0 (Donc: temps de 15% et attente de 5%)
Donc dans le CSS tu aurais ceci:
Code:
/* Animation de la PA. Chaque slide a 20% de temps et l intervalle est de 5%. À réduire ou augmenter selon le nombre de slides. Ici il y a 4 slides. */
@-webkit-keyframes slider {
  0%, 15%, 100% {
    left: 0;
  }
  20%, 35% {
    left: -100%;
  }
  40%, 55% {
    left: -200%;
  }
  60%, 75% {
    left: -300%;
  }
  80%, 95% {
    left: -400%;
  }
}

@keyframes slider {
    0%, 15%, 100% {
    left: 0;
  }
  20%, 35% {
    left: -100%;
  }
  40%, 55% {
    left: -200%;
  }
  60%, 75% {
    left: -300%;
  }
  80%, 95% {
    left: -400%;
  }
}


Ce que tu peux faire, mais je ne garantis pas que ça marche pour tout nombre de slides, c'est que tu divises 100 par ton nombre, donc ici 100/5= 20, tu retirer les temps d'attente, donc 5%, et tu as ton temps d'animation pour chaque slide.
Après tu peux calculer combien font 15% de 16 secondes si tu veux faire 4a de façon stricte ou, bah, juste tester ce que ça te donner et augmenter le nombre de secondes ou le réduire selon ce que tu veux ^^

Pour le 4, il suffit d'ajouter dans ton CSS ceci:
Code:
#pa #slideshow .slider .un_slide .caption a {
  /* Ici la mise en forme normale du lien */
}

#pa #slideshow .slider .un_slide .caption a:hover {
  /* Ici effet sur le lien au passage de la souris */
}


Pour l'edit, ça ne le fait pas chez moi donc je ne peux pas vraiment t'aider, sachant qu'il y a un letter-spacing qui, normalement, fait que les lettres sont justement totalement éloignées! ><

J'espère que 4a a répondu à tes questions, sinon n'hésite pas à demander encore ^^

Henrykiki

PA Simple (News, Staff, Contexte & groupes) - Lun 29 Déc 2014 - 21:29

Bonjour à tous,

Voici un LS de PA style Attack on Titan hivernale.
Elle vous est proposée suite à la demande de Mikasa.


Aperçus : normale - survol du staff - en ligne


Cette PA contient :

  • Un espace groupes pour 5 groupes
  • Un espace Staff + pseudo qui s'affiche au survol
  • Un espace News qui défilent + arrêt au survol.
  • Un espace Recrutement qui défilent + arrêt au survol.
  • Un espace Contexte.


L'installation


Création de la page html


Rendez-vous sur votre panneau d'administration > modules > Gestion des pages HTML > Création en mode avancé. Donnez un titre a celle-ci : Pa-hivernale, par exemple, et collez-y le code ci-dessous :

Code:
<!doctype html>
<html lang="fr">
<head>
   <meta charset="UTF-8">
   <title>Pa - Mikasa</title>
   <link href='http://fonts.googleapis.com/css?family=Rye' rel='stylesheet' type='text/css'>

   <style>
      /* ici tous les textes avec la typo spéciale sont visés */
      #liens-nav a, #blocs td h2, ul#staffs li span {
         font-family: 'Rye', cursive;
      }

      /* pour ne pas devoir chercher tous les blocs qui ont la font */

      #pa {
         width: 800px; height: 400px;
         margin: 0 auto;
         background: url("http://i59.servimg.com/u/f59/18/77/81/63/pa_mod12.png") no-repeat;
         background-position: -2px; /*Ajustement du fond pour positionnement des blasons*/
         font-family: sans-serif;
         font-size: 12px;
         letter-spacing: .5px;
         position: relative;
      }

      #pa a {
         -webkit-transition: all .2s linear;
         -moz-transition: all .2s linear;
         -ms-transition: all .2s linear;
         transition: all .2s linear;
      }

      #liens-nav {
         text-align: center;
      }

      @-webkit-keyframes jingle {
         0% {-webkit-transform: rotate(-3deg);}
         33% {-webkit-transform: rotate(-0deg);}
         66% {-webkit-transform: rotate(3deg);}
         100% {-webkit-transform: rotate(0deg);}
      }

      @-moz-keyframes jingle {
         0% {-moz-transform: rotate(-3deg);}
         33% {-moz-transform: rotate(-0deg);}
         66% {-moz-transform: rotate(3deg);}
         100% {-moz-transform: rotate(0deg);}
      }

      @-ms-keyframes jingle {
         0% {-ms-transform: rotate(-3deg);}
         33% {-ms-transform: rotate(-0deg);}
         66% {-ms-transform: rotate(3deg);}
         100% {-ms-transform: rotate(0deg);}
      }

      @keyframes jingle {
         0% {transform: rotate(-3deg);}
         33% {transform: rotate(-0deg);}
         66% {transform: rotate(3deg);}
         100% {transform: rotate(0deg);}
      }

      #liens-nav a {
         font-size: 15px;
         color: #416139;
         text-decoration: none;
         display: block;
         padding-top: 70px; /* permet de faire croire que les blasons sont des liens */
         font-weight: normal;
      }

      #liens-nav a:hover {
         color: #811420;
         -webkit-animation: jingle .35s linear infinite;
         -moz-animation: jingle .35s linear infinite;
         -ms-animation: jingle .35s linear infinite;
         animation: jingle .35s linear infinite;      }

      #blocs {
         position: relative;
         bottom: -10px;
      }

      #blocs td {
         vertical-align: top;
         position: relative;
         padding: 5px;
      }

      #blocs td h2 {
         position: absolute;
         top: -15px; right: 0;
         margin: 0; padding: 0;
         font-size: 18px;
         font-weight: normal;
         display: block;
         width: 100%;
         color: #7e161e;
      }

      #blocs td.news, #blocs td.need {
         width: 150px; max-width: 150px;
         height: 80px; max-height: 80px;
      }

      #blocs td.contexte {
         width: 180px; max-width: 180px;
      }

      #blocs td.contexte, #blocs td.news, #blocs td.need {
         background: #f2f2f2;
         border-radius: 5px 0px 5px 5px;
         border-bottom: 1px solid lightgray;
         border-left: 1px solid lightgray;
      }

      #content-contexte {
         height: 200px;
         overflow-y: scroll;
         padding-right: 10px;
      }

      h2.center {   
         max-width: 220px;
         text-align: center;
         bottom: 0px !important;
         top: auto !important;
         left: 0;
      }

      h2.right {
         text-align: right;
         padding-right: 5px !important;
      }
      
      .news a, .need a {
         color: #000;
         text-decoration: none;
      }

      .news a:hover, .need a:hover {
         color: #7e161e;
      }
      .news p, .need p {
         padding: 5px 0;
         margin: 0;
         border-bottom: 1px solid #416139;
      }

      .news p strong, .need p strong{
         display: block;
      }

      ul#staffs {
         position: absolute;
         bottom: -16px;
         left: -8px;
         width: 225px;
         height: 105px;
         list-style-type: none;
         padding:0; margin: 0;
         text-align: center;
         overflow-y: auto;
      }

      ul#staffs li {
         width: 90px; height: 90px;
         overflow: hidden;
         background: orange;
         padding:0; margin: 0px 5px 5px;
         display: inline-block;
      }

      ul#staffs li span {
         position: absolute;
         top: -25px;
         display: inline-block;
         width: 90px;
         padding: 5px 0px;
         background: rgba(255,255,255,.7);
         color: #7e161e;
         -webkit-transition: top .2s ease-in-out;
         -moz-transition: top .2s ease-in-out;
         -ms-transition: top .2s ease-in-out;
         transition: top .2s ease-in-out;
      }

      ul#staffs li:hover span {
         position: absolute;
         top: 0px;
         display: inline-block;
         width: 90px; height: 14px;
         overflow: hidden;
         padding: 5px 0px;
         background: rgba(255,255,255,.7);
         color: #7e161e;
      }

      #credits {
         position: absolute;
         bottom: -20px; right: 0;
         text-align: right;
         font-family: sans-serif;
         font-size: 12px;
         padding: 3px 0;
         color: #99c6dd;
      }

      #credits a {
         padding-left: 20px;
         background: url("http://img4.hostingpics.net/pics/171045Ship.png") no-repeat left;
         background-size: 14px 14px;
         color: #7699ab !important;
         text-decoration: none !important;
         border: 0px !important;
      }
      
      #credits a:hover {
         color: #536b78 !important;
         background-position: 3px
      }
   </style>
</head>
<body>
   <div id="pa">
      <table align="center" width="710px" id="liens-nav">
         <tr>
            <td width="20%"><a href="1">Wall People</a></td>
            <td width="20%"><a href="1">Garnison</a></td>
            <td width="20%"><a href="1">Military Police</a></td>
            <td width="20%"><a href="1">Survey Corps</a></td>
            <td width="20%"><a href="1">Trainees squad</a></td>
         </tr>
      </table>
      
      <table align="center" width="740px" height="247px" id="blocs" cellspacing="20px">
         <tr>
            <td>
               <!-- Laisser vide = espace au dessus de staff -->
               <h2 class="center">STAFF</h2>
               <!-- Juste le titre va dans cette case, le contenu c'est plus loin ! -->
            </td>
            <td class="news">
               <h2 class="right">News</h2>
               <marquee behavior="scroll" direction="up" scrollamount="1" width="150px" height="80px"  onmouseover="this.stop();" onmouseout="this.start();">

                  <!-- Pour rajouter des news, juste copier/coller une ligne ci-dessous  -->
                  <p><a href=""><strong>Le titre</strong> l'info de la news?</a></p>
                  <p><a href=""><strong>Le titre :</strong> l'info de la news?</a></p>

               </marquee>
            </td>
            <td class="contexte" rowspan="2">
               <h2 class="right">Contexte</h2>
               <div id="content-contexte">
                  <!-- Collez ici votre contexte :  -->
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, atque, nulla, consequatur impedit sapiente nostrum nisi blanditiis illum et tempora molestias odio natus qui esse explicabo assumenda voluptatum sit minima.</p>
                  
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, rerum, ipsam dicta laborum dignissimos inventore sunt odit laudantium beatae reprehenderit itaque autem necessitatibus delectus iure magni soluta incidunt quidem consectetur?</p>
               </div>
            </td>
         </tr>
         <tr>
            <td>
               <!-- CONTENU DE LA CASE STAFF => ICI :  -->
               <ul id="staffs">
                  <li>
                     <span class="name">Henrykiki</span>
                     <img src="http://i59.servimg.com/u/f59/18/77/81/63/mikasa11.png" alt="STAFF"></li>
                  <li>
                     <span class="name">Name</span>
                     <img src="http://i59.servimg.com/u/f59/18/77/81/63/mikasa11.png" alt="STAFF">
                  </li>
                  <!-- <li>STAFF 3</li>
                  <li>STAFF 4</li> -->
               </ul>

            </td>

            <td class="need">
               <h2 class="right">We need</h2>
               <marquee behavior="scroll" direction="up" scrollamount="1" width="150px" height="80px"  onmouseover="this.stop();" onmouseout="this.start();">

                  <!-- Pour rajouter un poste, juste copier/coller une ligne ci-dessous  -->
                  <p><a href=""><strong>Le poste :</strong> description ?</a></p>
                  <p><a href=""><strong>Le poste :</strong> description ?</a></p>

               </marquee>
            </td>
            <!-- <td></td> -->
         </tr>
      </table>

      <div id="credits">
         PA réalisée sur <a href="http://www.never-utopia.com/t52279-henrikiyi-pa-style-attack-on-titan-fond-image-hivernale" target="_blank">Never-Utopia</a>.
      </div>
   </div>
</body>
</html>


Enregistrez. Ensuite, copiez quelque part l'adresse internet de cette page fraichement crée car nous en aurons besoin dans quelques instants.

Installation de la page d'accueil


Rendez-vous à l'emplacement de votre page d'accueil (PA>Affichage>Page d'accueil>Généralités) et collez-y ce code pour introduire une iframe...

Code:
<iframe src="HTTP://ADRESSE-DE-LA-PAGE-HTML-RECEMMENT-CREE" frameborder="0" scrolling="no" style="width: 800px; height: 400px;"></iframe>


Et donc, remplacez "HTTP://ADRESSE-DE-LA-PAGE-HTML-RECEMMENT-CREE" par l'adresse de la page html que vous avez créée, dont je vous ai dis de garder l'URL quelque part...

Les images correspondant aux groupes sont intégrées dans le fond de la PA, et donc, dans l'image utilisée pour le background de #pa ! (voir l'image de fond)


Merci de conserver les crédits envers Never-Utopia


Une question ? Un souci avec le code ?


Rendez-vous dans la zone appropriée : c'est par ici !

Hiro'

[Template] Supprimer le fond et le cadre de la PA - Dim 22 Sep 2013 - 16:55


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Bonjour tout le monde !

Aujourd'hui je vous apporte une astuce très simple. Elle vous servira a supprimer le cadre et le fond de votre page d'accueil. Pour que vous vous compreniez bien, je vous montre un exemple avec et un exemple sans. J'espère ne pas faire doublon, je n'ai pas vu de topic là-dessus dans cette section.

Avec et Sans


C'est très simple. Vous allez devoir modifier votre template index_body.
Non, non, ne fuyez pas, les templates sont nos amies!
Et puis il n'y a pas grand chose à faire.

Repérez cette partie :

Code:
{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->


Regardez à la 3e ligne où vous avez un tableau avec la class "forumline" :
Code:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">


Et vous enlevez la class, ce qui donne ceci :
Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0">


Oui, oui, c'est tout. Comment ça, je vous arnaque ?

Bon code et n'oubliez pas un petit crédit à Never-Utopia Wink


Revenir en haut

La date/heure actuelle est Ven 29 Mar 2024 - 6:49