Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Apparition indésirée de barres de défilement

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Apparition indésirée de barres de défilement

Message par Larme de Fée le Dim 18 Oct 2020 - 15:38

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :
Voir l'image:
Apparition indésirée de barres de défilement 49mz

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : une semaine environ, suite à l'ajout de nouveaux prédéfinis dans la page HTML
Lien du forum : https://valsedupouvoir.forumactif.com/

Description du problème

Bonjour,

Le problème concerne l'apparition impromptue de barres de défilement dans un cadre (voir capture d'écran) avec slideshow. Elles ne s'y trouvaient pas avant l'ajout récent de nouvelles images, et je ne parviens absolument pas à les faire disparaître.

Le code utilisé est le suivant (page HTML) :

code:
Code:
<title>Prédéfinis</title>    <meta charset="utf-8" />    <meta content="width=device-width, initial-scale=1.0" name="viewport" />   
<!--              #region Jssor Slider Begin              -->   
<!--              Generator: Jssor Slider Maker              -->   
<!--              Source: http://www.jssor.com              -->   
<!--              This code works without jquery library.              -->    <script type="text/javascript" src="https://www.aht.li/3026912/jssorslider-2228min.js"></script>    <script type="text/javascript">
        jssor_1_slider_init = function () {

            var jssor_1_SlideshowTransitions = [
                { $Duration: 1200, $Opacity: 2 }
            ];

            var jssor_1_options = {
                $AutoPlay: true,
                $SlideshowOptions: {
                    $Class: $JssorSlideshowRunner$,
                    $Transitions: jssor_1_SlideshowTransitions,
                    $TransitionsOrder: 1
                },
                $ArrowNavigatorOptions: {
                    $Class: $JssorArrowNavigator$
                },
                $BulletNavigatorOptions: {
                    $Class: $JssorBulletNavigator$
                }
            };

            var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

            /*responsive code begin*/
            /*you can remove responsive code if you don't want the slider scales while window resizing*/
            function ScaleSlider() {
                var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
                if (refSize) {
                    refSize = Math.min(refSize, 150);
                    jssor_1_slider.$ScaleWidth(refSize);
                }
                else {
                    window.setTimeout(ScaleSlider, 30);
                }
            }
            ScaleSlider();
            $Jssor$.$AddEvent(window, "load", ScaleSlider);
            $Jssor$.$AddEvent(window, "resize", ScaleSlider);
            $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
            /*responsive code end*/
        };
    </script>    <style>
        /* jssor slider bullet navigator skin 05 css */
        /*
        .jssorb05 div          (normal)
        .jssorb05 div:hover    (normal mouseover)
        .jssorb05 .av          (active)
        .jssorb05 .av:hover    (active mouseover)
        .jssorb05 .dn          (mousedown)
        */
        .jssorb05 {
            position: absolute;
        }

        .jssorb05 div,
        .jssorb05 div:hover,
        .jssorb05 .av {
            position: absolute;
            /* size of bullet elment */
            width: 16px;
            height: 16px;
            background: url('https://2img.net/r/hpimg11/pics/338107b05.png') no-repeat;
            overflow: hidden;
            cursor: pointer;
        }

        .jssorb05 div {
            background-position: -7px -7px;
        }

        .jssorb05 div:hover,
        .jssorb05 .av:hover {
            background-position: -37px -7px;
        }

        .jssorb05 .av {
            background-position: -67px -7px;
        }

        .jssorb05 .dn,
        .jssorb05 .dn:hover {
            background-position: -97px -7px;
        }

        /* jssor slider arrow navigator skin 12 css */
        /*
        .jssora12l                  (normal)
        .jssora12r                  (normal)
        .jssora12l:hover            (normal mouseover)
        .jssora12r:hover            (normal mouseover)
        .jssora12l.jssora12ldn      (mousedown)
        .jssora12r.jssora12rdn      (mousedown)
        */
        .jssora12l,
        .jssora12r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 30px;
            height: 46px;
            cursor: pointer;
            background: url('https://2img.net/r/hpimg11/pics/830873a12.png') no-repeat;
            overflow: hidden;
        }

        .jssora12l {
            background-position: -16px -37px;
        }

        .jssora12r {
            background-position: -75px -37px;
        }

        .jssora12l:hover {
            background-position: -136px -37px;
        }

        .jssora12r:hover {
            background-position: -195px -37px;
        }

        .jssora12l.jssora12ldn {
            background-position: -256px -37px;
        }

        .jssora12r.jssora12rdn {
            background-position: -315px -37px;
        }

        .texte {
            position: absolute;
            font-variant: small-caps;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            top: 60%;
            z-index: 4;
            font-family: andalus;
            text-align: center;
            width: 145px;
            padding: 10px 5px 5px 5px;
            line-height: 15px;
            text-shadow: 1px 1px 1px #000;

        }

        .texte span {
            font-size: 12px;
            display: block;
            font-variant: normal;
            font-weight: normal;
            margin-top: 8px;
            font-style: italic;
            text-shadow: none;
            color: #fff;
            line-height: 14px;
        }

        a {
            font-variant: small-caps;
            font-family: cinzel;
            font-size: 24px;
            font-weight: bold;
            color: #F9C435;
            text-decoration: none;
        }


    </style>   
<div style="position:relative;margin:0 auto;top:0px;left:0px;width:150px;height:300px;overflow:hidden;visibility:hidden;" id="jssor_1">
                                  
   <!--              Loading Screen              -->                   
   <div style="position:absolute;top:0px;left:0px;background-color:rgba(0,0,0,0.7);" data-u="loading">
                                         
      <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;">
                                            
      </div>
                                         
      <div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;">
                                            
      </div>
                                     
   </div>
                                  
   <div style="cursor:default;position:relative;top:0px;left:0px;width:150px;height:300px;overflow:hidden;" data-u="slides">
         
                                                                     
      <!--              Début affichage              -->                                                             
         
            <!--              Prédéfini 1              -->
         
        <div>
                <img data-u="image" src="https://i.postimg.cc/fLppbfLq/ALOYSE.jpg"/>
              <div class="texte"><a href="https://valsedupouvoir.forumactif.com/t793-aloyse-de-corbeciel-noble-erudite" target="_blank">Aloyse de Corbeciel</a> <span>Fille du Comte de Sombrevent</span></div>
            </div>
         
            <!--              Prédéfini 2              -->
         
          <div>
                <img data-u="image" src="https://www.zupimages.net/up/19/21/g91x.jpg"/>
              <div class="texte"><a href="https://valsedupouvoir.forumactif.com/t564-predefini-duche-de-louvre-philippe-des-landes" target="_blank">Philippe des Landes</a> <span>Capitaine de l'armée royale</span></div>
            </div>
         
            <!--              Prédéfini 3              -->
         
          <div>
                <img data-u="image" src="https://i.postimg.cc/bwyCS4HW/feyre.jpg"/>
              <div class="texte"><a href="https://valsedupouvoir.forumactif.com/t795-mahaut-von-falkenried-pretresse-de-june" target="_blank">Mahaut von Falkenried </a> <span>Prêtresse de June</span></div>
            </div>
                             
            <!--              Prédéfini 4              -->
         
          <div>
                <img data-u="image" src="https://i.postimg.cc/cJdFGw2Y/INQUISIEUR.jpg"/>
              <div class="texte"><a href="https://valsedupouvoir.forumactif.com/t797-leandro-de-sanctis-pretre-de-khel-inquisiteur" target="_blank">Leandro de Sanctis</a> <span>Prêtre de Khel</span></div>
            </div>   
         
            <!--              Prédéfini 5              -->
         
          <div>
                <img data-u="image" src="https://i.postimg.cc/3x23cQQN/mestre.jpg"/>
              <div class="texte"><a href="https://valsedupouvoir.forumactif.com/t796-eloi-d-amarante-pretre-d-orion-mestre" target="_blank">Eloi d'Amarante</a> <span>Prêtre d'Orion</span></div>
            </div>   
                                     
        <!--              FIN affichage              -->   
         
         
          <a data-u="any" href="http://www.jssor.com" style="display:none">Simple Fade Slideshow</a>                   
   </div>
                                  
   <!--              Bullet Navigator              -->                   
   <div data-autocenter="1" style="bottom:2px;right:16px;" class="jssorb05" data-u="navigator">
                                         
      <!--              bullet navigator item prototype              -->                       
      <div style="width:16px;height:16px;" data-u="prototype">
                              
      </div>
                                     
   </div>
                                  
   <!--              Arrow Navigator              -->        <span data-autocenter="2" style="top:0px;left:0px;width:30px;height:46px;" class="jssora12l" data-u="arrowleft"></span>        <span data-autocenter="2" style="top:0px;right:0px;width:30px;height:46px;" class="jssora12r" data-u="arrowright"></span>   
</div>
    <script type="text/javascript">jssor_1_slider_init(); </script>   
<!--              #endregion Jssor Slider End              -->

En vous remerciant beaucoup d'avance ! Smile
Larme de Fée

Larme de Fée
Nouveau membre

Messages : 2
Inscrit(e) le : 18/10/2020

Voir le profil de l'utilisateur https://valsedupouvoir.forumactif.com/
Larme de Fée a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparition indésirée de barres de défilement

Message par kheino le Lun 19 Oct 2020 - 8:07

Bonjour,

Dans le CSS il y a plusieurs overflow: hidden; y compris dans le code HTML (ce qui est à proscrire, il vaut mieux soulager le code HTML et utiliser le style-CSS dans la balise 'sytle' ou dans la feuille de style CSS.

Soit nous pouvons donner une largeur et une hauteur fixe au conteneur des images, soit donner la largeur et la hauteur à chaque image en ajoutant:
.class img {.....} sans 'overflow' qui suggère une scrollbar.

Je n'ai pas étudié le code dans le détail, je constate juste qu'il y a plusieurs position absolue et je ne sais pas à quoi ça correspond.
Bon à savoir :
- Si le conteneur a une position absolue, les contenus l'auront aussi
- Le style mis dans le HTML prendra effet seul et rend le style CSS dans la balise et/ou dans la feuille de style inutile
kheino

kheino
Membre habitué

Féminin
Messages : 1693
Inscrit(e) le : 09/05/2010

Voir le profil de l'utilisateur http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparition indésirée de barres de défilement

Message par Larme de Fée le Lun 19 Oct 2020 - 13:26

Bonjour,

merci beaucoup pour votre réponse, le problème est résolu ! Very Happy
Larme de Fée

Larme de Fée
Nouveau membre

Messages : 2
Inscrit(e) le : 18/10/2020

Voir le profil de l'utilisateur https://valsedupouvoir.forumactif.com/
Larme de Fée a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum