Skip navigation
Currently Being Moderated

New to code, need help please!!!

Jul 21, 2012 12:32 PM

I have been designing my first website by following a string of videos I have purchased online. (Timothy Training w/ Framework Files) I am finally to the point that I am ready to 'put' these file on my business catalyst account and get them online. I have run into an issue however. I have a page called services.html and within it I have built a 'featured content slider' that links to several pages. The code was working perfectly in any browser that I previewed it in, live view, inspections, everything was fine!! Until, I 'put' the files onto my business catalyst account, now all of the sudden the code does not display correctly anymore. I have made no changes to the code what-so-ever, no changes to the style sheets, nothing. I had a tech support guy that took a 'quick look' and said that my outer div was all of the sudden in the wrong place. I dont understand how 1. it shifted when I made no changes, 2. It works perfectly fine when I view it outside of BC platform and 3. how to even begin to fix the issue. I have spent hours upon hours trying to remedy this myself and I am finally at a breaking point and quite desperate for help. I have so many hours into this site and I am quite frustrated that I made it this far only for it to fail. Please anyone that is willing to take a look I would be grateful. I am not sure if I should post the code in here or not as this is my first post in the forum. I guess I will try to copy and paste and see if that works. Any suggestions would be great help.. Thank you so much!

 

I will copy and paste the code in this order: (I think this is all the code needed to figure it out,I hope...)

services.html

featureList.js

featured.css

styles.css

 

 

services.html

<!DOCTYPE HTML>

<html><!-- InstanceBegin template="/templates/ts_fullwidth.dwt" codeOutsideHTMLIsLocked="false" -->

 

 

<head>

          <script type="text/javascript" src="js/jquery.js"></script>

   

    <link href="css/styles.css" rel="stylesheet" type"text/css" media="screen">

    <link href="css/print.css" rel="stylesheet" type"text/css" media="screen">

   

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta http-equiv="Content-Type" content="cache" />

    <meta name= "robots" content="INDEX,FOLLOW" />

    <meta name= "keywords" content="Enter Keywords" />

    <meta name= "description" content="Description Here" />

<!-- InstanceBeginEditable name="doctitle" -->

    <title>Web Site by Tahoe POS Systems LLC - www.tahoesystems.com</title>

   

              <script type="text/javascript" src="js/featureList.js"></script>

    <link rel="stylesheet" href="css/featured.css" />

 

 

          <script language="javascript">

                    $(document).ready(function() {

 

 

                              $.featureList(

                                        $("#tabs li a"),

                                        $("#output li"), {

                                                  start_item          :          1

                                        }

                              );

                    });

          </script>

 

 

   

    <!-- InstanceEndEditable -->

    <!-- Google Analytics Code Goes Below Here -->

   

   

    <!-- End Google Analytics Code -->

   

   

<!-- InstanceBeginEditable name="head" -->

<!-- InstanceEndEditable -->

</head>

 

 

<body>

 

 

