Insertion d'une Timeline verticale

par rene.progin Sam 31 Jan 2015 - 10:39

Bonjour,
J'aimerais pouvoir intégrer dans une page de mon site Jimdo une timeline horizontale.
J'ai découvert cette Timeline customisable, qui est vraiment excellente. http://codyhouse.co/gem/vertical-timeline/

Après avoir téléchargé le template de la timeline, j'ai téléchargé tous les fichiers css, js, etc. dans les "Fichiers" du site Jimdo (sous Design personnel), renommés pour être sûr qu'ils n'aient pas le même nom que le css du site Jimdo. Puis j'ai corrigé tous les liens dans le HTML pour qu'il retrouve bien les fichiers css et js.

J'ai ensuite copié toute la page HTML du template dans un Element HTML de Jimdo. Mon problème est que l'élément HTML continue, apparemment, de prendre le CSS général du site Jimdo.
http://www.noa-et-rene.ch/test1/html-testpage1/

Y a-t-il un moyen de forcer ce bloc HTML à ne pas prendre en compte le CSS du site, mais à utiliser celui qui est indiqué au début de son code?

Voici mon code HTML que je met dans l'élément HTML de Jimdo.

Code:: <!doctype html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='http://fonts.googleapis.com/css?family=Droid+Serif|Open+Sans:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="http://u.jimdo.com/www69/o/sb020fc498ada2f53/userlayout/css/timelinereset.css?t=1422693842">  <link rel="stylesheet" href="http://u.jimdo.com/www69/o/sb020fc498ada2f53/userlayout/css/timelinestyle.css?t=1422693849">  <script src="http://u.jimdo.com/www69/o/sb020fc498ada2f53/userlayout/js/timelinemodernizr.js?t=1422694088"></script>  <title>Responsive Vertical Timeline</title> </head> <body2> <section id="cd-timeline" class="cd-container"> <div class="cd-timeline-block"> <div class="cd-timeline-img cd-picture"> <img src="img/cd-icon-picture.svg" alt="Picture"> </div>  <div class="cd-timeline-content"> <h2>Title of section 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p> <a href="#0" class="cd-read-more">Read more</a> <span class="cd-date">Jan 14</span> </div>  </div>  <div class="cd-timeline-block"> <div class="cd-timeline-img cd-movie"> <img src="img/cd-icon-movie.svg" alt="Movie"> </div>  <div class="cd-timeline-content"> <h2>Title of section 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?</p> <a href="#0" class="cd-read-more">Read more</a> <span class="cd-date">Jan 18</span> </div>  </div>  <div class="cd-timeline-block"> <div class="cd-timeline-img cd-picture"> <img src="img/cd-icon-picture.svg" alt="Picture"> </div>  <div class="cd-timeline-content"> <h2>Title of section 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem doloremque dolorem ipsam quae rerum quis. Odit, itaque, deserunt corporis vero ipsum nisi eius odio natus ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.</p> <a href="#0" class="cd-read-more">Read more</a> <span class="cd-date">Jan 24</span> </div>  </div>  <div class="cd-timeline-block"> <div class="cd-timeline-img cd-location"> <img src="img/cd-icon-location.svg" alt="Location"> </div>  <div class="cd-timeline-content"> <h2>Title of section 4</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p> <a href="#0" class="cd-read-more">Read more</a> <span class="cd-date">Feb 14</span> </div>  </div>  <div class="cd-timeline-block"> <div class="cd-timeline-img cd-location"> <img src="img/cd-icon-location.svg" alt="Location"> </div>  <div class="cd-timeline-content"> <h2>Title of section 5</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum.</p> <a href="#0" class="cd-read-more">Read more</a> <span class="cd-date">Feb 18</span> </div>  </div>  <div class="cd-timeline-block"> <div class="cd-timeline-img cd-movie"> <img src="img/cd-icon-movie.svg" alt="Movie"> </div>  <div class="cd-timeline-content"> <h2>Final Section</h2> <p>This is the content of the last section</p> <span class="cd-date">Feb 26</span> </div>  </div>  </section>  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="http://u.jimdo.com/www69/o/sb020fc498ada2f53/userlayout/js/timelinemain.js?t=1422694078"></script>  </body2> </html>

par **FredVig** Jeu 19 Fév 2015 - 15:01

Placez le contenu de la CSS nouvelle à l'intérieur de la CSS jimdo, et modifiez le nom de la CSS que vos autre fichier externes doivent aller chercher ?

Insertion d'une Timeline verticale

Insertion d'une Timeline verticale

Re: Insertion d'une Timeline verticale