Sujets similaires

Dernière édition par Pony62 le Jeu 02 Jan 2014, 18:21, édité 1 fois

Bonsoiiir et joyeux Noël et Joyeuses fêtes de fin d'année !

Code:: .navigationmagique_boite {
background-color: #e8e9eb;
border-radius:20px;
box-shadow: 2px 2px 3px #cdd3de;
font-size: 40px;
margin-top: 10px;
padding-bottom: 5px;
  text-align: center;

}

.navigationmagique_princip a{
color: #c44c52;
  text-shadow: 2px 2px 3px white;
  letter-spacing: 0;
  transition: 0.5s; /* realise une transition lente avec l effet au survol */
  -moz-transition: 0.5s;
  -htm-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
}

.navigationmagique_princip a:hover{
letter-spacing: 3px;
  transition: 0.5s; /* realise une transition lente avec l effet au survol */
  -moz-transition: 0.5s;
  -htm-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  color: white;
  text-shadow: 2px 2px 3px #c44c52;
}
.navigationmagique img
{
  display: none;}

.navigationmagique_princip{
background-image: url('http://img21.imageshack.us/img21/8203/yg3k.png');
  color: white;
background-position:top center;
background-repeat:no-repeat;
background-size: 100% auto;
text-align: center;
  padding-top: 7.8%;
  text-align: justify;
font-size: 14px;
  padding-bottom: 15%;
}

.navigationmagique {
margin-top:20px;
}
.navigationmagique a
{
  display: block;
  margin-top: -20px;
  color: #c44c52;
  text-shadow: 2px 2px 3px white;
  letter-spacing: 0;
  transition: 0.5s; /* realise une transition lente avec l effet au survol */
  -moz-transition: 0.5s;
  -htm-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  font-size: 14px;
}

.navigationmagique a:hover
{
  letter-spacing: 3px;
  transition: 0.5s; /* realise une transition lente avec l effet au survol */
  -moz-transition: 0.5s;
  -htm-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  color: white;
  text-shadow: 2px 2px 3px #c44c52;
}

.navigationmagique_titre{
font-family: 'Carrois Gothic SC', sans-serif;
font-size: 20px;
color: #e8e9eb;
text-shadow: 2px 2px 3px #aab1bf;
border-bottom: solid 1px white ;
}

.postbody {
max-width: 500px;
overflow:auto;
margin-top: 10px;}

a { text-decoration: none; }

.forumline {
width: 500px;
  margin-left: auto;
  margin-right: auto;
}

et le HTML

Code:: <div class="navigationmagique_princip">
  <table width="83.65%" style="margin:auto;" id="navigationmagiquetable"><tr><td width="25%" valign="top"><span class="navigationmagique_titre">Full Horse V3</span><br/>
   Bienvenue <span class="USERNAME"></span> ! Nous sommes ravis de te voir ici, en [PAYS] , actuellement, il n'y fait pas très chaud, mais rassure toi ,tu peux quand même sortir ta monture. Tu es actuellement <span class="L_YOU_BELONG_GROUPS"></span>. Bon jeu ! </td>
   <td width="25%" valign="top"><span class="navigationmagique_titre">Ton compte</span><br/>
   <div class="navigationmagique">{GENERATED_NAV_BAR}</div></td>
   <td width="25%" valign="top"><span class="navigationmagique_titre">Liens utiles</span><br/>
   <a href="http://fullhorsev3.forumotion.com/t9-rules" target="_blank">Réglement</a><br />
   <a href="http://fullhorsev3.forumotion.com/t20-bottin-des-avatars" target="_blank">Avatars pris</a><br />
   <a href="http://fullhorsev3.forumotion.com/f29-club-house" target="_blank">Club House</a><br />
   <a href="#" target="_blank">Livre d'or </a><br />
   <a href="http://fullhorsev3.forumotion.com/f57-federation" target="_blank">Fédération</a><br />
   <a href="http://fullhorsev3.forumotion.com/t37-resumes-finis" target="_blank">Résumé fini</a><br />
   <a href="http://fullhorsev3.forumotion.com/f12-rappels" target="_blank">Rappel</a><br />
   <a href="http://fullhorsev3.forumotion.com/t83-aide-au-rp" target="_blank">Aide au RP</a><br />
   <a href="http://fullhorsev3.forumotion.com/f21-annonces" target="_blank">Annonces</a>
</td>
   <td width="25%" valign="top"><span class="navigationmagique_titre">Top sites</span><br/>
   Un clic tous les deux heures!<br/><div class="navigationmagique_boite"><a href="#" target="_blank">♘</a> <a href="#" target="_blank">♞</a> <a href="#" target="_blank">♘</a></div> </td></tr>
   </table>


</div>

Template modifié: Index_body

Tuto utilisé Slideshow : Ici

Chrome, connecté :

Spoiler:

Chrome, déconnecté :

Spoiler:

Firefox, connecté :

Spoiler:

Firefox, déconnecté :

Spoiler:

Les codages :

CSS :

Code:: /* DEBUT QEEL */
.qeel_fond {
background-image: url("http://img24.imageshack.us/img24/9536/668y.png");
background-position:top center;
background-repeat:no-repeat;
background-size: 100% auto;
  padding-top: 20%;
  font-size: 14px;
  color: white;
  padding-left: 10%%;
  height: 300px;
}

/*FIN QEEL */

/* DEBUT SLIDESHOW QEEL */

.slideshowb,
.slide {
   width: 215px;
   height: 170px;
}

.slideshowb {
   margin: 0;
  margin-left: 20px;
   overflow: hidden;

   background-color: rgba(255,255,255,0.5);

   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
}

.slideshowb div {
   position: relative;
   top: 0;
   left: 0;
}

.slide {
   margin: 0;
   overflow: auto;

   display: inline-block;
   vertical-align: middle;

   text-align: center;
   color: black;
}

.slide p {
   margin: 10px;
   text-align: justify;
}
/*FIN SLIDESHOW QEEL */

HTML :

Code:: <center><div class="qeel_fond"><table width="100%" border="0" cellspacing="1" cellpadding="0">

<tr>
<td width="470px">
   <span id="delf">{TOTAL_USERS} {NEWEST_USER} ! {TOTAL_POSTS}.<br />{TOTAL_USERS_ONLINE}</span>
   <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"D'ailleurs nous souhaitons la bienvenue au dernier petit nouveau,");</script>
   <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/utilisateur en ligne/,"cavalier qui se promène ");</script>
   <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/utilisateurs en ligne/,"cavaliers qui se promènent ");</script>
   <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Enregistré/,"inscrit");</script>
   <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Enregistrés/,"inscrits");</script>
   <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invisible et/,"fantôme, ");</script>
   <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invisibles et /,"fantômes, ");</script>
   <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invité/,"visiteur");</script>
   <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invités/,"visiteurs");</script>
   <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Nous avons/,"Full Horse est fier d'accueillir");</script>
   <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/membre enregistré/,"cavalier.");</script>
   <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/membres enregistrés/,"cavaliers.");</script>
   <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Nos membres ont posté un total de/,"Tout ce petit monde a posté");</script>






<span id="deld">
  {LOGGED_IN_USER_LIST}<br>
  {L_CONNECTED_MEMBERS}<br><br>
  {TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}<br><a href="http://fullhorsev3.forumotion.com/chatbox/index.forum" target="_blank">Clique</a> pour les rejoindre.<br><br>

<div id="chatbox_popup"></div>
<script type="text/javascript">
//<![CDATA[
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
//]]>
</script>
   <script type="text/javascript">document.getElementById('deld').innerHTML=document.getElementById('deld').innerHTML.replace(/Utilisateurs enregistrés/,"Cavaliers présents");</script>
   <script type="text/javascript">document.getElementById('deld').innerHTML=document.getElementById('deld').innerHTML.replace(/Il y a actuellement/,"Dont");</script>
   <script type="text/javascript">document.getElementById('deld').innerHTML=document.getElementById('deld').innerHTML.replace(/utilisateur/,"commère");</script>
   <script type="text/javascript">document.getElementById('deld').innerHTML=document.getElementById('deld').innerHTML.replace(/Membres connectés au cours des/,"Cavaliers qui sont passé durant ces");</script>
   <script type="text/javascript">document.getElementById('deld').innerHTML=document.getElementById('deld').innerHTML.replace(/sur la ChatBox/,"qui papotent sur la ChatBox");</script>
   <script type="text/javascript">document.getElementById('deld').innerHTML=document.getElementById('deld').innerHTML.replace(/avant/,"après");</script>
   <script type="text/javascript">document.getElementById('deld').innerHTML=document.getElementById('deld').innerHTML.replace(/avant/,"après");</script>

   </span>
</td>
   <td align="left" valign="middle" >
