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 à ne pas rater :
Code promo Nike : -25% dès 50€ d’achats sur tout le site Nike
Voir le deal

    Problème avec section défilante (PA)

    Adélaïde.D.L
    Adélaïde.D.L
    FémininAge : 36Messages : 39

    Sam 15 Avr 2017 - 22:47

    Rappel du premier message :

    Voir la 2e page pour le problème.

    Petite commande de mise en forme d'animation à coté du Contexte



    Coucou par ici,
    Je viens par ici car j'aurais besoin d'un petit coup de main s'il vous plais ...
    J'avoue ne pas avoir trop d'idée et je tourne un peu en rond pour faire une page d’acceuil sympa, et original.
    L'ambiance du forum est assez sombre et peu coloré si ce n'est la bannière.
    L'idée est de faire apparaitre une sorte de fiche informative lors du survol (ou d'un clique) d'un mot ou d'un ensemble de mots du contexte


    Schéma(s) et Eléments


    Schémas :
    Problème avec section défilante (PA) - Page 2 Gjia
    image:
    Je me suis permise de mettre une capture d'écran de la présentation actuelle du Contexte sur notre forum car mon idée est partie de la... Mais je suis persuader que quelque chose de plus sympa est réalisable un peu moins brute :/. Notamment concernant les 3 boutons du bas

    Tailles des éléments : En gros un cadre principale de 750 px de largeur , le grand gauche 75% de largeur et celui de droite environ 25%
    L'image apparaissant dans la partie 150 x 225
    Effets voulus : En gros je me rend compte que j'ai une idée assez précise... toutefois pas simple a explicité. En gros lorsque l'on survol (ou on clique sur un éléments inscrit en rouge, un rouleau s'ouvre sur le coté avec quelques informations concernant cette personne.
    Version de votre forum : PHPBB2


    Ressources


    Des couleur Noir/grise
    Élément séparateur Problème avec section défilante (PA) - Page 2 Ec11


    Autres précisions ?


    sur le forum nous avons choisi d'utilisé cette police pour les titres et autres informations mise en avant Jim Nightshade



    vala val je crois que tout est dis un grand merci d'avance
    Enfin je crois sinon les questions sont les biens venues




    Dernière édition par Adélaïde.D.L le Dim 4 Juin 2017 - 17:05, édité 4 fois



    Problème avec section défilante (PA) - Page 2 Pxox
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Sam 16 Sep 2017 - 5:31

    http://forum-test-onyx6.forumactif.com/h1-pa-adelaide



    • Revenir en haut
    Adélaïde.D.L
    Adélaïde.D.L
    FémininAge : 36Messages : 39

    Mer 20 Sep 2017 - 9:05

    J'aime bien,
    Il me semble toutefois que le texte déborde sur le cadre du dessous ?

    Mais serait-il possible d'avoir dans l'emplacement du bas un cartouche dans lequel le texte est amené à changer ?
    Et dans la colonne de gauche 4 cartouches dans lesquels pourraient défiler des "carte identité" ( une image avec quelques info à côté)
    Merci
    :)



    Problème avec section défilante (PA) - Page 2 Pxox
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 22 Sep 2017 - 17:48

    Salut!

    Tout devrais normalement rentrer maintenant è_é
    (Et si ça dépasse il y aura une barre de défilement u_u)

    http://forum-test-onyx6.forumactif.com/h1-pa-adelaide

    Sinon, quand tu parle de l'espace en bas, tu parles de quoi exactement? Du premier bloc en bas à gauche? Tu peux déjà y mettre ce que tu veux...



    • Revenir en haut
    Adélaïde.D.L
    Adélaïde.D.L
    FémininAge : 36Messages : 39

    Lun 25 Sep 2017 - 12:42

    J'avoue que c'est beaucoup mieux comme ça
    Je sais que la colonne centrale est plus petite mais comment tu avais fait pour que cette image apparaisse initialement puis soit remplacée ? (pour éviter que le cadre reste noir quand il n'y a pas de fiche projetée dedans ? )

    et oui la petite case en bas, c'était bien celle en bas à gauche (avoir des cartouches qui défilent de droite à gauche)
    Mercii beaucoup



    Problème avec section défilante (PA) - Page 2 Pxox
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Jeu 28 Sep 2017 - 22:20

    Salut!

    J'avais juste enlevé l'image parce qu'elle n'était pas à la bonne taille, mais bon, je l'ai redimensionnée u_u

    Voilà le résultat : http://forum-test-onyx6.forumactif.com/h1-pa-adelaide



    • Revenir en haut
    Adélaïde.D.L
    Adélaïde.D.L
    FémininAge : 36Messages : 39

    Jeu 28 Sep 2017 - 22:41

    Ah je croyais que c'était autre chose vu le résultat que ca donnait chez moi ><
    Purée faut que je trouve ce que j'avais fait de travers.
    Mais c'est super comme ça
    Mille merci :)



    Problème avec section défilante (PA) - Page 2 Pxox
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 29 Sep 2017 - 0:02

    Alors voilà les codes :




    • Revenir en haut
    Adélaïde.D.L
    Adélaïde.D.L
    FémininAge : 36Messages : 39

    Ven 29 Sep 2017 - 23:59

    Merci par contre j'ai un petit soucis sur safari
    J'ai que deux cartouches visibles sur les quatre avec un gros décalage aurais-tu une solution stp ?
    Problème avec section défilante (PA) - Page 2 Img_1110

    Et sur Firefox moins problématique mais le cartouche des prédéfini passe sur le cadre de prédéfini




    Problème avec section défilante (PA) - Page 2 Pxox
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Sam 30 Sep 2017 - 0:17

    Pour le premier problème, remplace ceci :
    Code:
    /*Cartouches qui défilent de droite à gauche*/
          .class_defil_cartouche {
          display: inline-block;
          height: 80px;
          width: 165px;
          margin-left: 10px;
          padding: 5px;
          border-radius: 5px;
          background: #0a0a0a;
          overflow: auto;
          }

    Par cela :
    Code:
    /*Cartouches qui défilent de droite à gauche*/
          .class_defil_cartouche {
          vertical-align: top;
          display: inline-block;
          height: 80px;
          width: 165px;
          margin-left: 10px;
          padding: 5px;
          border-radius: 5px;
          background: #0a0a0a;
          overflow: auto;
          }

    Je vais aller vérifier pour l'autre, donne moi 5 min.



    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Sam 30 Sep 2017 - 0:28

    Ok, pour le 2e problème, on remplace la section des prédéfinis par ceci :
    Code:
    <!-- SECTION DES PRÉDÉFINIS -->
            <div class="predef_defilement_bloc">
            <marquee class="predef_defilement" behavior="scroll" scrollamount="4" direction="up" onmouseover="this.stop();" onmouseout="this.start();">
             
              <!-- 1ER PRÉDÉFINI -->
              <span class="predef_bloc">
                <img src="http://img15.hostingpics.net/pics/137010Steam3.png" />
                <span class="predef_in">
                  <span class="predef_title"><a href="#">Lien du prédéf</a></span>
                  Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia.
                </span>
              </span>
             
              <!-- 2E PRÉDÉFINI -->
              <span class="predef_bloc">
                <img src="http://img15.hostingpics.net/pics/137010Steam3.png" />
                <span class="predef_in">
                  <span class="predef_title"><a href="#">Lien du prédéf</a></span>
                  Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia.
                </span>
              </span>
             
              <!-- 3E PRÉDÉFINI -->
              <span class="predef_bloc">
                <img src="http://img15.hostingpics.net/pics/137010Steam3.png" />
                <span class="predef_in">
                  <span class="predef_title"><a href="#">Lien du prédéf</a></span>
                  Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia.
                </span>
              </span>
             
              <!-- 4E PRÉDÉFINI -->
              <span class="predef_bloc">
                <img src="http://img15.hostingpics.net/pics/137010Steam3.png" />
                <span class="predef_in">
                  <span class="predef_title"><a href="#">Lien du prédéf</a></span>
                  Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia.
                </span>
              </span>
             
              </marquee></div>

    Et on remplace cette partie :
    Code:
    /*Défilement des prédéfinis*/
          .predef_defilement {
          float: left;
          margin-left: 10px;
          position: relative;
          z-index: 1;
          display: block;
          box-sizing: border-box;
          height: 545px;
          padding: 10px;
          width: 170px;
          margin-bottom: 10px;
          border: 1px solid #222222;
          background-color: #141414;
          border-radius: 20px;
          }

    Par cela :
    Code:
    /*Section des prédéfinis*/
          .predef_defilement_bloc {
          float: left;
          margin-left: 10px;
          position: relative;
          z-index: 1;
          display: block;
          box-sizing: border-box;
          height: 545px;
          padding: 10px;
          width: 170px;
          margin-bottom: 10px;
          border: 1px solid #222222;
          background-color: #141414;
          border-radius: 20px;
          }
          /*Défilement des prédéfinis*/
          .predef_defilement {
          width: 150px;
          height: 525px;
          position: relative;
          z-index: 1;
          }



    • Revenir en haut
    Adélaïde.D.L
    Adélaïde.D.L
    FémininAge : 36Messages : 39

    Sam 30 Sep 2017 - 0:37

    :hug: Pas de soucis merci beaucoup prend ton temps
    Je viens de voir pour le premier les deux cadres son bien alignés (mais il m'en manque toujours deux... )
    => sur Firefox j ai bien mes 4 cadres Embarassed



    Problème avec section défilante (PA) - Page 2 Pxox
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Sam 30 Sep 2017 - 0:48

    Mmhh...
    Tu me donnes le code de ta page HTML?



    • Revenir en haut
    Adélaïde.D.L
    Adélaïde.D.L
    FémininAge : 36Messages : 39

    Sam 30 Sep 2017 - 1:15

    La partie du code
    Code:
    <!--      DÉFILEMENT BAS GAUCHE      -->           
          <div class="class_defilement">
              <marquee behavior="scroll" direction="left" scrollamount="3" onmouseover="this.stop();" onmouseout="this.start();">
                              <span class="class_defil_cartouche"><u><b>Noble</b></u> <br /> Comtes au simple Seigneur <br />Chevalier <br /> Détenteur de Terres, de richesse et du pouvoir</span>
    <span class="class_defil_cartouche"><u><b> Peuple libre </b></u> <br />            Alérian ou de province éloignée  <br /> Ils font tourner le Royaume          </span> 
    <span class="class_defil_cartouche"> <u><b> Non libre  </b></u> <br />          Serfs ou Esclaves <br /> Natif ou Judiciaire <br />Petites mains anonymes</span>
     <span class="class_defil_cartouche"><u><b>Barbare </b></u> <br /> Natif des montagne Est <br /> Marginaux; destructeur </span>
             </marquee>
            </div>

    et la page : http://agesombre.forum-pro.fr/h2-page-d-acceuil



    Problème avec section défilante (PA) - Page 2 Pxox
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Lun 2 Oct 2017 - 15:09

    Bouh!

    Désolée, je faisais autre chose ce week-end. Je n'ai pas safari sur cet ordi, alors je vais voir cela ce soir Wink



    • Revenir en haut
    Adélaïde.D.L
    Adélaïde.D.L
    FémininAge : 36Messages : 39

    Lun 2 Oct 2017 - 15:15

    Ah mais pas de soucis prends ton temps Wink



    Problème avec section défilante (PA) - Page 2 Pxox
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Lun 2 Oct 2017 - 23:50

    Salut!

    Tu as essayé de mettre à jour ton Safari et/ou de vider ton cache?
    Parce que je n'arrive pas à reproduire le problème chez moi é_è



    • Revenir en haut
    Adélaïde.D.L
    Adélaïde.D.L
    FémininAge : 36Messages : 39

    Mar 3 Oct 2017 - 8:07

    Hello,
    Je viens de tester ça ne résoudra pas le Schmilblick.
    J’ai toujours que ma diapo peuple et Noble et au moment où la troisième apparaît ça reset a la première
    Merci d’avoir regardé



    Problème avec section défilante (PA) - Page 2 Pxox
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 3 Oct 2017 - 15:19

    Zut ><

    Je déplace dans les problèmes de code si cela ne te dérange pas, comme ça quelqu'un d'autre aura peut-être une idée de comment régler le problème Wink

    Code qui ne fonctionne pas, voir plus haut pour le problème :
    Code:
    <!DOCTYPE html>
    <html>
      <head><meta charset="UTF-8" />    <base target="_blank" />    <meta name="author" content="Onyx" />    <title>Page d'accueil</title>    <link href="https://fonts.googleapis.com/css?family=Jim+Nightshade|Alegreya" rel="stylesheet" />    <style>
          /*Fond*/
          body {
          margin: 0px;
          background: #0a0a0a;
          padding-top: 30px;
          }
         
         
          /*Liens*/
          a {
          color: #c4c4c4;
          text-decoration: none;
          }
          /*Liens survolés*/
          a:hover {
          color: #ffffff;
          text-decoration: underline;
          }
         
         
          /*Titre en haut de la PA*/
          .main_title {
          margin: auto;
          width: 770px;
          text-align: center;
          font-family: 'Jim Nightshade', cursive;
          color: #AA0000;
          font-size: 28px;
          padding-bottom: 10px;
          }
         
         
          /*Bloc principal*/
          .main_bloc {
          position: relative;
          margin: auto;
          width: 770px;
          height: 600px;
          font-family: 'Jim Nightshade', cursive;
          font-family: 'Alegreya', serif;
          text-align: justify;
          font-size: 14px;
          color: #b0aeae;
          text-align: center;
          box-sizing: border-box;
          }
         
         
          /*Section de gauche*/
          .bloc_left {
          float: left;
          width: 410px;
          height: 600px;
          }
         
          /*Bloc 1 avec le contexte*/
          .bloc_1 {
          float: left;
          width: 410px;
          height: 490px;
          }
          /*Contexte*/
          .contexte {
          padding-right: 5px;
          overflow: auto;
          width: 400px;
          height: 480px;
          border: 1px solid #222222;
          box-sizing: border-box;
          padding: 10px 10px 10px 10px;
          font-style: italic;
          text-align: justify;
          font-size: 14px;
          border-radius: 20px;
          background-color: #141414;
          }
          /*Onglets*/
          .onglet {
          color: #AA0000;
          }
          /*Onglets actifs*/
          .onglet_1 {
          color: #C40000;
          text-decoration: underline;
          font-weight: bold;
          }
         
          /*Défilement des classes sous le contexte*/
          .class_defilement {
          float: left;
          box-sizing: border-box;
          height: 110px;
          padding: 10px;
          width: 215px;
          border: 1px solid #222222;
          background-color: #141414;
          border-radius: 20px;
          font-style: normal;
          position: relative;
          z-index: 1;
          }
          .class_defilement marquee {
          height: 90px;
          width: 195px;
          }
    /*Cartouches qui défilent de droite à gauche*/
          .class_defil_cartouche {
          vertical-align: top;
          display: inline-block;
          height: 80px;
          width: 165px;
          margin-left: 10px;
          padding: 5px;
          border-radius: 5px;
          background: #0a0a0a;
          overflow: auto;
          }
         
          /*Bloc des liens à côté du défilement des classes*/
          .liens {
          float: left;
          box-sizing: border-box;
          height: 110px;
          padding: 5px;
          width: 175px;
          margin-left: 10px;
          border: 1px solid #222222;
          background-color: #141414;
          border-radius: 20px;
          font-style: normal;
          text-align: center;
          overflow: auto;
          }
          /*Liens*/
          .liens a {
          font-family: 'Georgia', cursive;
          margin: 2px 0px;
          font-size: 14px;
          text-align: center;
          display: inline-block;
          }
          /*Image de la map*/
          .liens .map_img {
          display: block;
          -webkit-transform: scale(0);
          transform: scale(0);
          -webkit-transition: 1s;
          transition: 1s;
          position: absolute;
          width: 770px;
          height: 600px;
          top: 0px;
          left: 0px;
          z-index: 5;
          }
          /*Apparition de la map*/
          .map_bloc:hover ~ .map_img,
          .map_img:hover {
          -webkit-transform: scale(1);
          transform: scale(1);
          }
         
         
          /*** Section de droite ***/
          .bloc_right {
          float: left;
          box-sizing: border-box;
          width: 360px;
          height: 600px;
          }
         
          /*Bloc 2 avec les personnages*/
          .bloc_2 {
          float: left;
          border-radius: 20px;
          box-sizing: border-box;
          width: 180px;
          height: 600px;
          border: 1px solid #222222;
          background-color: #141414;
          }
          /*Image sans personnage*/
          .img_noperso {
          width: 178px;
          height: 598px;
          border-radius: 20px;
          }
          /*Contenu des onglets*/
          .contenu_onglet {
          display: none;
          width: 180px;
          height: 600px;
          text-align: center;
          }
          /*Padding intérieur des contenus des onglets*/
          .contenu_inside {
          padding: 10px;
          }
          /*Titre des personnages*/
          .contenu_title {
          font-family: 'Jim Nightshade', cursive;
          color: #AA0000;
          font-size: 20px;
          text-align: center;
          line-height: 20px;
          display: inline-block;
          padding-bottom: 5px;
          }
         
          /*Défilement des prédéfinis*/
            .predef_defilement_bloc {
          float: left;
          margin-left: 10px;
          position: relative;
          z-index: 1;
          display: block;
          box-sizing: border-box;
          height: 545px;
          padding: 10px;
          width: 170px;
          margin-bottom: 10px;
          border: 1px solid #222222;
          background-color: #141414;
          border-radius: 20px;
          }
          /*Défilement des prédéfinis*/
          .predef_defilement {
          width: 150px;
          height: 500px;
          position: relative;
          z-index: 1;
          }
          .predef_bloc {
          display: block;
          width: 130px;
          margin-bottom: 20px;
          background: #0a0a0a;
          border-radius: 5px;
          padding: 10px;
          }
          .predef_bloc > img:nth-child(1) {
          height: 130px;
          width: 130px;
          }
          .predef_in {
          display: block;
          text-align: justify;
          font-size: 13px;
          }
          .predef_title {
          display: block;
          text-align: center;
          font-size: 15px;
    font-family: 'Jim Nightshade', cursive;
          }
         
          /*Bloc des crédits*/
          .bloc_credit {
          margin-left: 10px;
          box-sizing: border-box;
          float: left;
          height: 45px;
          padding: 10px;
          width: 170px;
          border: 1px solid #222222;
          background-color: #141414;
          border-radius: 20px;
          }
        </style></head>
      <body>        <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="main_bloc">
                            
       <!--      PARTIE DE GAUCHE      -->         
       <div class="bloc_left">
                                   
          <!--      CONTEXTE      -->           
          <div class="bloc_1">
                                
             <div class="contexte">
                                Nous sommes en 378,<br /><br />            <span class="onglet_0 onglet" id="onglet_Reine" onmouseover="javascript:change_onglet('Reine');">La Reine Odélia</span>, au pouvoir depuis un peu plus d'un an cherche à se renforcer. Elle craint en effet une rébellion venu du Nord.<br /><br />            La <span class="onglet_0 onglet" id="onglet_Comtesse" onmouseover="javascript:change_onglet('Comtesse');">Comtesse de Rindayia</span>, fiancée au <span class="onglet_0 onglet" id="onglet_Dux" onmouseover="javascript:change_onglet('Dux');">Dux Hammersmark</span> se retrouve confronté à son Oncle, <span class="onglet_0 onglet" id="onglet_Comtes" onmouseover="javascript:change_onglet('Comtes');">Balderick de Linster</span>. Ce dernier s’étant autoproclamé Comte de Rindayia. Des tensions naissent au Sud-Est du Royaume.<br /><br />            Pendant ce temps les derniers descendants des Elfes, mieux connu sous le nom du <span class="onglet_0 onglet" id="onglet_Klan" onmouseover="javascript:change_onglet('Klan');">Klan de Darach</span>, ayant trouvés refuge dans la forêt d'Eliandre, essaient de leur coté de favoriser le retour de la demoiselle de Linster à la tête du Comté de Rindayia. Ils utilisent pour cela leur réseau d'espionnes éparpillé dans tout le Royaume.<br /><br />            Les Terres du Sud, gouvernée par <span class="onglet_0 onglet" id="onglet_Duces" onmouseover="javascript:change_onglet('Duces');">La Düşes Da Orta</span> semblent en revanche pour le moment bien loin d'être concernées par les querelles de pouvoir qui sévissent au Sud-Est. Mais qui sait des alliances familiales ou des ententes des plus inattendues pourraient-elles voir le jour ?        <br />
                              <br /><center>
                   <a href="http://agesombre.forum-pro.fr/t206-contexte#1805"><span style="font-family: 'Jim Nightshade', cursive; color: #990000; text-decoration: underline; font-size: 20px; ">Envie d'en savoir plus ? </span> </a>
                </center>
                   
             </div>
                              
          </div>
                                   
          <!--      DÉFILEMENT BAS GAUCHE      -->           
          <div class="class_defilement">
              <marquee behavior="scroll" direction="left" scrollamount="3" onmouseover="this.stop();" onmouseout="this.start();">
                              <span class="class_defil_cartouche"><u><b>Noble</b></u> <br /> Comtes au simple Seigneur <br />Chevalier <br /> Détenteur de Terres, de richesse et du pouvoir</span><span class="class_defil_cartouche"><u><b> Peuple libre </b></u> <br />            Alérian ou de province éloignée  <br /> Ils font tourner le Royaume          </span>  <span class="class_defil_cartouche"> <u><b> Non libre  </b></u> <br />          Serfs ou Esclaves <br /> Natif ou Judiciaire <br />Petites mains anonymes</span>  <span class="class_defil_cartouche"><u><b>Barbare </b></u> <br /> Natif des montagne Est <br /> Marginaux; destructeur </span>
             </marquee>
            </div>
                              
          
                                   
          <!--      LES LIENS ET LA MAP      -->           
          <div class="liens">
                           <a class="map_bloc">Carte</a><br />          <img class="map_img" src="http://img15.hostingpics.net/pics/310887Mapnoville.jpg" />          <a href="http://agesombre.forum-pro.fr/t211-reglement">Règlement</a><br />          <a href="http://agesombre.forum-pro.fr/t212-grandes-familles-d-alerias">Qui nous dirige?</a><br />          <a style="color: #aa0000; font-weight: bold; text-decoration: none; font-family: 'Georgia', cursive; font-size: 14px; padding-top: 3px;">Interdit aux mineurs</a>           
          </div>
                           
          <div style="clear: both;">
                    
          </div>
                                 
       </div>
                            
       <!--      PARTIE DE DROITE      -->         
       <div class="bloc_right">
                                   
          <!--      PARTIE AVEC LES PERSONNAGES QUI CHANGENT      -->           
          <div class="bloc_2">
                           <span class="onglet_1 onglet" id="onglet_Full" onmouseover="javascript:change_onglet('Full');" style="display: none;"></span>                         
             <!--      IMAGE DE BASE SI PAS DE PERSONNAGE      -->             
             <div class="contenu_onglet" id="contenu_onglet_Full">
                                <img class="img_noperso" src="http://img4.hostingpics.net/pics/329815c6bcec2810c288988e902d67faefd618.gif" />             
             </div>
                                          
             <!--      1ER PERSONNAGE      -->             
             <div class="contenu_onglet" id="contenu_onglet_Reine">
                                     
                <div class="contenu_inside">
                                     <span class="contenu_title">Odélia D'Aléria (370 - ...)</span><br />              <img src="http://zupimages.net/up/17/16/4pzt.png" /><br />              <em>Reine d'Aléria</em><br /><br />                 
                   <div style="text-align: left;">
                                          <strong>Situation :</strong> Célibataire<br />                <strong>Demeure :</strong> Château Royal de Talion<br />                <strong>Allégeance :</strong> Peuple d'Alérias<br />                <strong>Recherche :</strong> Maire du Palais ; Responsable des armées; Fiancé...                 
                   </div>
                                     <br />              <a href="http://agesombre.forum-pro.fr/t267-odelia-d-aleria-une-jeune-reine-contestee"><strong>Pour en savoir plus</strong></a>               
                </div>
                                   
             </div>
                                          
             <!--      2E PERSONNAGE      -->             
             <div class="contenu_onglet" id="contenu_onglet_Comtesse">
                                     
                <div class="contenu_inside">
                                     <span class="contenu_title">Adélaïde de Linster<br />(370 - ...)</span><br />              <img src="http://zupimages.net/up/17/16/ln62.png" /><br />              <em>Comtesse de Rindayia</em><br /><br />                 
                   <div style="text-align: left;">
                                          <strong>Situation :</strong> Fiancée au Dux von Hammersmark<br />                <strong>Demeure :</strong> Captive à la forteresse d'Aonad<br />                <strong>Allégeance :</strong> Peuple de Rindayia & d'Azevedo<br />                <strong>Recherche :</strong> Capitaine d'Armée ; Soeur de Coeur (Aishleen)...                 
                   </div>
                                     <br />              <a href="http://agesombre.forum-pro.fr/t11-adelaide-de-linster"><strong>Pour en savoir plus</strong></a><br />              <em><span style="font-size: 10px; line-height: normal;">Incarnée par un Admin</span></em>               
                </div>
                                   
             </div>
                                          
             <!--      3E PERSONNAGE      -->             
             <div class="contenu_onglet" id="contenu_onglet_Dux">
                                     
                <div class="contenu_inside">
                                     <span class="contenu_title">Maximilian von Hammersmark<br />(365 - ...)</span><br />              <img src="http://zupimages.net/up/17/16/nnex.png" /><br />              <em>Dux von Hammersmark</em><br /><br />                 
                   <div style="text-align: left;">
                                          <strong>Situation :</strong> Fiancé à Adélaïde de Linster<br />                <strong>Demeure :</strong> Château Ducal d'Hammerstadt<br />                <strong>Allégeance :</strong> À la couronne<br />                <strong>Recherche :</strong> ?                 
                   </div>
                                     <br />              <a href="http://agesombre.forum-pro.fr/t10-maximilian-von-hammersmark-seigneur-d-hammersmark"><strong>Pour en savoir plus</strong></a><br />              <em><span style="font-size: 10px; line-height: normal;">Incarné par un Admin</span></em>               
                </div>
                                   
             </div>
                                          
             <!--      4E PERSONNAGE      -->             
             <div class="contenu_onglet" id="contenu_onglet_Comtes">
                                     
                <div class="contenu_inside">
                                     <span class="contenu_title">Balderick De Linster<br />(348 - ...)</span><br />              <img src="http://zupimages.net/up/17/16/0j69.png" /><br />              <em>Comte contesté de Rindayia</em><br /><br />                 
                   <div style="text-align: left;">
                                          <strong>Situation :</strong> Marié à Isabela d'Azevedo; deux esclaves favorites<br />                <strong>Demeure :</strong> Château Comtale de Fawiya<br />                <strong>Allégeance :</strong> Lui-même<br />                <strong>Recherche :</strong> Favorite (Esclave)                 
                   </div>
                                     <br />              <a href="http://agesombre.forum-pro.fr/t233-famille-de-linster#1942"><strong>Pour en savoir plus</strong></a>               
                </div>
                                   
             </div>
                                          
             <!--      KLAN      -->             
             <div class="contenu_onglet" id="contenu_onglet_Klan">
                                     
                <div class="contenu_inside">
                                     <span class="contenu_title">Klan de Darach</span><br />              <img src="http://www.zupimages.net/up/16/29/9tue.png" /><br />              À venir                 
                </div>
                                   
             </div>
                                          
             <!--      6E PERSONNAGE      -->             
             <div class="contenu_onglet" id="contenu_onglet_Duces">
                                     
                <div class="contenu_inside">
                                     <span class="contenu_title">Farah Da Orta (340 - ...)</span><br />              <img src="http://zupimages.net/up/17/16/hz1z.png" /><br />              <em>Düşes Da Orta et Chef du Harem Da Orta</em><br /><br />                 
                   <div style="text-align: left;">
                                          <strong>Situation :</strong> Marié<br />                <strong>Demeure :</strong> Château de Hamaqa<br />                <strong>Allégeance :</strong> À la Couronne<br />                <strong>Recherche :</strong> ?                 
                   </div>
                                     <br />              <a href="http://agesombre.forum-pro.fr/t253-famille-et-entourage-da-orta"><strong>Pour en savoir plus</strong></a><br />              <span style="font-size: 10px; line-height: normal;">PNJ Fahmiya</span>               
                </div>
                                   
             </div>
                                        
          </div>
                                   
          <!-- SECTION DES PRÉDÉFINIS -->
            <div class="predef_defilement_bloc"><span style="font-family: 'Jim Nightshade', cursive; color: white; text-decoration: underline; font-size: 20px; ">Ils sont attendus </span>
            <marquee class="predef_defilement" behavior="scroll" scrollamount="4" direction="up" onmouseover="this.stop();" onmouseout="this.start();">
             
              <!-- 1ER PRÉDÉFINI -->
              <span class="predef_bloc">
                <img src="http://zupimages.net/up/17/39/2uz2.jpg" />            <span class="predef_in">              <span class="predef_title"><a href="http://agesombre.forum-pro.fr/t229-membres-du-klan-de-darach#1931">Othon Siddayq</a></span>  Général de l'Armée du Lys - Protécteur d'Adélaïde de Linster <br /> -40 ans- Célibataire - <br /> Homme d'arme fidèle à la famille de Linster. <br /> Natif du Klan de Darach</span>          </span>                                                   
             <!--      1ER PRÉDÉFINI      -->          <span class="predef_bloc">            <img src="https://i11.servimg.com/u/f11/15/46/73/71/aislee10.jpg" />            <span class="predef_in">              <span class="predef_title"><a href="http://agesombre.forum-pro.fr/t232-comte-de-rindaya#1939">Aisleen Aogan </a></span>              Archère du Lys<br />-18 ans - Célibataire -<br /> Soeur de lait d'Adélaïde; Protégée de Othon.          </span>          </span>                         
                      <!--      2E PRÉDÉFINI      -->          <span class="predef_bloc">            <img src="https://i11.servimg.com/u/f11/15/46/73/71/wivine10.jpg" />            <span class="predef_in">              <span class="predef_title"><a href="http://agesombre.forum-pro.fr/t229-membres-du-klan-de-darach#1932">Wivine Vona</a></span>              Femme Medecin.<br />-37 ans - Mariée -<br /> Native du Klan de Darach            </span>          </span>                         
                      <!--      3E PRÉDÉFINI      -->          <span class="predef_bloc">            <img src="https://i11.servimg.com/u/f11/15/46/73/71/annavu10.jpg" />            <span class="predef_in">              <span class="predef_title"><a href="http://agesombre.forum-pro.fr/t225-vassaux-des-hammersmark-disponibles#1990">Anna von Undomiel </a> et son époux </span>            Famille Comtale - Vassale de Maximilian von Hammersmark <br /> Alliés à Blderich de Linster</span>          </span>                         
              </marquee>
              </div>
                                   
          <!--      CRÉDITS      -->           
          <div class="bloc_credit">
                           <a href="http://www.never-utopia.com">Code par N-U</a>           
          </div>
                                   
          <div class="clear: both;">
                    
          </div>
                         
       </div>
                      
       <div style="clear: both;">
                 
       </div>
                    
    </div><script type="text/javascript">
            //<!--
                    var anc_onglet = 'Full';
                    change_onglet(anc_onglet);
            //-->
    </script></body></html>



    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mar 3 Oct 2017 - 23:50

    Hello Very Happy

    J'ai fait un test de mon côté, je sais absolument pas pourquoi mais ça règle le bug sur mon Safari en remplaçant :
    Code:
    .class_defilement marquee {
    height: 90px;
    width: 175px;
    }

    En mettant 100% à la width (ou en la supprimant, mais de mémoire j'crois que ça cause des bugs random sur chrome donc il vaut mieux en mettre :hum:)
    Code:
    .class_defilement marquee {
    height: 90px;
    width: 100%;
    }

    • Revenir en haut
    Adélaïde.D.L
    Adélaïde.D.L
    FémininAge : 36Messages : 39

    Mer 4 Oct 2017 - 4:27

    Merci Onyx pour ton aide
    Et Merci Nihil pour la solution que tu apportes
    Tout est rentré dans l’ordre :)



    Problème avec section défilante (PA) - Page 2 Pxox
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Jeu 21 Nov 2024 - 17:41