Using roundabout in coda

Using roundabout in coda

Hey y'all.
Please don't hate me for the following code if it is hopelessly amateur: I am but a hopeless amateur.
Its just a sort of demo idea that i'm messing with... there are extra objects etcetera in the css that i'm not using yet and so on... this is my first attempt with css, java, or even html, really. 

I'm trying to put some roundabouts in coda, as the title suggests.
I'm fairly sure that I'm not double-calling jquery.
Problems:
The width of the ul in roundabout, which usually effects the spread of the li's, (alterable in the css) is not functioning (ie, width does not change). This means that the roundabouts extend into the adjacent coda panel.
Also, the coda tabs have totally disappeared, Oh, and there is a big white space at the top of the coda... which may well be the tabs, actually... 
why is the class 'title' - used in the coda examples to create a tab - not present in the css anywho?
lots of questions.

Any ideas?

massive thanks, no seriously, 

b6a6r6n

the css (non-coda stuff at the bottom):
  2. /***********************************************************************
  3.   jQuery Coda-Slider v3.0 - kevinbatdorf.github.com/codaslider
  4.   Copyright (c) 2012 Kevin Batdorf
  5.   This plugin available for use in all personal or commercial projects under both MIT and GPL licenses.


  8. .coda-slider-wrapper {
  9.   padding: 0px 0; 
  10. }
  11.   
  12.   .coda-slider-wrapper .coda-slider {
  13.   
  14.     background: #000000;
  15.     width: 800px; 
  16.   }
  17.     
  18.     .coda-slider-wrapper .coda-slider .panel {
  19.     
  20.       width: 800px; 
  21.     }
  22.       
  23.       .coda-slider-wrapper .coda-slider .panel .panel-wrapper {
  24.        
  25.         padding: 0px; 
  26.       }
  27.   
  28.   .coda-slider-wrapper .coda-nav {
  29.   
  30.   }
  31.     
  32.     .coda-slider-wrapper .coda-nav .current {
  33.      
  34.       background: #000000; 
  35.     }
  36.     
  37.     .coda-slider-wrapper .coda-nav a {
  38.      
  39.       background: #000000;
  40.       color: #FFFFFF;
  41.       margin-right: 1px;
  42.       padding: 3px 6px; 
  43.     }
  44.     
  45.     .coda-slider-wrapper .coda-nav a:hover {
  46.     
  47.       background: #000000;
  48.       color: #FFFFFF;
  49.       text-shadow: none; 
  50.     }
  51.   
  52.   .coda-slider-wrapper .coda-nav-left, .coda-slider-wrapper .coda-nav-right {
  53.    
  54.   }
  55.     
  56.     .coda-slider-wrapper .coda-nav-left a, .coda-slider-wrapper .coda-nav-right a {
  57.     
  58.       background: #000;
  59.       color: #fff;
  60.       padding: 5px;
  61.       width: 100px; 
  62.     }
  63.   
  64.   .coda-slider-wrapper .coda-nav-left-arrow {
  65.     /******************************************************
  66.     * 
  67.     * Graphical arrow styles 
  68.     *
  69.     *******************************************************/
  70.     width: 25px;
  71.     height: 25px;
  72.     background: url(../img/arrow.png) no-repeat top left; 
  73.     margin-top:50px;
  74.   }

  76. .coda-slider-wrapper .coda-nav-left-arrow a {
  77.     /******************************************************
  78.     * 
  79.     * Graphical arrow styles 
  80.     *
  81.     *******************************************************/
  82.     width: 0;
  83.     height: 0;
  84.     border:none;
  85.   }

  87.   .coda-slider-wrapper .coda-nav-left-arrow:hover {
  88.     /************************************************
  89.     * 
  90.     * Graphical arrows hover left
  91.     *
  92.     *************************************************/
  93.     background: url(../img/arrow.png) no-repeat bottom left; 
  94.   }
  95.   
  96.   .coda-slider-wrapper .coda-nav-right-arrow {
  97.     /******************************************************
  98.     * 
  99.     * Graphical arrow styles 
  100.     *
  101.     *******************************************************/
  102.     width: 25px;
  103.     height: 25px;
  104.     background: url(../img/arrow.png) no-repeat top right; 
  105.     margin-top:50px;
  106.   }
  107. .coda-slider-wrapper .coda-nav-right-arrow a {
  108.     /******************************************************
  109.     * 
  110.     * Graphical arrow styles 
  111.     *
  112.     *******************************************************/
  113.     width: 0;
  114.     height: 0;
  115.     background: none; 
  116.     margin-top:0;
  117.     border:none;
  118.   }

  120.   .coda-slider-wrapper .coda-nav-right-arrow:hover {
  121.     /************************************************
  122.     * 
  123.     * Graphical arrows hover right
  124.     *
  125.     *************************************************/
  126.     background: url(../img/arrow.png) no-repeat bottom right; 
  127.   }

  129.   .coda-slider-wrapper .coda-nav-left-arrow:active, .coda-slider-wrapper .coda-nav-right-arrow:active {
  130.     /************************************************
  131.     * 
  132.     * Graphical arrows active
  133.     *
  134.     *************************************************/
  135.     margin-top: 22px; 
  136.   }
  137.   
  138.   .coda-slider-wrapper .loading {
  139.     /******************************************************
  140.     * 
  141.     * Style for preloader 
  142.     *
  143.     *******************************************************/
  144.     height: 100%;
  145.     padding: 20px;
  146.     text-align: center; 
  147.   }

  149.   


  152. .arrows .coda-slider {
  153.   /******************************************************
  154.   * 
  155.   * Margin between slider and arrows 
  156.   *
  157.   *******************************************************/
  158.   margin: 0 10px; 
  159. }

  161. /**********************************************************************
  162. *
  163. * Don't change anything below here unless you know what you're doing 
  164. *
  165. ***********************************************************************/

  167. .coda-slider-wrapper {
  168.   /************************************************
  169.   * 
  170.   * Wrapper styles 
  171.   *
  172.   *************************************************/
  173.   clear: both;
  174.   overflow: auto; 
  175. }
  176.   
  177.   .coda-slider-wrapper .coda-slider {
  178.     /************************************************
  179.     * 
  180.     * slider styles 
  181.     *
  182.     *************************************************/
  183.     float: left;
  184.     overflow: hidden;
  185.     position: relative; 
  186.   }
  187.     
  188.     .coda-slider-wrapper .coda-slider .panel-container {
  189.       /************************************************
  190.       * 
  191.       * Panel container styles 
  192.       *
  193.       *************************************************/
  194.       position: relative; 
  195.     }
  196.       
  197.       .coda-slider-wrapper .coda-slider .panel-container .panel {
  198.         /************************************************
  199.         * 
  200.         * Panel styles 
  201.         *
  202.         *************************************************/
  203.         display: block;
  204.         float: left; 
  205.       }
  206.   
  207.   .coda-slider-wrapper .coda-nav {
  208.     /************************************************
  209.     * 
  210.     * Navigation tabs 
  211.     *
  212.     *************************************************/ 
  213.   }
  214.     
  215.     .coda-slider-wrapper .coda-nav ul {
  216.       /************************************************
  217.       * 
  218.       * Navigation tabs 
  219.       *
  220.       *************************************************/
  221.       clear: both;
  222.       display: block;
  223.       margin: auto;
  224.       overflow: hidden; 
  225.     }
  226.       
  227.       .coda-slider-wrapper .coda-nav ul li {
  228.         /************************************************
  229.         * 
  230.         * Navigation tabs 
  231.         *
  232.         *************************************************/
  233.         display: inline; 
  234.       }
  235.         
  236.         .coda-slider-wrapper .coda-nav ul li a {
  237.           /************************************************
  238.           * 
  239.           * Navigation tabs 
  240.           *
  241.           *************************************************/
  242.           display: block;
  243.           float: left;
  244.           text-decoration: none; 
  245.         }
  246.   
  247.   .coda-slider-wrapper .coda-nav-left-arrow, .coda-slider-wrapper .coda-nav-right-arrow {
  248.     /************************************************
  249.     * 
  250.     * Graphical arrows 
  251.     *
  252.     *************************************************/
  253.     cursor: pointer;
  254.     float: left;
  255.   }
  256.     
  257.     .coda-slider-wrapper .coda-nav-left-arrow a, .coda-slider-wrapper .coda-nav-right-arrow a {
  258.       /************************************************
  259.       * 
  260.       * Graphical arrows 
  261.       *
  262.       *************************************************/
  263.       display: block; 
  264.     }
  265.   
  266.   .coda-slider-wrapper .coda-nav-left, .coda-slider-wrapper .coda-nav-right {
  267.     /************************************************
  268.     * 
  269.     * Html arrows 
  270.     *
  271.     *************************************************/
  272.     float: left; 
  273.   }
  274.     
  275.     .coda-slider-wrapper .coda-nav-left a, .coda-slider-wrapper .coda-nav-right a {
  276.       /************************************************
  277.       * 
  278.       * Html arrow styles 
  279.       *
  280.       *************************************************/
  281.       display: block;
  282.       text-align: center;
  283.       text-decoration: none; 
  284.     }
  285.   
  286.   .coda-slider-wrapper .coda-nav-left, .coda-slider-wrapper .coda-nav-left-arrow {
  287.     /************************************************
  288.     * 
  289.     * Html and graphical arrow styles 
  290.     *
  291.     *************************************************/
  292.     clear: both; 
  293.   }
  301. <script type="text/javascript"></script>
  302. <meta charset="utf-8" />
  305. ul {
  306. list-style: none;
  307. padding: 0;
  308. margin: 0 auto;
  309. width: 5em;
  310. height: 10em;
  311. }
  312. li {
  313. height: 19.6em;
  314. width: 27em;
  315. text-align: center;
  316. cursor: pointer;
  317. background-color: #000000;
  318.  border: 1px solid #999;
  319. }
  320. li img {
  321. width: 100%;
  322. }
  323. li.roundabout-in-focus {
  324. cursor: default;
  325. }
  326. li span {
  327. display: block;
  328. padding-top: 1em;
  329. }

  332. .header 
  333. {
  334. background-color: #000000;
  335. padding: 0px;
  336. text-align: center;
  337. visibility: visible;
  338. position: static;
  339. height: 430px }
  341. #footer 
  342. {
  343. color: #000000;
  344. font-size: 2em;
  345. line-height: 30px;
  346. background-color: #000000;
  347. text-align: left;
  348. letter-spacing: 1px;
  349. height: 30px;
  350. padding-top: 30px;
  351. padding-bottom: 30px;
  352. font-family: 'MyWebFont';
  353. clear: left
  354. }
  356. #left {float:left; width:50%;}

  360. @font-face{ 
  361. font-family: 'MyWebFont';
  362. src: url('freebsc_-webfont.eot');
  363. src: url('freebsc_-webfont.eot?#iefix') format('embedded-opentype'),
  364.      url('freebsc_-webfont.woff') format('woff'),
  365.      url('freebsc_-webfont.ttf') format('truetype'),
  366.      url('freebsc_-webfont.svg#webfont') format('svg');
  367. }

  369.   body {
  370. background-color: #000000; 
  371. margin:0;
  372. padding:0; 
  374. color: #FFFFFF;
  375. font-size: 100%;}
  377. p.title {font-family: 'MyWebFont'; font-size:3em; text-align:center;}
  378. p.detail {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:1em; text-align:center;}
  380. a:link {color: #736F6E; text-decoration: none; }
  381. a:active {color: #FFFFFF; text-decoration: none; }
  382. a:visited {color: #736F6E; text-decoration: none; }
  383. a:hover {color: #FFFFFF; text-decoration: none; }

the html: (no image links will work...!)

  2. <html>
  3.   <head>
  4.   <link rel="stylesheet" type="text/css" media="screen" href="./css/coda-slider.css">

  6.   <script src="./js/jquery-1.7.2.min.js"></script>
  7.   <script src="./js/jquery-ui-1.8.20.custom.min.js"></script>
  8.   <script src="./js/jquery.coda-slider-3.0.js"></script>
  9. <script src="jquery.roundabout.js"></script>


  12.   <script>
  13.       $(function() {
  14.           $('#slider-id').codaSlider();
  15.       });
  16. $(document).ready(function() {
  17. $('ul').roundabout();
  18. });
  19.   </script>
  20.   </head>

  22.   <body>
  24.       <div class="coda-slider" id="slider-id">
  25.           <div>
  26. <h2 class="title">Panel 1</h2> 
  27.               <ul>
  28. <div class="header"><img src="Logo_01.jpg" align="center" width="100%" alt=""></div>
  29. </ul>
  30. <BR><BR><BR><BR><BR><BR><BR><BR> 
  31.           </div>
  32. <div>
  33.               <h2 class="title">Panel 2</h2>
  34. <BR><BR><BR><BR><BR><BR><BR><BR> 
  35.               <ul>
  36. <li><img src="images/lflower03.jpg" alt="The Phoenix Bird" /></li>
  37. <li><img src="images/lflower04.jpg" alt="The Phoenix Bird" /></li>
  38. <li><img src="images/phbird04a.jpg" alt="The Phoenix Bird" /></li>
  39. <li><img src="images/phbird05a.jpg" alt="The Phoenix Bird" /></li>
  40. </ul>
  41. <BR><BR><BR><BR><BR><BR><BR><BR> 
  42.           </div>
  43.           <div>
  44.               <h2 class="title">Panel 3</h2>
  45.      <BR><BR><BR><BR><BR><BR><BR><BR>         
  46. <ul>
  47. <li><img src="images/phbird02a.jpg" alt="The Phoenix Bird" /></li>
  48. <li><img src="images/phbird03a.jpg" alt="The Phoenix Bird" /></li>
  49. <li><img src="images/phbird04a.jpg" alt="The Phoenix Bird" /></li>
  50. <li><img src="images/phbird05a.jpg" alt="The Phoenix Bird" /></li>
  51. </ul>
  52. <br><BR><BR><BR><BR><BR><BR>
  55.           </div>
  56.       </div>
  57.   </body>
  58. </html>