<div id="outer">

          <div id="wrapper">

 

 

                    <div id="logo">

                  <img src="images/logos/logo2.png" />

        </div>

       

        <div id="social-media-icons">

                  <ul>

                      <li><a href="http://www.facebook.com/tahoesystems"><img src="images/icons/facebook_32.png" /></a></li>

                <li><a href="#"><img src="images/icons/rss_32.png" /></a></li>

                <li><a href="http://www.twitter.com"><img src="images/icons/twitter_32.png" /></a></li>

                <li><a href="http://www.youtube.com"><img src="images/icons/youtube_32.png" /></a></li>

          </ul>   

        </div>

       

        <div id="topnav">

                  <ul>

                      <li><a href="index.html">HOME</a></li>

                <li><a href="about.html">ABOUT US</a></li>

                <li><a href="clients.html">CLIENTS</a></li>

                <li><a href="services.html">SERVICES</a></li>

                <li><a href="contact.html">CONTACT US</a></li>

            </ul>   

        </div>

       

        <div id="banner">

                  <img src="images/banner/b1.png" />

        </div>

       

        <div id="content-fullwidth"><!-- InstanceBeginEditable name="content" -->

          <h1>Welcome to Tahoe Systems Web Site!</h1>

          <p>Our Mission – To ensure your restaurant, bar, café, diner, or eatery operates smoothly. Streamline your workflow by providing the latest, most up-to-date technology the industry has to offer. Maximize your profits with a personalized POS system that works for you and not against you. Ease your stress with the quickest, most reliable, 24-hour technical support in the area. Train your staff in person with one-on-one classes taught by one of our certified staff.</p>

         

       <div id="feature">

                    <h1>Featured Tahoe Systems Services</h1>

 

 

        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

 

 

                              <div id="feature_list">

                                        <ul id="tabs">

                                                  <li>

                                                            <a href="javascript:;">

                                                            <img src="images/icons/ts_star_logo.png" />

                                                                      <h3>Complete Menu Design</h3>

                                                                      <span>Complete with our well-known Fast Bar Page </span>

                                                            </a>

                                                  </li>

                                                  <li>

                                                            <a href="javascript:;">

                                                                      <img src="images/icons/ts_star_logo.png" />

                                                                      <h3>Kitchen Printing with ease</h3>

                                                                      <span>Top of the line printing systems</span>

                                                            </a>

                                                  </li>

                                                  <li>

                                                            <a href="javascript:;">

                                                            <img src="images/icons/ts_star_logo.png" />

                                                                      <h3>VPEN Monitor Systems</h3>

                                                                      <span>HD Screens, Bump Bars, We can do it all!</span>

                                                            </a>

                                                  </li>

                                        </ul>

                              <ul id="output">

                                                  <li>

                                                            <img src="images/feature_slider/menu-sample2.jpg" />

                                                            <a href="menu.html">Menu Gallery</a>

                                                  </li>

                                                  <li>

                                                            <img src="images/feature_slider/tmu220.jpg" />

                                                            <a href="print.html">Printing Gallery</a>

                                                  </li>

                                                  <li>

                                                            <img src="images/feature_slider/kds_hnet.jpg" />

                                                            <a href="vpen.html">VPEN Gallery</a>

                                                  </li>

                                        </ul>

 

 

                              </div>

          </div>

 

 

         

          <p>Our Mission – To ensure your restaurant, bar, café, diner, or eatery operates smoothly. Streamline your workflow by providing the latest, most up-to-date technology the industry has to offer. Maximize your profits with a personalized POS system that works for you and not against you. Ease your stress with the quickest, most reliable, 24-hour technical support in the area. Train your staff in person with one-on-one classes taught by one of our certified staff.</p>

        <!-- InstanceEndEditable --></div>

       

        <div id="footer">

                   <p class="footer-text">All Rights Reserved - Tahoe Systems - 2012</p>

        </div>

           

   </div>

 

 

</div>

  

</body>

<!-- InstanceEnd --></html>

 

 

featureList.js

/*

* FeatureList - simple and easy creation of an interactive "Featured Items" widget

* Examples and documentation at: http://jqueryglobe.com/article/feature_list/

* Version: 1.0.0 (01/09/2009)

* Copyright (c) 2009 jQueryGlobe

* Licensed under the MIT License: http://en.wikipedia.org/wiki/MIT_License

* Requires: jQuery v1.3+

*/

;(function($) {

          $.fn.featureList = function(options) {

                    var tabs          = $(this);

                    var output          = $(options.output);

 

 

                    new jQuery.featureList(tabs, output, options);

 

 

                    return this;

          };

 

 

          $.featureList = function(tabs, output, options) {

                    function slide(nr) {

                              if (typeof nr == "undefined") {

                                        nr = visible_item + 1;

                                        nr = nr >= total_items ? 0 : nr;

                              }

 

 

                              tabs.removeClass('current').filter(":eq(" + nr + ")").addClass('current');

 

 

                              output.stop(true, true).filter(":visible").fadeOut();

                              output.filter(":eq(" + nr + ")").fadeIn(function() {

                                        visible_item = nr;

                              });

                    }

 

 

                    var options                              = options || {};

                    var total_items                    = tabs.length;

                    var visible_item          = options.start_item || 0;

 

 

                    options.pause_on_hover                    = options.pause_on_hover                    || true;

                    options.transition_interval          = options.transition_interval          || 5000;

 

 

                    output.hide().eq( visible_item ).show();

                    tabs.eq( visible_item ).addClass('current');

 

 

                    tabs.click(function() {

                              if ($(this).hasClass('current')) {

                                        return false;

                              }

 

 

                              slide( tabs.index( this) );

                    });

 

 

                    if (options.transition_interval > 0) {

                              var timer = setInterval(function () {

                                        slide();

                              }, options.transition_interval);

 

 

                              if (options.pause_on_hover) {

                                        tabs.mouseenter(function() {

                                                  clearInterval( timer );

 

 

                                        }).mouseleave(function() {

                                                  clearInterval( timer );

                                                  timer = setInterval(function () {

                                                            slide();

                                                  }, options.transition_interval);

                                        });

                              }

                    }

          };

})(jQuery);

 

 

 

