Aah. the frustration.

Hi
I'm working on a classroom project
we were given this company website to make on web page maker
i got a template from dotemplate.com
i downloaded the template and uploaded it directly then decided i will edit the content later.

so i added a conveyer belt java script to it in web page maker and saved and uploaded index.html
now the css file doesn't load so all the design elements are gone

this is the website
Web site

do i need to update the css file? Please help

here's a link to the free template I used-
Free online web templates generator

it doesn't have a conveyer belt script. I added it in web page maker. but now all the graphics are lost...

is there any new code i have to add into the css file?

Here's the css code

<style type="text/css">
/*----------Text Styles----------*/
.ws6 {font-size: 8px;}
.ws7 {font-size: 9.3px;}
.ws8 {font-size: 11px;}
.ws9 {font-size: 12px;}
.ws10 {font-size: 13px;}
.ws11 {font-size: 15px;}
.ws12 {font-size: 16px;}
.ws14 {font-size: 19px;}
.ws16 {font-size: 21px;}
.ws18 {font-size: 24px;}
.ws20 {font-size: 27px;}
.ws22 {font-size: 29px;}
.ws24 {font-size: 32px;}
.ws26 {font-size: 35px;}
.ws28 {font-size: 37px;}
.ws36 {font-size: 48px;}
.ws48 {font-size: 64px;}
.ws72 {font-size: 96px;}
.wpmd {font-size: 13px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;}
/*----------Para Styles----------*/
DIV,UL,OL /* Left */
{
margin-top: 0px;
margin-bottom: 0px;
}



html {
background: $bottomWrapper.bg.color;
margin:0 0 0 -1px;
padding:0;
overflow-Y: scroll;
}


body {
padding:0;
margin :0;
display:table;
width:100%;
}




#wrapper {
margin:0 auto ;
width:100%;
}

body {
background-color:#FFFFFF;
}

#wrapper {
border-top: 1px solid #ffffff;
}




#topBannerWrapper {
width:100%;
height:90px;
background-color:#FFFFFF;
background-image:url(images/css/topBannerWrapper-bg.jpg);
background-position:center top ;
background-repeat:repeat-x;
}



#topBanner {
width:920px;
margin:0 auto;
height:90px;
background-image:url(images/css/topBanner.jpg);
background-repeat:no-repeat;
}



#hmenuWrapper {
width:100%;
margin:0 auto ;
}

#hmenu {
position:relative;
top:30px;
float:right;
}



#hmenu ul {
list-style:none inside none;
margin:0;
padding:0;
text-transform:uppercase;
font-size:14px;
font-family:Arial,sans-serif;
}

#hmenu ul li {
float:left;
}

#hmenu ul li a {
border:0 none;
color:#555555;
display:block;
float:left;
font-size:14px;
font-weight:bold;
height:2em;
line-height:2em;
text-align:center;
padding:0 20px;
}


#hmenu ul li a:hover {
background-color:#000000;
color:#FFFFFF;
}

#hmenu ul li a:link {
text-decoration:none;
}

#hmenu ul li a:visited {
text-decoration:none;
}

#hmenu ul li a:active {
text-decoration:none;
}


#hmenu li#current a {
background-color:#000000;
color:#FFFFFF;
}



#topSlideshowWrapper {
width:100%;
height:300px;
background-color:#c0c0c0;
background-image:url(images/css/topSlideshowWrapper-bg.jpg);
background-position:center top ;
background-repeat:repeat-x;
}


#sliderContainer {
width: 920px;
margin:0 auto;
}


#slider1 {
width:100%;
height: 300px;
position: relative;
overflow: hidden; /* important */
}


#slider1 img {
padding: 0;
margin:0;
width:920px;
height:300px;
}


#slider1 a img { border:none }


#slider1Content {
margin:0;
padding:0;
height:300px;
font-size:0;
width:100%;
position: relative;
}


.slider1Image {
display:none;
float:left;
position:relative;
margin:0;
padding:0;
}

.slider1Image span {
position: absolute;
left:0;
font-family:Tahoma, Arial;
font-size:14px;
padding: 0px;
width:920px;
background-color:#c0c0c0;
color: #fff;
display: none;
z-index:20;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}


.slider1Image .bottom {
bottom: 0;
left: 0;
height: 70px;
}


#sliderLeftMask {
height:300px;
position:absolute;
top:0;
left:0px;
width:180px;
z-index:10;
background:url('images/css/sliderLeftMask.png') no-repeat scroll center center transparent;
}



#sliderRightMask {
height:300px;
position:absolute;
top:0;
left:740px;
width:180px;
z-index:10;
background:url('images/css/sliderRightMask.png') no-repeat scroll center center transparent;
}







#container {
margin:0 auto;
width:920px;
min-height:570px;
}




#content {
width:920px;
margin:0 auto ;
text-align:left;
}

#content p {
text-align:justify;
}





#main {
width:610px;
float:left;
margin-right:40px ;
}

#sidebar {
float:left;
width:270px;
}

.bloc h3 {
margin-top:10px;
}

.bloc {
padding:15px;
background-color:#EEEEEE;
}



#content a:link, #content a:visited {
color:#505050;
font-weight:bold;
}


#content p {
margin-top:10px;
text-align:justify;
}


.padd15 {
padding:15px;
}

.padd20 {
padding:20px;
}


body {
color:#444444;
font-family: 'Trebuchet MS', sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
text-transform: normal;
}

p {
letter-spacing: normal;
line-height: 1.7em;
}


h1 {
color:#000000;
margin:20px 0 10px 0;
clear:both;
}


h2 {
color:#000000;
margin:20px 0 10px 0;
clear:both;
}


h3 {
color:#000000;
margin:10px 0 5px 0;
clear:both;
}


a:link, a:visited {
color:#505050;
text-decoration:none;
}


a:hover {
text-decoration:underline;
}



#bottomWrapper {
background-color:#000000;
background-image:url(images/css/bottomWrapper-bg.png);
background-position:center top ;
background-repeat:repeat-x;
text-align:center;
color:#70806D;
text-align:center;
width:100%;
clear:both;
}


#bottomWrapper a:link, #bottomWrapper a:visited {
color:#e8ddcb;
}



#bottomWrapper a:hover{
color:#cdb380;
text-decoration:none;
}


#footer {
min-height:260px;
width:920px;
margin:0 auto;
background-color:#000000;
background-image:url(images/css/footer-bg.png);
background-position:center top ;
background-repeat:no-repeat;
}




.footer-last {
margin-right:0 !important;
clear:right;
}

.footer-one-third {
float:left;
margin:20px 100px 20px 0;
width:240px;
position:relative;
text-align:left;
overflow:hidden;
}

.footer-one-third h3 {
margin-top:10px;
}

.footer-one-third ul{
border-top:1px solid #0a0a0a;
padding:0 ;
}

.footer-one-third ul, .footer-one-third li {
list-style: none ;
margin-left:0 ;
}

.footer-one-third li {
border-bottom:1px solid #0a0a0a;
padding: 5px 0 ;
}



#bottom-links {
height:60px;
background:#000000 url('images/css/bottomLinks-bg.png') center top repeat-x;
}


a img {
border:none;
}


.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
</style>
 


woahhhh i had typed the url but the link came up. sorry about that.
anyway i reworked the whole thing
now having trouble getting the conveyor belt to work
please help me out
the site is up again

here's the code I added
<div id="js1" style="position:absolute; overflow:hidden; left:0px; top:710px; width:454px; height:216px; z-index:6">
<div id="c_js1" style="overflow:hidden;height:100%;width:100%;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="p1_js1" height="216" valign="middle" style="white-space: nowrap"><img border="0" src="images//alloy-cast-iron-casting.jpg" alt="" title="" hspace="5"><img border="0" src="images//cast-iron-castings1.jpg" alt="" title="" hspace="5"><img border="0" src="images//cast-iron-impeller.jpg" alt="" title="" hspace="5"><img border="0" src="images//valve-casting.jpg" alt="" title="" hspace="5"></td>
<td id="p2_js1" valign="middle" style="white-space: nowrap"></td>
</tr>
</table>
</div>

<script>
var speed=30
var i=0
var n=Math.floor(js1.offsetWidth/p1_js1.offsetWidth)
for (i=0;i<=n;i++)
{
p2_js1.innerHTML+=p1_js1.innerHTML
}
function m_js1()
{
if(c_js1.scrollLeft>=p1_js1.offsetWidth)
c_js1.scrollLeft-=p1_js1.offsetWidth
else
c_js1.scrollLeft++
}
var mm_js1=setInterval(m_js1,speed)
c_js1.onmouseover=function(){clearInterval(mm_js1)}
c_js1.onmouseout=function(){mm_js1=setInterval(m_js1,speed)}
</script></div>
 
DONE!

HEY GUYS

I did a bit of research online and fixed the problem.
Thanks a lot for helping

smile.png
smile.png



################################ END OF THREAD ###################################