title: jquery slideshow-tabs and html
body: <p>I have been doing a course online on web-development, the instructor showed us an implementation of slideshow using jquery. I followed every step as instructed, but when I open my browser the images seem to not appear on the slideshow and I don't know if the slideshow box is working.
  Here's the link to the jquery tool for the tabs-slideshow:
  <a href="http://jquerytools.github.io/demos/tabs/slideshow.html" rel="nofollow noreferrer">http://jquerytools.github.io/demos/tabs/slideshow.html</a></p>
  
  <p>My Questions are:
  1.Where have I gone wrong in the code which is preventing the proper working display of the slideshow images and the slideshow box?
  2.What is br class="clearing" and .clearing {
      clear:both;} (css file 2) doing exactly?</p>
  
  <p>Thank you in advance.</p>
  
  <p>This is my HTML code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
     &lt;html&gt;
     &lt;head&gt;
      &lt;meta charset=utf-8&gt;
      &lt;title&gt;Killersites CSS layout Example&lt;/title&gt;
      &lt;link href="css/style.css" rel="stylesheet" type="text/css"&gt;
      &lt;link href="css/slideshow.css" rel="stylesheet" type="text/css"&gt;
      &lt;script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"&gt;&lt;/script&gt;
  
  
      &lt;!--[if lt IE 9]&gt;
      &lt;script src="//html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
      [endif]--&gt;
      &lt;!-- enable the jquery   --&gt;
      &lt;script language="javascript"&gt;
      // What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready
  
          $(function() {
  
          $(".slidetabs").tabs(".images &gt; div", {
              //enable the "cross-fading" effect
              effect:'fade',
              fadeOutSpeed: "slow",
  
              // start from the befinning after the last tab
              rotate: true
          //use the slideshow plugin. It accepts its own configuration 
          }).slideshow();
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;  
      &lt;content&gt;
  
          &lt;header&gt;
              &lt;a href="#" id="logo"&gt;Home&lt;/a&gt;
              &lt;h1&gt;Killersites Training&lt;/h1&gt;
                  &lt;p&gt;Creating Killersites Since 1998&lt;/p&gt;
          &lt;/header&gt;
              &lt;!-- Container for the slides--&gt;
              &lt;header class="images"&gt;
              &lt;!-- First sliding image--&gt;
                  &lt;div&gt;
                          &lt;img src="images/killerfrog.jpg" width="940" height="250" alt="image1" title="image1"&gt;
                  &lt;/div&gt;
          &lt;!-- Second sliding image--&gt;    
                  &lt;div&gt;
                          &lt;img src="images/killerfrog2.jpg" width="940" height="250" alt="image2" title="image2"&gt;
                  &lt;/div&gt;
          &lt;!-- Third sliding image--&gt;
                  &lt;div&gt;
                          &lt;img src="images/killerfrog3.jpg" width="940" height="250" alt="image3" title="image3"&gt;
                  &lt;/div&gt;
  
          &lt;/header&gt;
  
  
      &lt;!-- The tabs --&gt;
  
          &lt;div class="slidetabs"&gt;
              &lt;a href="#"&gt;&lt;/a&gt;
              &lt;a href="#"&gt;&lt;/a&gt;
              &lt;a href="#"&gt;&lt;/a&gt;
  
          &lt;/div&gt;
  
  
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;News&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Products&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Clients&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Employment&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
  
          &lt;article&gt;
              &lt;h2&gt;Lorem ipsum&lt;/h2&gt; 
              &lt;p&gt;dolor sit amet consectetur adipiscing elit. Nulla id nulla risus, vitae consequat dui. Quisque vehicula tellus sed nisl feugiat adipiscing ut in neque. Nullam id sapien eget diam ullamcorper tempus a pharetra enim. Nam at ligula ligula. Maecenas turpis nunc, suscipit et viverra in, cursus eget tortor. Aenean mollis adipiscing est. Cras elementum blandit tincidunt. Aliquam at semper lacus. Etiam hendrerit lacinia mauris, vel fermentum risus venenatis ultrices. Aenean fringilla est interdum metus tempor facilisis ultrices a metus. Sed sit amet tortor sit amet nulla molestie vestibulum. Praesent id sem a libero fermentum volutpat. Maecenas pharetra neque eu leo interdum hendrerit. Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus. Integer molestie turpis id est ultricies vel commodo magna viverra. Nunc gravida fermentum placerat. Duis lorem augue, tincidunt blandit vehicula quis, aliquam nec tellus.&lt;/p&gt;
              &lt;h3&gt;A Sub Headline&lt;/h3&gt; 
              &lt;p&gt;dolor sit amet consectetur adipiscing elit. Nulla id nulla risus, vitae consequat dui. Quisque vehicula tellus sed nisl feugiat adipiscing ut in neque. Nullam id sapien eget diam ullamcorper tempus a pharetra enim. Nam at ligula ligula. Maecenas turpis nunc, suscipit et viverra in, cursus eget tortor. Aenean mollis adipiscing est. Cras elementum blandit tincidunt. Aliquam at semper lacus. Etiam hendrerit lacinia mauris, vel fermentum risus venenatis ultrices. &lt;/p&gt;
              &lt;h3&gt;Another Sub Headline&lt;/h3&gt; 
              &lt;p&gt;dolor sit amet consectetur adipiscing elit. Nulla id nulla risus, vitae consequat dui. Quisque vehicula tellus sed nisl feugiat adipiscing ut in neque. Nullam id sapien eget diam ullamcorper tempus a pharetra enim. Nam at ligula ligula. Maecenas turpis nunc, suscipit et viverra in, cursus eget tortor. Aenean mollis adipiscing est. Cras elementum blandit tincidunt. Aliquam at semper lacus. Etiam hendrerit lacinia mauris, vel fermentum risus venenatis ultrices.Sed sit amet tortor sit amet nulla molestie vestibulum. Praesent id sem a libero fermentum volutpat. Maecenas pharetra neque eu leo interdum hendrerit. Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus. Integer molestie turpis id est ultricies vel commodo magna viverra. Nunc gravida fermentum placerat. Duis lorem augue, tincidunt blandit vehicula quis, aliquam nec tellus. &lt;/p&gt;
  
              &lt;section class="leftfloat"&gt;
                  &lt;h3&gt;nested left section&lt;/h3&gt;
                  &lt;p&gt;Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus. Integer molestie turpis id est ultricies vel commodo magna viverra. Nunc gravida fermentum placerat. Duis lorem augue, tincidunt blandit vehicula quis, aliquam nec tellus.&lt;/p&gt;
              &lt;/section&gt;
  
              &lt;section class="rightfloat"&gt;
                  &lt;h3&gt;nested right section&lt;/h3&gt;
                  &lt;p&gt;Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus. Integer molestie turpis id est ultricies vel commodo magna viverra. Nunc gravida fermentum placerat. Duis lorem augue, tincidunt blandit vehicula quis, aliquam nec tellus.&lt;/p&gt;
              &lt;/section&gt;
  
              &lt;h3&gt;Another Sub Headline&lt;/h3&gt; 
              &lt;p&gt;dolor sit amet consectetur adipiscing elit. Nulla id nulla risus, vitae consequat dui. Quisque vehicula tellus sed nisl feugiat adipiscing ut in neque. Nullam id sapien eget diam ullamcorper tempus a pharetra enim. Nam at ligula ligula. Maecenas turpis nunc, suscipit et viverra in, cursus eget tortor. Aenean mollis adipiscing est. Cras elementum blandit tincidunt. Aliquam at semper lacus. Etiam hendrerit lacinia mauris, vel fermentum risus venenatis ultrices.Sed sit amet tortor sit amet nulla molestie vestibulum. Praesent id sem a libero fermentum volutpat. Maecenas pharetra neque eu leo interdum hendrerit. Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus. Integer molestie turpis id est ultricies vel commodo magna viverra. Nunc gravida fermentum placerat. Duis lorem augue, tincidunt blandit vehicula quis, aliquam nec tellus. &lt;/p&gt;
          &lt;/article&gt;
  
  
  
          &lt;footer&gt;
  
              &lt;section class="first"&gt;
                  &lt;p&gt;&amp;copy;2011 killersites Corp&lt;/p&gt;
              &lt;/section&gt;
  
              &lt;section&gt;
                  &lt;h3&gt;nested footer section&lt;/h3&gt;
                  &lt;p&gt;Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus.&lt;/p&gt;
              &lt;/section&gt; 
  
              &lt;section&gt;
                  &lt;h3&gt;nested footer section&lt;/h3&gt;
                  &lt;p&gt;Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus.&lt;/p&gt;
              &lt;/section&gt;
  
              &lt;section&gt;
                  &lt;h3&gt;nested footer section&lt;/h3&gt;
                  &lt;p&gt;Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus.&lt;/p&gt;
                  &lt;/section&gt;  
              &lt;br class="clearing"&gt;  
  
              &lt;/footer&gt;
  
  
      &lt;/content&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The css file1:</p>
  
  <pre><code>    @charset "UTF-8";
      /* slideshow css */
  
  
  /* container for slides */
  .images {
          background:#fff url(../images/h300.png) repeat-x;
          position:relative;  
          height:250px;
          width:940px;
          float:left; 
          cursor:pointer;
  
          }
  
  /* single slide */
  .images div {
  
  
          display:none;
          position:absolute;
          top:0;
          left:0;     
          height:250px;
          font-size:12px;
      }
  
  /* header */
  .images h3 {
          font-size:22px;
          font-weight:normal;
          margin:0 0 20px 0;
          color:#456;
      }
  
  /* tabs (those little circles below slides) */
  .slidetabs {
          position:absolute;
          top:365px;
          right:20px;     
          /*clear:both;
          margin-left:330px;*/
  }
  
  /* single tab */
  .slidetabs a {
          width:8px;
          height:8px;
          float:left;
          margin:3px;
          background:url(../images/navigator.png) 0 0 no-repeat;
          display:block;
          font-size:1px;      
  }
  
  /* mouseover state */
  .slidetabs a:hover {
          background-position:0 -8px;      
  }
  
  /* active state (current page state) */
  .slidetabs a.current {
          background-position:0 -16px;     
  }   
  </code></pre>
  
  <p>The CSS File 2:</p>
  
  <pre><code>@charset "UTF-8";
  *{
      margin:0px;
      padding:0px;
  }
  
  /*html5 display rule */
  address, article, aside, canvas, content, details, figcaption, figure, footer, header, hgroup, nav, menu, section, summary {
      display:block;
  }
  
  @font-face {
      font-family: 'ChunkFiveRoman';
      src: url('../fonts/chunkfive-webfont.eot');
      src: url('../fonts/chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
           url('../fonts/chunkfive-webfont.woff') format('woff'),
           url('../fonts/chunkfive-webfont.ttf') format('truetype'),
           url('../fonts/chunkfive-webfont.svg#ChunkFiveRoman') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  
  @font-face {
      font-family: 'sinkin_sans400_regular';
      src: url('../fonts/sinkinsans-400regular-webfont.woff2') format('woff2'),
           url('../fonts/sinkinsans-400regular-webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  
  }
  
  body {
      background-color: #353535;
      font-family:Verdana, Geneva, sans-serif;
      font-size:12px;
      background-image: url(../images/dots.png);
  }
  
  h1, h2, h3 {
      font-family: 'sinkin_sans400_regular','ChunkFiveRoman', Georgia, "Times New Roman", Times, serif;
      }
  
  
  content{
      width:940px;
      margin-top:20px;
      margin-right:auto;
      margin-bottom:20px;
      margin-left:auto;
      position:relative;
      background-color:#f2f3ed;
      border-radius:25px;
      -moz-border-radius:25px; /* Firefox 3.6 and earlier */
  }
  
  header {
      border-bottom-color: #CCC;
      border-bottom-width: 1px;
      border-bottom-style: solid;
  }
  
  header h1 {
      padding:20px 20px 20px 97px;
      color:#353535;
      font-size:42px;
  
      /* css3 transition */
      -webkit-transition:all .5s;
      -o-transition-property:all;
      -o-transition-duration:.5s;
      -moz-transition-property:all;
      -moz-transition-duration:.5s;
      transition-property:all;
      transition-duration:.5s;
      }
  
      header h1:hover{
          text-shadow: 2px 2px 2px #888;
          -webkit-text-shadow:2px 2px 2px #888; /* safari */
  
  
  
      }
  
  
  header p {
      color:#353535;
      font-family:Georgia, "Times New Roman", Times, serif;
      font-size:14px;
      position: absolute;
      right: 0px;
      top: 33px;
      background-color:#f2f3ed;
      padding:10px;
  
      /* rounded corners */
      border-radius:25px;
      -moz-border-radius:25px; /* Firefox 3.6 and earlier */
  
      /* 2d skew trasnform */
      transform:skew(-20deg,0deg);
      -ms-transform:skew(-20deg,0deg); /* IE 9 */
      -moz-transform:skew(-20deg,0deg); /* Firefox */
      -webkit-transform:skew(-20deg,0deg); /* Safari and Chrome */
      -o-transform:skew(-20deg,0deg); /* Opera */
  
      /* css3 transition */
      -webkit-transition:all .5s;
      -o-transition-property:all;
      -o-transition-duration:.5s;
      -moz-transition-property:all;
      -moz-transition-duration:.5s;
      transition-property:all;
      transition-duration:.5s;
      }
  
  
  header p:hover {
      color:#f2f3ed;
      background-color:#353535;
      background-image: url(../images/dots.png);
  
      }
  
  
  #logo { 
      position: absolute; 
      top: 12px; 
      left: 20px; 
      background: url(../images/logo_small.png) no-repeat; 
      width: 61px; 
      height: 62px;
      text-indent:-9999px;
  
      /* css3 transition */
      -webkit-transition:all 1s;
      -o-transition-property:all;
      -o-transition-duration:1s;
      -moz-transition-property:all;
      -moz-transition-duration:1s;
      transition-property:all;
      transition-duration:1s;
      }
  #logo:hover { 
      transform:rotate(360deg);
      -moz-transform:rotate(360deg);
      -webkit-transform:rotate(360deg);
      -o-transform:rotate(360deg);
      }
  
  header#anim {
      height:250px;
      }
  
  nav {
      float:left;
      width:200px;
  }
  
  nav li{
      list-style-type:none;
  }
  
  nav li a{
      font-family:Georgia, "Times New Roman", Times, serif;
      text-decoration:none;
      display:block;
      padding-top:10px;
      padding-right:20px;
      padding-bottom:10px;
      padding-left:20px;
      font-size:18px;
      /* css3 transition */
      -webkit-transition:all .5s;
      -o-transition-property:all;
      -o-transition-duration:.5s;
      -moz-transition-property:all;
      -moz-transition-duration:.5s;
      transition-property:all;
      transition-duration:.5s;
  }
  
  nav li a:link{
      color:#333;
  
  }
  nav li a:visited{
      color:#333;
  }
  nav li a:hover{
      font-family:Georgia, "Times New Roman", Times, serif;
      color:#FFF;
      background-color:#353535;
      box-shadow: 0px 0px 5px #888;
      -webkit-box-shadow:0px 0px 5px #888; /* safari */
      background-image: url(../images/dots.png);
  }
  nav li a:active{
      color:#333;
      background-color:#666;
  }
  
  article {
      width:739px;
      float:right;
      border-left-color: #CCC;
      border-left-width: 1px;
      border-left-style: solid;
      box-shadow: 0px 0px 5px #888;
      -webkit-box-shadow:0px 0px 5px #888; /* safari */
      }
  
  article h2, h3, p {
      margin-left:20px;
      margin-right:20px;
      padding-top:10px;
  
      }
  
  article p {
      padding-top:4px;
      padding-bottom:20px;
      line-height:18px;
      }
  
  article h2{
      color:#353535;
      font-size:28px;
      text-transform: capitalize;
  }
  
  article h3{
      color:#353535;
      font-size:20px;
      text-transform: capitalize;
  }
  
  article .leftfloat{
      width:50%;
      float:left;
      }
  
  article .rightfloat{
      width:50%;
      float:right;
      }
  
  footer {
      border-top-color: #CCC;
      border-top-width: 1px;
      border-top-style: solid;
      clear:both;
      background-color: #407a01;
      background-image: url(../images/bg_gradient.png);
      border-bottom-right-radius:25px;
      border-bottom-left-radius:25px;
      -moz-border-bottom-right-radius:25px;
      -moz-border-bottom-left-radius:25px;
  
      }
  
  footer section.first {
      float:left;
      width:200px;
      padding-top:10px;
      padding-bottom:20px;
      }
  
  footer section.first p {
      color:#f2f3ed;
      }   
  
  footer section {
      float:left;
      width:246px;
      padding-top:10px;
      padding-bottom:20px;
      color:#96C;
      }
  
  footer section h3 {
      font-family:Georgia, "Times New Roman", Times, serif;
      color:#f2f3ed;
      font-size:16px;
      border-bottom-width: 1px;
      border-bottom-style: dotted;
      border-bottom-color: #F2F3ED;
      padding-bottom: 0px;
      text-transform: capitalize;
      font-weight:normal;
  
      }
  
  footer section p {
      color:#333;
      font-size:10px;
      line-height:16px;
      }
  
  .clearing {
      clear:both;
  }
  </code></pre>