featured.css

#feature{

font-family: "Trebuchet MS",Verdana,Arial,sans-serif;

font-size: 14px;

line-height: 1.6;

width: 750px; /* This is the width  */

margin: 25px auto; /* margin top/bottom and centering  */

padding: 20px; /* Padding inside */

background: #FFF;/* Background color  */

border: 1px solid #CCC; /* border around  */

}

 

 

#feature h1 { margin: 0; }

 

 

 

 

#feature p{ margin: 0; padding: 7px 0; }

 

 

.clear
{ clear: both; line-height: 1px; font-size: 1px; }

 

 

#feature a{ outline-color: #888;}

 

 

#feature h3 { margin: 0;padding: 7px 0 0 0;




font-size: 16px; text-transform: uppercase;




}





ul#tabs li a h3{ color:#F60; margin-bottom: 5px; ; }



 

 

div#feature_list{

width: 750px; height: 240px;

overflow: hidden; position: relative;

}



div#feature_list ul {


position: absolute;top: 0;

list-style: none;

padding: 0;margin: 0;

}

 

 

ul#tabs {


left: 0;

z-index: 2;

width: 320px;

}

 

 

ul#tabs li { font-size: 12px; font-family: Arial; }

 

 

ul#tabs li img {


padding: 5px; border: none; margin: 0px 10px 0 0;

float: left;

}

 

 

ul#tabs li a{

color: #222;

text-decoration: none;

display: block;

padding: 10px;

height: 60px;

outline: none;

}

 

 

ul#tabs li a:hover { color:#822B00; }

 

 

ul#tabs li a.current {


background:url(../images/feature-tab-current.png);

color: #FFF;

}

 

 

ul#tabs li a.current:hover {


text-decoration: none;

cursor: default;

}

 

 

ul#output {


right: 0;

width: 460px; height: 240px;

position: relative;

}

 

 

ul#output li {


position: absolute;

width: 460px; height: 240px;

}

 

 

ul#output li a {


position: absolute;

bottom: 10px; right: 10px;

padding: 8px 12px;

text-decoration: none;

font-size: 11px;

color: #FFF;

background: #000;

-moz-border-radius: 5px;

}

 

 

ul#output li a:hover { background:#B33A00; }

 

 

 

and finally styles.css

 

/* CSS Document */

 

 

 

 

 

 

/* Color Legend */

 

 

 

 

/* Reset */

 

 

html, body { margin; 0; padding: 0; border: 0; background: transparent; font-size:10px; }

 

 

div, span, article, aside, footer, header, hgroup, nav, section,

h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li,

table, tr, th, td, tbody, tfoot, thead {

          margin: 0;

          padding: 0;

          border: 0;

          verticle-align: baseline;

          background: transparent; }

 

img                    {margin: 0; padding: 0; border: 0; }

 

 

table, tr, th, td, tbody, tfoot, thead {

          margin: 0; padding: 0; border: 0;

          verticle-align: baseline;

          background: transparent; }

 

table {border-collapse: collapse; border-spacing: 0; }

 

 

input, select, textarea, form, fieldset {

          margin: 0; padding: 0; border: 0; }

 

article, aside, dialog, figure, footer, header, hgroup, nav, section {

          display:block; }

 

h1, h2, h3, h4, h5, h6, p, li, blockqutoe, td, th, a, caption, em, strong, strike {

          font-family: Arial, Helvetica, sans-serif;

          font-size:100%;

          font-weight: normal;

          font-style: normal;

          line-height: 100%;

          text-indent: 0;

          text-decoration: none;

          text-align: left;

          color: #000; }

 

ol, ul, { list-style: none; }

 

 

 

 

 

 

/* Global */

 

 

html          {          }

 

 

body          {          background-color:#E8DDCA;

                              background-image:url(../images/background/roiBody_11.p ng);

                              background-repeat:no-repeat;

                              background-attachment:fixed; }

 

 

 

 

 

 

 

 

/* Headings */

 

 

h1, h2, h3, h4, h5, h6 { font-weight: bold; }

 

 

h1 { font-size:24px; color: #C60 ;

                    padding-bottom: 15px; border-bottom: 1px #ccc solid; margin-bottom: 15px; }

h2 { font-size: 20px; }

h3 {font-size: 16px; margin-bottom: 5px; }

h4 {font-size: 14px; }

h5 {font-size: 14px; }

h6 {font-size: 14px; }

 

 

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img, {margin: 0; }

 

 

 

 

 

 

/* Text Elements */

 

 

p                                        { color:#000; font-size: 12px; line-height: 150%;

                                                  margin: 15px 0px; }

p. left                              {margin: 1.5em 1.5em 1.5em 0; padding: 0; }

p. right                     {margin: 1.5em 0 1.5em 1.5em; padding: 0; }

 

 

a                                        {          }

a:link                              {color: #00f; }

a:visited                    {color: #0f0; }

a:active                    {color: #000; }

a:focus                              {color: #666; }

a:hover                              {color: #f00; }

 

 

blockquote                    {color: #000; font-size: 12px; }

 

 

strong                              { font-weight: bold; }

em                                         {font-style: italic; }

 

 

/* Images */

 

 

.image-frame          { padding: 10px; border: 1px #ccc solid; margin: 10px; }

 

 

/* Lists */

 

 

ul                                        {          }

 

 

ol                                        { list-style-type:decimal; }

 

 

ul li                              {color: #000; font-size: 12px; }

 

 

ol li                              {color: #000; font-size: 12px; }

 

 

dl                                        {          }

 

 

dt                                        {          }

 

 

dd                                        {          }

 

 

 

 

 

 

/* Tables */

 

 

table                              { width: 100%; }

 

 

tr                                         {          }

 

 

.odd                              { background-color: #eee; }

 

 

.even                              { background-color: #fff; }

 

 

th                                         { font-weight:bold; }

 

 

thead, th                    { background: #ccc; }

 

tbody                              {          }

 

 

th,td,caption           {          }

 

 

caption                     {          }

 

 

tfoot                              {          }

 

 

.tfooter                    { background-color:#ccc; text-align: center; font-style: italic;

}

 

 

caption                              { background-color: #efefef;

}

 

 

 

 

 

 

/* Miscelaneous */

 

 

sup, sub                    {line-height: 0; }

 

 

abbr, acronym          { border-bottom: dotted #666; }

 

 

address                              {          }

 

 

del                                        {background: #ffcece; color: #f00; }

 

 

code, pre                    { background-color:#ff9; padding: 2px 0px; margin: 4px 25px;

                                                  font-family: "Courier New", Courier, monospace; font-size: 12px; font-weight:bold

}

 

 

/* Containers */

 

 

#outer                              { width:960px; margin:0 auto; background-color:#FFF; }

 

 

#wrapper                    { width:900px; margin:0 auto; background-color:#FFF; }

 

 

#logo                              { margin:30px 0; float: left; }

 

 

#social-media-icons                     { float:right;                               }

#social-media-icons ul li           { display: inline;                     }

#social-media-icons ul                    { margin-top: 40px;           }

 

 

#topnav                                        { clear: both; }

#topnav ul                              { border-top: 1px #000 solid; border-bottom: 1px #000 solid;

                                                            margin: 20px 0; padding: 10px 0; }

#topnav ul li                    { display: inline          }

#topnav ul li a                    { padding: 0 15px;          }

 

 

#topnav          a:link                              {color: #000; }

#topnav          a:visited                    {color: #000; }

#topnav          a:active                    {color: #000; }

#topnav          a:focus                              {color: #666; }

#topnav          a:hover                              {color: #F90; }

 

 

#banner                                        { margin-bottom: 30px;           }

 

 

#slider                                        { margin-bottom: 30px; }

 

 

#content                              { width: 650px; float: left;          }

 

 

#content-fullwidth          { width: 100%; }

 

 

#rightside                              { width: 200px; float: right;          }

 

 

#footer                                        { clear: both; margin-top: 20px 0; border-top: 1px #ccc solid;          padding-bottom: 20px; }

 

 

 

 

#box1          { width: 250px; float: left; margin: 25px; 

                              border-top: 15px #666 solid; background-color:#EEE;          }

 

 

#box2          { width: 250px;          float: left; margin: 25px;

                              border-top: 15px #3E5838 solid; background-color:#EEE;          }

 

 

#box3          { width: 250px;          float: left; margin: 25px;

                              border-top: 15px #386165 solid; background-color:#EEE;          }

 

 

#box1 h3, #box2 h3, #box3 h3 { margin: 20px 10px 10px 10px; }

#box1 p, #box2 p, #box3 p { margin: 5px 10px 10px 10px; }

 

 

#box4          {                    }

 

 

#box5          {                    }

 

 

#box6          {                    }

 

 

 

 

/* Layout Extra */

 

 

 

 

 

 

 

 

/* Navigation Extra */

 

 

 

 

 

 

/* Forms */

 

 

form ol { list-style-type:none; }

 

 

form           { text-align:left; margin:20px;          }

 

 

label           {

                    float: left; width: 150px; margin-top:5px;

                    text-align:right; display:block; background:none; font-weight:bold;

                    }

 

submit          { background:none;           }

 

 

input           {

                    width: 280px; margin:0 0 16px 10px;

                    border:1px #bbb solid; padding:5px; background:none;

                    }

 

input:focus, textarea:focus          { background-color:#FF9; }

 

 

textarea {

                    width: 280px; height: 150px; margin:0 0 16px 10px;

                    border:1px #bbb solid; padding:5px; background:none;

                    }

 

 

select { margin-bottom:20px;          }

 

.month { margin-left:155px;          }

 

 

.submit {

                    width:90px; height:25px;

                    margin-left:160px;

                    font-size:12px;

                    }

 

 

br                    { clear: left;           }

 

 

.clear          { clear:both; }

 

 

 

 

/* Miscelaneous */

 

 

.popup-link                    { font-size: 12px; margin: 5px 10px; display:block; }

 

 

.date                              { font-weight: bold; color: #C60; margin-bottom: 3px; }

 

 

.copyright-text { font-size:80%; font-style: italic; color: #333; }

.footer-text          { font-size:12px; font-style: normal; color: #000; text-align: center; }

 

 

.title                              { font-size:18px; font-weight: bold; color: #333; }

.subtitle                    { font-size:14px; font-style: italic; color: #333; }

 

 

.artist                     { font-size:16px; font-weight: bold; color: #333; }

.author                              { font-size:14px; font-weight: bold; color: #555; }

.editor                              { font-size:14px; font-style: italic; color: #555; }

 

 

.pub-date                    { font-size:10px; font-style: italic; color: #555; }

.article-date          { font-size:10px; font-style: italic; color: #555; }

.location                    { font-size:10px; font-style: italic; color: #555; }

 

 

.float-right          { float:right; }

.float-left                    { float:left; }

.clear                              { clear:both; }

 

 

.hide                              { display:none; }

.block                              { display:block; }

.inline                              { display:inline; }

 

 

.first                              { font-weight:bold; }

.last                              { font-weight:bold; }

.left                              { font-weight:bold; text-align:left; }

.right                              { font-weight:bold; text-align:right; }

 

 

.added                              { background:#D7D7FF; }

.removed                    { background:#FFCECE; color:#f00; }

.changed                    { background:#FFB; }

 
Replies

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points