<div id="slideshowb" class="slideshowb">
   <div id="slideshow-containerb">
   <div class="slide">
   <h1>Première Année</h1>
   <p>Cupcake ipsum dolor. Sit amet carrot cake.</p>
   </div>

   <div class="slide">
   <h1>Deuxième Année</h1>
   <p>Cupcake ipsum dolor. Sit amet carrot cake.</p>
   </div>

   <div class="slide">
   <h1>Troisième Année</h1>
   <p>Cupcake ipsum dolor. Sit amet carrot cake.</p>
   </div>

   <div class="slide">
   <h1>Eleveurs et Coach</h1>

<p>Cupcake ipsum dolor. Sit amet bonbon. Pastry gummi bears wafer I love jujubes marzipan dragée tiramisu.</p>
   </div>

   <div class="slide">
   <h1>Cavaliers Professionnels</h1>

   <p>Cupcake ipsum dolor. Sit amet bonbon. Pastry gummi bears wafer I love jujubes marzipan dragée tiramisu.</p>
   </div>

   <div class="slide">
   <h1>PNJ</h1>

   <p>Cupcake ipsum dolor. Sit amet bonbon. Pastry gummi bears wafer I love jujubes marzipan dragée tiramisu.</p>
   </div>

   <div class="slide">
   <h1>Anciens comptes</h1>

   <p>Cupcake ipsum dolor. Sit amet bonbon. Pastry gummi bears wafer I love jujubes marzipan dragée tiramisu.</p>
   </div>


</div>
</div></td>
   </tr>
   </table>
   </div>


</center>

JS :

Code:: $(function () {
   //VARIABLES MODIFIABLES
   var delaiSwitch = 1000; // Délai (en ms) d'affichage d'un slide
   var delaiTransition = 1000; // Délai (en ms) de l'animation de transition
   var direction = 'left'; // Sens (left ou right) du défilement
   var idSlideshow = '#slideshowb'; // ID du slideshow
   var idContainer = '#slideshow-containerb'; // ID du container

   //VARIABLES SYSTEME
   var slideshowWidth = parseInt($(idSlideshow).css('width'));
   var slideshowHeight = parseInt($(idSlideshow).css('height'));
   var nbSlides = $(idContainer+' > .slide').length;

   //ADAPTE LA TAILLE DU CONTENEUR AU NOMBRE DE BLOCS QU'IL CONTIENT
   $(idContainer).css('width', slideshowWidth*nbSlides+'px');


   //REDEFINIT LE CONTENU POUR SUPPRIMER LES EVENTUELS ECARTS DUS AUX BORDERS
   if(direction==='right') {
   var decalageLeft = -slideshowWidth*(nbSlides-1);
   $(idContainer).css('left', decalageLeft+'px');

   $(idContainer+' > .slide').each(function() {
   var el = $(this).remove();
   $(idContainer).prepend(el);
   }, this);
   } else {
   $(idContainer+' > .slide').each(function() {
   var el = $(this).remove();
   $(idContainer).append(el);
   }, this);
   }

   //ADAPTE LA TAILLE DES IMAGES AUX DIMENSIONS DU SLIDESHOW
   $(idSlideshow+' img').css('max-width', slideshowWidth);
   $(idSlideshow+' img').css('max-height', slideshowHeight);

   //LANCEMENT DE L'ANIMATION
   setInterval(function() {
   slideshow()
   }, delaiSwitch);

   //FONCTION DE DEFILEMENT
   function slideshow() {
   var compteur = 0; // Compte les slides ayant bougé

   if(direction==='right') {
   $(idContainer+' > .slide').animate({left: '+='+slideshowWidth}, delaiTransition, function() {
   compteur++;

   // Lorsque le dernier slide à bougé, on crée la boucle
   if(compteur===nbSlides) {
   var el = $(idContainer+' > .slide:last').remove();
   $(idContainer).prepend(el);
   $(idContainer+' > .slide').css('left', '0');

   compteur = 0;
   }
   });
} else {
   $(idContainer+' > .slide').animate({left: '-='+slideshowWidth}, delaiTransition, function() {
   compteur++;

   // Lorsque le dernier slide à bougé, on crée la boucle
   if(compteur===nbSlides) {
   var el = $(idContainer+' > .slide:first').remove();
   $(idContainer).append(el);

   $(idContainer+' > .slide').css('left', '0');

   compteur = 0;
   }
   });
}
   }
});

Salut Pony62,

Citation :: Le forum test est ici : ICI.

Est ce que tu pourrais juste rajouter le lien du forum test s'il te plait ? Chez moi il n'y a pas lien Wink

Voilà qui est étrange !
forum test et là ? =)
sinon :
http://petit-coin-de-marinc.forumactif.org/

voila =)

Commençons pour le QEEL. Il y a effectivement une différence entre Chrome et Firefox xD.
Dans .qeel_fond tu as "padding-left: 10%%;". Si tu enlèves le deuxième %, cela devrait normalement être mieux sur Firefox. En effet, Chrome comprends ce que tu as voulu dire et il l'applique. Firefox voit l'erreur, il n'applique pas pas le CSS pour le padding-left.

Pour le slideshow, peut tu bien vérifier que le fichier JS est bien mis sans problèmes ? Par exemple enlève tout le contenu et remplace le par

Code:: alert("Le fichier JS est bien là !");

Si tout vas bien une pop up s'ouvrira avec ce texte, sinon c'est qu'il y a un problème.
Car chez moi il n'y a pas de problème si j'essaye de mon côter, le problème vient donc surement du lien entre le JS et le HTML ^^

J'ai supprimé, et reprit du tutoriel, mais toujours rien ><
Je me demande si il n'y aurait pas des interférences avec la slideshow de la PA... Mais dans ce cas là, elle non plus ne marcherait pas ... Non ?

Sinon pour le décalage c'est parfait, j'avais pas fait gaffe avec ça, merci ! Very Happy

Je ne pense pas car quand j'utilise la console pour rajouter le code JS du slider sur ton forum directement, cela fonctionne...
C'est vraiment bizarre, dans le code source je n'arrive pas à trouver ton code JS pour ce slider >o<.
Pourrais tu me donner le lien du JS s'il te plait ? Tu l'as rajouté via le module de FA ? Ou bien avec un lien externe ?
Si tu l'as ajouté avec un hébergement externe, vérifie bien qu'il n'y a pas de problème avec l'hébergeur.
Si tu l'as ajouté avec le module de script de FA, est ce que tu as déjà eu des problèmes avant en ajoutant du JS par ce moyen là ?

c'est étrange O.o
Je l'ai ajouté via FA
http://petit-coin-de-marinc.forumactif.org/12797.js

Quand j'y pense, j'avais voulu modifier les scripts pour les scrollbars via du JS, ça n'avait pas marché, j'en avais déduis que je m'y prenais mal, depuis j'utilise plus vraiment les JS via FA =)

Hum, dans ton template "overall_header", est ce que tu as dedans :

Code:: {HOSTING_JS}

Si je ne me trompe pas, c'est ce qui défini les fichier JS hébergés sur FA à rajouter ^^. Si elle n'y est pas, il faudrait que tu la copies / colles dans ton overall_header, genre au même endroit que tu as appelé tes autres script JS

Ca pourrait être l'explication.

J'ai vérifié, il est toujours présent, à la même place qu'il devrait être. Du coup j'ai essayé de rajouter

Code:: <script src="http://petit-coin-de-marinc.forumactif.org/12797.js" type="text/javascript"></script>

Sauf que ça marche toujours pas >< j'pense que je vais faire une page html à part, et mettre une i-frame, pour voir si ça marche, parce que là je capte plus xD

Bon déjà point positif, j'arrive maintenant à le voir dans le code source ^^

Le problème vient du fait que le JS se charge trop tôt. J'avais eu un problème comme ça à un moment ^^

Pour le template overall_footer_end, met le code pour ton script tout à la fin avant la fermeture du body

Genre la toute fin sera comme ça :

Code:: <script src="http://petit-coin-de-marinc.forumactif.org/12797.js" type="text/javascript"></script>
</body>
</html>

HALLEJUHA. ça maaaarche ! Merci du fond du coeur =)
Ne me reste que le petit soucis du blanc en bas du bloc de navigation et j'aurais enfin donné avec le bas de page!

Ah oui je l'avais oublié ^^
Il faut que tu mettes ceci :
- body un margin-bottom: 0;
- td.bodyline un padding-bottom: 0;
- .navigationmagique_princip un padding-bottom:0 et la bonne hauteur. Avec height: 340px chez moi c'est bon.

He bien merci beaucoup ! Voilà des problème de réglé, je me coucherais moins bête à présent! Encore merci =) ♥

[RESOLU] Problème Divers - Qeel, slideshow infini horizontale, et navigation en footer

[RESOLU] Problème Divers - Qeel, slideshow infini horizontale, et navigation en footer

Sujets similaires

Sujets similaires

Partenaires Or