CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur: ![CSSActif](https://cssactif.com/cssactif-logo-old.svg) Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! | | Plouf. ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 40
![Probleme Slider Empty](https://2img.net/i/fa/empty.gif) | Bonjours voici mon problème : Voici mon fichier html : - Spoiler:
- Code:
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <html lang="en"> <head> <title>Nivo Slider </title> <style>
.theme-default #slider { margin:100px auto 0 auto; width:618px; /* Make sure your images are the same size */ height:246px; /* Make sure your images are the same size */ } .theme-pascal.slider-wrapper, .theme-orman.slider-wrapper { margin-top:150px; }
/* The Nivo Slider styles */ .nivoSlider { position:relative; } .nivoSlider img { position:absolute; top:0px; left:0px; } /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:6; display:none; } /* The slices and boxes in the Slider */ .nivo-slice { display:block; position:absolute; z-index:5; height:100%; } .nivo-box { display:block; position:absolute; z-index:5; } /* Caption styles */ .nivo-caption { position:absolute; left:0px; bottom:0px; background:#000; color:#fff; opacity:0.8; /* Overridden by captionOpacity setting */ width:100%; z-index:8; } .nivo-caption p { padding:5px; margin:0; } .nivo-caption a { display:inline !important; } .nivo-html-caption { display:none; } /* Direction nav styles (e.g. Next & Prev) */ .nivo-directionNav a { position:absolute; top:45%; z-index:9; cursor:pointer; } .nivo-prevNav { left:0px; } .nivo-nextNav { right:0px; } /* Control nav styles (e.g. 1,2,3...) */ .nivo-controlNav a { position:relative; z-index:9; cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; }
.theme-default .nivoSlider { position:relative; background:#fff url(http://i48.servimg.com/u/f48/17/18/21/16/loadin10.gif) no-repeat 50% 50%; margin-bottom:50px; -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a; -moz-box-shadow: 0px 1px 5px 0px #4a4a4a; box-shadow: 0px 1px 5px 0px #4a4a4a; } .theme-default .nivoSlider img { position:absolute; top:0px; left:0px; display:none; } .theme-default .nivoSlider a { border:0; display:block; }
.theme-default .nivo-controlNav { position:absolute; left:50%; bottom:-42px; margin-left:-40px; /* Tweak this to center bullets */ } .theme-default .nivo-controlNav a { display:block; width:22px; height:22px; background:url(http://i48.servimg.com/u/f48/17/18/21/16/bullet10.png) no-repeat; text-indent:-9999px; border:0; margin-right:3px; float:left; } .theme-default .nivo-controlNav a.active { background-position:0 -22px; }
.theme-default .nivo-directionNav a { display:block; width:30px; height:30px; background:url(http://i48.servimg.com/u/f48/17/18/21/16/arrows10.png) no-repeat; text-indent:-9999px; border:0; } .theme-default a.nivo-nextNav { background-position:-30px 0; right:15px; } .theme-default a.nivo-prevNav { left:15px; }
.theme-default .nivo-caption { font-family: Helvetica, Arial, sans-serif; } .theme-default .nivo-caption a { color:#fff; border-bottom:1px dotted #fff; } .theme-default .nivo-caption a:hover { color:#fff; } </style> </head> <body> <div id="wrapper">
<div class="slider-wrapper theme-default"> <div class="ribbon"></div> <div id="slider" class="nivoSlider"> <img src="http://i48.servimg.com/u/f48/17/18/21/16/wallpa17.jpg" alt="" title="1"/> <img src="http://i48.servimg.com/u/f48/17/18/21/16/wallpa18.jpg" alt="" title="2" /> <img src="http://i48.servimg.com/u/f48/17/18/21/16/wallpa19.jpg" alt="" title="3"/> <img src="http://i48.servimg.com/u/f48/17/18/21/16/wallpa20.jpg" alt="" title="4"/> </div> </div>
</div> <script type="text/javascript" src="http://yourjavascript.com/2565411221/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="http://yourjavascript.com/3261122125/jquery.nivo.slider.pack.js"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> </body> </html>
Lorsque je l'ouvre directement dans mon navigateur je n'ai aucun problème pour l'ouvrir : ![Probleme Slider Monhtm10](https://i.servimg.com/u/f44/11/04/18/24/th/monhtm10.png) Tandis que Lorsque je le copie dans mon forum "affichage> onglet généralité : Message sur la page d'accueil" il semble qu'il y ait une incompatibilité ou quelque chose comme ça : ![Probleme Slider Monfor10](https://i.servimg.com/u/f44/11/04/18/24/th/monfor10.png) Comme si les images a la fois du html et de mon css n’apparaissaient pas... Si ça peut vous être utile j'ai essayé mon html sur du phpBB2/3 et punBB. C'est un Slider, simplement des images qui défile pour le moment. Donc voila si quelqu'un serait d’où pourrait venir mon problème ? ![Smile](https://2img.net/i/fa/i/smiles/icon_smile.gif) Merci, Bye ! | | |
| ![Aller en bas](https://2img.net/i/empty.gif) | | Vintage Phonic ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 50
![Probleme Slider Empty](https://2img.net/i/fa/empty.gif) | Hello ^^ je crois que c'est normal, il faut que tu mettes ton lien non pas directement dans la page d'accueil, mais dans Panneau d'administration>module>gestion des pages html. tu crées une page HTML, où tu colles le code que tu as donné, et tu l'enregistres (en rajoutant un titre bien sur). Une fois fais,ça va te ramener à la page d'accueil de la gestion des pages HTML, sauf que tu aurais un lien: ![Probleme Slider 636647Sanstitre1](https://2img.net/r/hpimg15/pics/636647Sanstitre1.jpg) Tu le copies colle, et cette fois tu vas dans Affichage> Page d'accueil> généralité, et là tu colles ce code - Code:
-
<iframe src="LIEN PAGE HTML" style="background-color: transparent; overflow: hidden !important;" frameborder="no"; scrolling="no" allowtransparency="true"></iframe> Tu n'as plus qu'à rajouté le lien que l'enregistrement de ta page HTML a donné =) | | |
| ![Aller en bas](https://2img.net/i/empty.gif) | | Illadon ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 126
![Probleme Slider Empty](https://2img.net/i/fa/empty.gif) | Le mieux est de mettre le css dans la feuille de css et de copier coller tout ce qui se trouve entre les balises body là où tu as envie d'avoir ton slider (enfin je dis le mieux parce que je peux pas blairer les iframes >.>). | | |
| ![Aller en bas](https://2img.net/i/empty.gif) | | Plouf. ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 40
![Probleme Slider Empty](https://2img.net/i/fa/empty.gif) | Yes merci, problème résolut ! Merci de votre réponse et de votre rapidité ! | | |
| ![Aller en bas](https://2img.net/i/empty.gif) | | Psycho ![Psychopathe Psychopathe](https://2img.net/h/cssactif.com/files/rangs/moderateur.png)
Psychopathe
Messages : 3407
![Probleme Slider Empty](https://2img.net/i/fa/empty.gif) | Hello ! Si le problème est résolu, je classe ![Probleme Slider 926145](/users/3911/10/76/28/smiles/926145.png) Merci de l'avoir indiqué ! N'hésite pas à rouvrir un autre sujet si tu as d'autres questions (: | | |
| ![Aller en bas](https://2img.net/i/empty.gif) | | Contenu sponsorisé
![Probleme Slider Empty](https://2img.net/i/fa/empty.gif) | | ![Aller en bas](https://2img.net/i/empty.gif) | | |
Sujets similaires | ![+](https://2img.net/i/empty.gif) |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|
|