Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Images not displaying in scrolling picture show

    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;}

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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)

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    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. The website is http://thundervalleyranch.net.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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.

  • Users who have thanked SB65 for this post:

    mdhensley5 (05-29-2012)

  • #5
    New to the CF scene
    Join Date
    May 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    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.

    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.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Ah, guess you're on a Linux server then - which is case sensitive for filenames.

  • Users who have thanked SB65 for this post:

    mdhensley5 (06-18-2012)

  • #7
    New to the CF scene
    Join Date
    May 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Ah, guess you're on a Linux server then - which is case sensitive for filenames.
    Yes, I think we are. Thanks again!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •