Accueil
Créer un forumApparition indésirée de barres de défilement
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Apparition indésirée de barres de défilement
par Larme de Fée 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:
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 !
Larme de Fée- Nouveau membre
- Messages : 2
Inscrit(e) le : 18/10/2020 -
Re: Apparition indésirée de barres de défilement
par kheino 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
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- Membre habitué
-
Messages : 1698
Inscrit(e) le : 09/05/2010 -
Re: Apparition indésirée de barres de défilement
par Larme de Fée Lun 19 Oct 2020 - 13:26
Bonjour,
merci beaucoup pour votre réponse, le problème est résolu !
merci beaucoup pour votre réponse, le problème est résolu !
Larme de Fée- Nouveau membre
- Messages : 2
Inscrit(e) le : 18/10/2020 -
Sujets similaires» Apparition de "barres" blanches
» Couleurs des barres de défilement
» Problème de «barre» indésirée dans les messages
» Apparition du code
» Connexion impossible aux outils du fondateur
» Couleurs des barres de défilement
» Problème de «barre» indésirée dans les messages
» Apparition du code
» Connexion impossible aux outils du fondateur
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum