...
PDA

Images not displaying in scrolling picture show

mdhensley5
05-29-2012, 02:04 PM
Can someone please help me fix this. I'm a novice trying to edit a template to do what I need it to do. I'm not sure if this is an HTML or CSS problem. The pictures display perfectly in Dreamweaver, but do not appear on the web site. Here is the code I'm working with. Thank you for any help you can provide.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Thunder Valley Ranch</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<!-- Begin JavaScript -->

<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="lib/jquery.coda-slider-2.0.js"></script>
<!-- Initialize each slider on the page. Each slider must have a unique id -->
<script type="text/javascript">
$().ready(function() {
$('#coda-slider-2').codaSlider({
autoSlide: true,
autoSlideInterval: 6000,
autoSlideStopWhenClicked: true

});
});
</script>
<!-- End JavaScript -->
</head>
<body>

<div id="main">
<!-- header begins -->
<div id="header">

<div id="logo">

<a href="#">Thunder Valley Ranch </a>
<h2><a href="#"><small>Breed to Succeed </small></a></h2>
</div> <div id="buttons">
<a href="index.html" class="but" title="">Home</a><div class="but_razd"></div>
<a href="#" class="but" title="">Cattle</a><div class="but_razd"></div>
<a href="#" class="but" title="">About Us</a><div class="but_razd"></div>
<a href="#" class="but" title="">Contact&nbsp;Us</a>
</div>

</div>
<!-- header ends -->
<div class="top">

<div class="coda-slider-wrapper">
<div class="coda-slider preload" id="coda-slider-2">
<div class="panel">
<div class="panel-wrapper">
<img src="images/top.jpg" alt="" title="" />
</div>
</div>

<div class="panel">
<div class="panel-wrapper"><img src="images/header2.jpg" alt="" title="" /></div>
</div>

<div class="panel">
<div class="panel-wrapper">
<img src="images/header3.jpg" alt="" title="" />
</div>
</div>

<div class="panel">
<div class="panel-wrapper">
<img src="images/header4.jpg" alt="" title="" />
</div>
</div>


</div><!-- .coda-slider -->

</div>
</div>




<div style="height: 25px"></div>
<div style="clear: both"></div>
<div style="height: 10px"></div>


<!-- bottom begin -->
<div class="line"></div>
<div style="height: 25px"></div>
<div style="clear: both"></div>
<div style="height: 10px"></div>
<div id="bottom">
<div id="b_col1">
<h1>Services</h1>
<div style="height:10px"></div>
<ul class="spis_bot">
<li><a href="bullsforsale.html">Bulls For Sale </a></li>
<li><a href="#">Bulls For Breeding </a></li>
<li><a href="#">Cows For Sale</a></li>
<li><a href="heifersforsale.html">Heifers For Sale</a></li>
<li><a href="#">Semen For Sale </a></li>
</ul>
</div>
<div id="b_col2">
<h1>Contact Information</h1>
<div style="height:20px"></div>
<div style=" line-height: 25px">
859 Erastus Church Rd.<br />
Commerce, GA 30530<br />
Phone: 1(706) 335-00220<br />
Cell: 1(706) 296-3979<br />
thundervalleyran@windstream.net
</div>
</div>
<div id="b_col3">
<h1>Quick Navigation</h1>
<div style="height:15px"></div>
<table border="0">
<tr>
<td style="width: 76px;"><a href="#" class="a_qn">Home</a></td>
<td><a href="#" class="a_qn">Contact us</a></td>
</tr>
<tr>
<td ><a href="#" class="a_qn">Cattle</a></td>

</tr>
<tr>

<td><a href="#" class="a_qn">About us</a></td>
</tr>
</table>
</div>
<div id="b_col4">
<h1>Follow Us</h1>
<div style="height:15px"></div>
<ul class="spis_fu">

<li><img src="images/fu_i3.gif" class=" fu_i" alt="" /><a href="#">RSS Feed</a></li>

</ul>
</div>
<div style="clear: both;"></div>
<div style="height:10px"></div>
</div>
<!-- bottom end -->

<div style="height:25px"></div>
<div class="line"></div>
<!-- footer begins -->
<div id="footer">
<p>Copyright 2012. Thunder Valley Ranch. All rights reserved. </p>
</div>
<!-- footer ends -->
</div>


</body>
</html>


*
{
border: 0;
margin: 0;
}
img
{
border: 0px;
}

.img{
padding-right: 30px;
float: left;}

body{
font: 12px Arial, Helvetica, sans-serif;
background: url(images/bg.gif);
line-height: 18px;
color: #585858;
}


#main {
width: 950px;
margin: 0px auto;
padding: 0px 45px 0px 45px;
background:url(images/main.png) right repeat-y;}

#header {
height: 102px;
}

.line { border-top: 1px solid #585858;}

#logo {
padding: 40px 0px 0px 0px;
width: 250px;
float:left;
}

#logo H2 a{

font-family: Arial, Helvetica, sans-serif;
color:#038760;
font-size:18px;
font-weight: bold;
background: no-repeat;
}

#logo a {
text-decoration: none;
font-size: 14px;
color: #585858;
font-weight: bold;
}

#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight:100;
text-align:left;
}

#buttons{
text-align:center;
height: 42px;
width: 517px;
padding-left: 0px;
background: url(images/buttons.png) left top no-repeat;
padding: 38px 0px 0px 0px;
float: right;
}

#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: 100;
display: block;
float: left;
text-decoration: none;
color: #000000;
text-align: center;
height: 30px;
text-transform: uppercase;

}

.but {
}

.but_razd { height: 10px;
width: 30px;
float: left;}

#buttons .but:hover {
background: url(images/but_hover.png) center center no-repeat;
color:#038760;
text-decoration: underline;
}

.but_t {background: url(images/but_hover.gif) center bottom no-repeat;}



.top { height:420px;
}
}

.top_left { float: left;
width: 576px;
height: 240px;
}

.top_right { float: right;
width:284px;
height: 243px;
background: url(images/top_right.png);
padding: 30px 40px 20px 40px;}





#content{
padding: 0px 0px 0px 0px;
background-color: #FFFFFF;
background-image: none;
}


.box {
float: left;
width: 172px;
height: 170px;
border: 1px solid #585858;
padding: 15px 15px 15px 15px;
}


.img_l { float:left;
margin: 3px 14px 3px 0px;
}

.img_r { float: right;
margin: 9px 10px 3px 10px;
}


h1{
font-size:24px;
font-weight: 100;
color: #ffffff;
text-align: left;
padding: 0px 0px 0px 0px;
line-height:normal;
}

h2{
font-size:18px;
font-weight: 100;
color: #000000;
text-align: left;
padding: 0px 0px 0px 0px;
line-height:normal;
}

h3{
font-size:24px;
font-weight: 100;
color: #000000;
text-align: left;
padding: 0px 0px 0px 0px;
line-height:normal;
}

.more {
font-size:12px;
color: #ffffff;
text-decoration: underline;
}

.more:hover {
font-size:12px;
text-decoration: none;
}

.more2 {
font-size:12px;
color: #038760;
text-decoration: underline;
}

.more2:hover {
font-size:12px;
text-decoration: none;
}

.span_cont { color: #038760;
font-weight: bold; }






#bottom {
background: width: 940px;
margin: 0px auto;


}

#bottom h1 {
color: #000000;
font-size: 18px;
font-weight: 100;
text-align: left;
padding: 15px 0px 0px 0px;
}

#b_col1 {
width: 144px;
float: left;
margin-left: 16px;
}
#b_col2 {
width: 208px;
float: left;
margin-left: 73px;
}
#b_col3 {
width: 158px;
float: left;
margin-left: 92px;
text-align: left;
}

#b_col4 {
width: 165px;
float: left;
margin-left: 80px;
text-align: left;
}

.spis_bot {
list-style:none;
padding: 0px 0px 0px 0px;}

.spis_bot li {
padding: 7px 0px 0px 18px;
background: url(images/spis_bot.gif) 0px 12px no-repeat;
}

.spis_bot a {
color:#585858;
text-decoration:none;
font-weight: 100;
display: block;
font-weight: 100;}
.spis_bot a:hover {
text-decoration: underline;
}

.fu_i {
padding: 0px 14px 0px 0px;
vertical-align: middle ;
}

.spis_fu {
list-style:none;
padding: 0px 0px 0px 0px;}

.spis_fu li {
padding: 8px 0px 2px 0px;
background: none;
}

.spis_fu li a {
color:#585858;
text-decoration: none;
}

.spis_fu li a:hover {
text-decoration: underline;
}


.a_qn {
font-size:12px;
color: #038760;
font-weight:bold;
text-decoration: none;
}

.a_qn:hover {
font-size:12px;
text-decoration: underline;
}

td { height: 25px;}

#footer{
height: 47px;
font-size: 10px;
color: #000000;
text-align: center;
padding: 13px 0px 0px 0px;
background: url(images/footer.jpg) 0px 15px no-repeat;
}

#footer a{
color: #000000;
font-size: 10px;
text-decoration: none;
}

#footer a:hover{
color: #000000;
font-size: 10px;
text-decoration: underline;
}

.lh {
line-height: 22px;
}




/** Contents **/


#contents ul.images {
display: inline-block;
list-style-type: none;
width: 900px;
margin: 0 0 0 0px;
}
#contents ul.images li {
float: left;
background-position: 0 0;
height: 126px;
width: 214px;
margin: 5px 5px 5px 5px;
padding: 0px 0px 0px 0px;
}

