[RESOLU] Problème de décalage - Slider TinySlider
nicomax
Member
Salutatous,
Ma config : PluXml 5.1.7 + Thème Mystique dernière version
J'ai trouvé un slider nommé TinySlider ici : http://jeanpaul.rostaing.free.fr/index.php/trucs-webmestre/javascript/68-diaporama
Je l'ai personnalisé de façon à donner ceci : http://www.biotope-editions.com/TEST/index.htm
Une fois intégré dans PluXml, tout fonctionne (la navigation, le défilement...)
j'y suis presque si ce n'est que le contenu du slide se trouve décalé horizontalement et légèrement verticalement...
et plus on clique sur la flèche de droite plus le décalage grossi !
Vous pouvez vous en rendre compte ici : http://www.biotope-editions.com/index.php?static3/nouveautes-biotope-editions
Je précise que je l'ai intégré selon la méthode que m'a indiqué Frédéric sur ce post (principe de la duplication / personnalisation d'une la page statique) :
http://forum.pluxml.org/viewtopic.php?id=3960
Quelqu'un a-t-il une idée pour supprimer ce décalage ?
Voici la feuille de style "style.css" que j'utilise :
Voici le contenu de ma page statique dupliquée et que j'utilise comme template :
Et enfin voici le code que j'ai mis dans ma page statique par le biais de l'admin de PluXml :
Merci d'avance de vos lumières
Ma config : PluXml 5.1.7 + Thème Mystique dernière version
J'ai trouvé un slider nommé TinySlider ici : http://jeanpaul.rostaing.free.fr/index.php/trucs-webmestre/javascript/68-diaporama
Je l'ai personnalisé de façon à donner ceci : http://www.biotope-editions.com/TEST/index.htm
Une fois intégré dans PluXml, tout fonctionne (la navigation, le défilement...)
j'y suis presque si ce n'est que le contenu du slide se trouve décalé horizontalement et légèrement verticalement...
et plus on clique sur la flèche de droite plus le décalage grossi !
Vous pouvez vous en rendre compte ici : http://www.biotope-editions.com/index.php?static3/nouveautes-biotope-editions
Je précise que je l'ai intégré selon la méthode que m'a indiqué Frédéric sur ce post (principe de la duplication / personnalisation d'une la page statique) :
http://forum.pluxml.org/viewtopic.php?id=3960
Quelqu'un a-t-il une idée pour supprimer ce décalage ?
Voici la feuille de style "style.css" que j'utilise :
[== CSS ==]
#wrapper {width:610px; margin:0px auto;}
/* BOUTONS DE NAVIGATION */
.sliderbutton {float:left; width:22px; padding-top:134px;}
.sliderbutton img {cursor:pointer;}
.sliderbutton img:hover {background:#c95823;}
#slider {float:left; position:relative; overflow:auto; width:556px; height:300px; border:1px solid #ccc; background:#fff;}
#slider ul {position:absolute; list-style:none; top:0; left:0;}
#slider li {float:left; width:556px; height:300px; padding-right:10px;}
/* SYSTEME DE PAGINATION */
.pagination {float:left; list-style:none; height:22px; margin:5px 0 0 22px;}
.pagination li {float:left; cursor:pointer; padding:5px 8px; background:#fff; border:1px solid #ccc; margin:2px 4px 0 0; text-align:center; font-size:12px; color:#000;}
.pagination li:hover {background:#ccc; border:1px solid #ccc; font-size:12px; color:#000;}
li.current {border:1px solid #c95823; background:#c95823; font-size:12px; color:#fff;}
li#content {width:464px; height:270px; padding:15px 28px 15px 18px;}
#content h1 {font:22px Georgia,Verdana; margin-bottom:15px; color:#036;}
/* titre paragraphe*/
.slider_titre_paragraphe {
line-height:1.4;
margin-bottom:10px;
color:#c95823;
border-bottom:1px solid #c95823;
font-family:Arial,Helvetica,sans-serif;
font-size:15px;
font-weight:bold;
}
/* paragraphe */
.slider_paragraphe {
line-height:1.4;
margin-bottom:10px;
color:#ccc;
margin-top:10px;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
}
/* lien */
.en_savoir_plus {
color:#c95823;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
float:right;
}
a.en_savoir_plus:hover {
color: white;
float:right;
}
#texte_image_droite {width: 556px; height: 100%; background:#000; padding-left: 10px; text-align: left;}
Voici le contenu de ma page statique dupliquée et que j'utilise comme template :
[== Indéfini ==]
<?php include(dirname(__FILE__).'/header.php'); # On insere le header ?>
<!-- AJOUT NICO - Slider -->
<script src="<?php $plxShow->template(); ?>/slider_perso/js/script.js"></script>
<link rel="stylesheet" type="text/css" href="<?php $plxShow->template(); ?>/slider_perso/css/style.css">
<!-- ++++++++++++++++++++++++ -->
<!-- primary content -->
<div id="primary-content">
<div class="blocks">
<!-- page statique -->
<div class="post clearfix">
<h2 class="title"><?php $plxShow->staticTitle(); ?></h2>
<div class="post-content clearfix">
<?php $plxShow->staticContent(); ?>
<!-- AJOUT NICO - Slider -->
<script type="text/javascript">
var slideshow=new TINY.slider.slide('slideshow',{
id:'slider',
auto:4,
resume:true,
vertical:false,
navid:'pagination',
activeclass:'current',
position:0
});
</script>
<!-- ++++++++++++++++++++++++ -->
</div>
</div>
<!-- /page statique -->
</div>
</div>
<!-- /primary content -->
<?php include(dirname(__FILE__).'/footer.php'); # On insere le footer ?>
Et enfin voici le code que j'ai mis dans ma page statique par le biais de l'admin de PluXml :
[== HTML ==]
<div id="wrapper">
<div>
<div class="sliderbutton">
<img alt="Previous" height="38" onclick="slideshow.move(-1)" src="themes/theme-mystique/slider_perso/left.png" width="22" /></div>
<div id="slider" style="overflow: hidden;">
<ul>
<li>
<div id="texte_image_droite">
<img alt="À la rencontre des Orchidées sauvages de Rhône-Alpes" height="300" src="themes/theme-mystique/slider_perso/images_nouveautes/orchidees_rhone_alpes.jpg" style="padding: 0px 10px 0px 20px; float: right;" width="208" />
<p class="slider_titre_paragraphe">
À la rencontre des Orchidées sauvages de Rhône-Alpes</p>
<p class="slider_paragraphe">
Partez pour un voyage photographique à travers certaines des plus belles dunes littorales de France, et découvrez toute la richesse naturelle que ces milieux fragiles abritent.</p>
<a class="en_savoir_plus" href="http://www.leclub-biotope.com/379-souscription-a-la-rencontre-des-orchid%C3%A9es-sauvages-de-rh%C3%B4ne-alpes-9782914817578.html" target="_blank">Fiche produit</a></div>
</li>
<li>
<div id="texte_image_droite">
<img alt="Atlas des Amphibiens et Reptiles de France" height="300" src="themes/theme-mystique/slider_perso/images_nouveautes/amphibiens_reptiles_france.jpg" style="padding: 0px 10px 0px 20px; float: right;" width="212" />
<p class="slider_titre_paragraphe">
Atlas des Amphibiens et Reptiles de France</p>
<p class="slider_paragraphe">
Partez pour un voyage photographique à travers certaines des plus belles dunes littorales de France, et découvrez toute la richesse naturelle que ces milieux fragiles abritent.</p>
<a class="en_savoir_plus" href="http://www.leclub-biotope.com/368-atlas-des-amphibiens-et-reptiles-de-france-9782366620184.html" target="_blank">Fiche produit</a></div>
</li>
<li>
<div id="texte_image_droite">
<img alt="Ossau - Confluence entre Homme et Nature" height="300" src="themes/theme-mystique/slider_perso/images_nouveautes/ossau.jpg" style="padding: 0px 10px 0px 20px; float: right;" width="300" />
<p class="slider_titre_paragraphe">
Ossau - Confluence entre Homme et Nature</p>
<p class="slider_paragraphe">
Partez pour un voyage photographique à travers certaines des plus belles dunes littorales de France, et découvrez toute la richesse naturelle que ces milieux fragiles abritent.</p>
<a class="en_savoir_plus" href="http://www.leclub-biotope.com/377-ossau-confluence-entre-homme-et-nature-9782366620290.html" target="_blank">Fiche produit</a></div>
</li>
<li>
<div id="texte_image_droite">
<img alt="Promenade géologique à Paris 11ème" height="300" src="themes/theme-mystique/slider_perso/images_nouveautes/promenade_geologique_a_paris_11eme.jpg" style="padding: 0px 10px 0px 20px; float: right;" width="143" />
<p class="slider_titre_paragraphe">
Promenade géologique à Paris 11ème</p>
<p class="slider_paragraphe">
Partez pour un voyage photographique à travers certaines des plus belles dunes littorales de France, et découvrez toute la richesse naturelle que ces milieux fragiles abritent.</p>
<a class="en_savoir_plus" href="http://www.leclub-biotope.com/354-promenade-g%C3%A9ologique-%C3%A0-paris-11%C3%A8me-9782366620313.html" target="_blank">Fiche produit</a></div>
</li>
<li>
<div id="texte_image_droite">
<img alt="Dunes - Richesses naturelles" height="300" src="themes/theme-mystique/slider_perso/images_nouveautes/dunes.jpg" style="padding: 0px 10px 0px 20px; float: right;" width="319" />
<p class="slider_titre_paragraphe">
Dunes - Richesses naturelles</p>
<p class="slider_paragraphe">
Partez pour un voyage photographique à travers certaines des plus belles dunes littorales de France, et découvrez toute la richesse naturelle que ces milieux fragiles abritent.</p>
<a class="en_savoir_plus" href="#" target="_blank">Fiche produit</a></div>
</li>
</ul>
</div>
<div class="sliderbutton">
<img alt="Next" height="38" onclick="slideshow.move(1)" src="themes/theme-mystique/slider_perso/right.png" width="22" /></div>
</div>
<ul class="pagination" id="pagination">
<li onclick="slideshow.pos(0)">
1</li>
<li onclick="slideshow.pos(1)">
2</li>
<li onclick="slideshow.pos(2)">
3</li>
<li onclick="slideshow.pos(3)">
4</li>
<li onclick="slideshow.pos(4)">
5</li>
</ul>
</div>
Merci d'avance de vos lumières
Connectez-vous ou Inscrivez-vous pour répondre.
Réponses
C'est le margin-left qui te décale ton slider je pense. Essai de rajouter dans ta feuille de style :
J'ai donc modifié ma ligne comme suit :
Le problème d'affichage est toujours là.
essaye comme cela:
donc avec margin-left: 0!important;
Le 0 et !important doivent ce toucher.
Pense à vider le cache de ton navigateur. on sait jamais...
Consultant PluXml
Ancien responsable et développeur de PluXml (2010 à 2018)
et mettre la feuille de style spécifique APRES celle génrale
Bingo, le décalage horizontal a disparu
Par contre il me reste un léger décalage vertical, comme vous pouvez le constater ici :
http://www.biotope-editions.com/index.php?static3/nouveautes-biotope-editions
j'ai donc rajouté un "margin-top: 0!important;"
comme suit :
Mais ce léger décalage vertical est toujours présent !
à "#slider ul" comme ceci :
Puis j'ai supprimer le "margin-top: 0!important;"
de "#slider li" ce qui donne donc ceci :
Merci à tous de vous êtes penchés sur mon problème :cool:
Car j'ai cru comprendre que les plugins proposés ne permettaient d'incorporer qu'un seul slide sur tout le site !
Mais s'il existe un plugin de slider qui permet d'incorporer des slides à plusieurs endroits du site, je suis preneur...
Nico
le site est à cet adresse http://village.alternativesweb.org/
merci à vous
C'est sympa de t'inscrire aujourd'hui pour nous présenter ton site réalisé sous Spip
Accès à mon dépôt de plugins et thèmes
installe PluXml plus vite que ton ombre avec kzInstall2
Salut
Pas très explicite l'énoncé de ton problème
(Alors déjà c'est bourré de scripts, j'en parle pas plus, mais chez moi ton menu ne fonctionne pas) ]:D
Pour le décalage, il y a trop de soucis pour les énumérer tous
Si j'ai bien compris la finalité, tu centres ton image de fond au niveau du body pour que ton contenu soit visible entre les planches :
body {
background-image: url("../test.jpg");
background-position: center 20%;
}
Techniquement le détourage "noir" de ton bloc page ne doit pas se faire par une image de fond du body, mais à l'aide de la règle CSS background-color: black; placée au bon endroit. Dans body tu n'as plus qu'à placer une image background représentant tes planches.
De plus comme tu positionnes <div class="bloclogo"> avec un float: left; et une hauteur mini 500px, résultat le reste des blocs va se placer sur la droite de ce bloc et en haut de la page. Si tu retires ces deux règles CSS ça va améliorer un peu ton rendu, mais ce ne sera toujours pas ce que je suppose tu désires faire car ensuite c'est ton bloc "main" qui compense le décalage induit avec un float: right; et se retrouve mal placé. Si on touche à main, ca coince un peu plus loin avec le slider, etc.
Bref pour faire court, tu as un problème de structure au niveau de ta page. Pour avoir l'effet recherché "menu à gauche, contenu à droite" il te manque une colonne "sidebar" ou "aside" dans lequel tu vas placer le bloc "menu", et un bloc "contenu" où tu placeras le bloc "main" .
Je t'invite à t'inspirer de cette structure HTML de base pour replacer tes différents blocs dans ton squelette. Il te sera ensuite plus facile de composer ton fichier layout.css en éliminant les floats (left et right) en trop un peu partout.
Un truc du style :
De tête pour une colonne à gauche, tu places un float: right et un margin-left: 25%; sur le bloc "main" (pas besoin de width sur "main") et juste un width: 24% sur "aside".
Nota 1 : les valeurs 25% et 24% ne sont qu'indicatives (car ton main actuel est de 75%). En restructurant tu pourras réduire la largeur de la colonne mais il faut juste garder en tête de garder 1% de décalage entre les deux blocs au cas où)
Nota 2 : les valeurs width entre parenthèses sont à mettre dans le CSS