#contents .img-gallery {
color: #000000;
display: block;
font-size: 11px;
line-height: 20px;
margin-left: 40px;
}



/** IE6 **/
#background {
_height: 1440px;
}


/*
Header Scroller
*/

/*
jQuery Coda-Slider v2.0 - http://www.ndoherty.biz/coda-slider
Copyright (c) 2009 Niall Doherty
This plugin available for use in all personal or commercial projects under both MIT and GPL licenses.
*/

/* Insignificant stuff, for demo purposes */

.panel h2.title { margin-bottom: 10px }
noscript div { background: #ccc; border: 1px solid #900; margin: 20px 0; padding: 15px }

/* Most common stuff you'll need to change */

.coda-slider-wrapper { padding: 0px; padding-left: 20px }
.coda-slider { background: none}

/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
.coda-slider-no-js .coda-slider { height: 382px; overflow: hidden !important; padding-right: 20px }

/* Change the width of the entire slider (without dynamic arrows) */
.coda-slider, .coda-slider .panel { width: 995px; }

/* Change margin and width of the slider (with dynamic arrows) */
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 887px }
.coda-slider-wrapper.arrows .coda-slider { margin: 0px }

/* Arrow styling */
.coda-nav-left {padding-top: 170px; padding-right: 10px;}
.coda-nav-right {padding-top: 170px; padding-left: 10px;}
.coda-nav-left a { background: url(images/top_left_str.png) no-repeat; color: #fff; width: 27px; height: 340px; text-indent: -9000em;}
.coda-nav-right a { background: url(images/top_right_str.png) no-repeat; color: #fff; width: 27px; height: 340px; text-indent: -9000em}

/* Tab nav */
.coda-nav ul li a.current { background: #39c }

/* Panel padding */
.coda-slider .panel-wrapper { padding: 0px }

/* Preloader */
.coda-slider p.loading { padding: 20px; text-align: center }

/* Don't change anything below here unless you know what you're doing */

/* Tabbed nav */
.coda-nav ul { clear: both; display: block; margin: auto; overflow: hidden }
.coda-nav ul li { display: none }
.coda-nav ul li a { background: #000; color: #fff; display: block; float: left; margin-right: 1px; padding: 3px 6px; text-decoration: none }

/* Miscellaneous */
.coda-slider-wrapper { clear: both; overflow: hidden }
.coda-slider { float: left; overflow: hidden; position: relative }
.coda-slider .panel { display: block; float: left }
.coda-slider .panel-container { position: relative }
.coda-nav-left, .coda-nav-right { float: left }
.coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }



/* ------------------------------------------------------------------------
DO NOT CHANGE
------------------------------------------------------------------------- */


div.pp_overlay {background: #000;display: none;left: 0;position: absolute;top: 0;width: 100%;z-index: 9500;}
div.pp_pic_holder {display: none;position: absolute;width: 100px;z-index: 10000;}
SB65
05-29-2012, 02:07 PM
A link to your page would be useful, as obviously the images aren't available otherwise.

Obvious question : have you uploaded the images to your server?

(PS: Easier to read if you wrap your code in # tags)
mdhensley5
05-29-2012, 02:12 PM
A link to your page would be useful, as obviously the images aren't available otherwise.

Obvious question : have you uploaded the images to your server?

(PS: Easier to read if you wrap your code in # tags)

Yes, the images have been uploaded to the images folder. :thumbsup: The website is http://thundervalleyranch.net.
SB65
05-29-2012, 02:30 PM
Your code contains links to images/top.jpg and images/header2.jpg to header4.jpg - but these aren't found by the browser.

I also get a not found on http://thundervalleyranch.net/images/top.jpg - so it looks like there's a problem somewhere with the path to your images.
mdhensley5
05-29-2012, 02:39 PM
Your code contains links to images/top.jpg and images/header2.jpg to header4.jpg - but these aren't found by the browser.

I also get a not found on http://thundervalleyranch.net/images/top.jpg - so it looks like there's a problem somewhere with the path to your images.

I didn't know that I could pull up the images with a direct url like that. :(

Using your advice, I was able to figure out the problem. :thumbsup:

In the images folder, the image name is top.JPG, not top.jpg. Didn't know that would make a difference. Thank you so much for your help. I had been looking at this for 3 days and pulling my hair out.
SB65
05-29-2012, 02:44 PM
Ah, guess you're on a Linux server then - which is case sensitive for filenames.
mdhensley5
05-29-2012, 02:54 PM
Ah, guess you're on a Linux server then - which is case sensitive for filenames.

Yes, I think we are. Thanks again!

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum