1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

CSS image display

Discussion in 'Web Development' started by eric pistora, Sep 18, 2013.

  1. eric pistora

    eric pistora New Member

    Hello,
    I have a question regarding "slider" functions. It's the image function on home page that displays an image every few seconds.
    I replace the images with my own and nothing shows....except the little box with an "x".
    The function still works, but displays no images.

    I've checked all file types, image names, etc.
    This was the second time to happen for me, so I had to ask if anyone has had this happen.

    Do I need to specify in some particular file or specify within the image file to make it display?
    Thanks,
    Eric
     
  2. Geoff Tyrer

    Geoff Tyrer Member

    Can you provide more detail? For example the HTML and CSS so we can see the problem for ourselves.
     
  3. eric pistora

    eric pistora New Member

    Sure. The first section is CSS. I will provide the main part of the index file below it.
    I was told that it could be because the image files need to be replaced while in Photoshop.

    #slider {
    float: left;
    margin: 50px 0 0 50px;
    width: 400px; /* important to be same as image width */
    height: 200px; /* important to be same as image height */
    position: relative; /* important */
    background: url(images/templatemo_banner_image_bg.jpg) no-repeat;
    overflow: hidden;
    }
    #sliderContent {
    padding: 10px;
    width: 380px; /* important to be same as image width or wider */
    height: 180px;
    position: absolute;
    top: 0;
    margin-left: 0;
    }
    #sliderContent .sliderImage {
    float: left;
    position: relative;
    display: none;
    }
    .sliderImage span {
    position: absolute;
    font: 13px Arial, Helvetica, sans-serif;
    padding: 10px 15px;
    width: 350px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
    }
    .clea#sliderContent {
    clear: both;
    }
    #sliderContent .sliderImage span strong {
    font-size: 15px;
    }
    #sliderContent .top {
    top: 0;
    left: 0;
    }
    #sliderContent .bottom {
    bottom: 0;
    left: 0;
    }
    .left {
    top: 0;
    left: 0;
    width: 250px !important;
    height: 150px;
    }
    .right {
    right: 0;
    bottom: 0;
    width: 250px !important;
    height: 155px;
    }
    ul { margin: 0; padding: 0; list-style-type: none; list-style: none;}
    ul li { margin: 0; padding: 0; }



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Company Template, CSS Template, Free Web Template</title>
    <meta name="keywords" content="company template, free website templates, green color bar, CSS, HTML" />
    <meta name="description" content="Company Template (Green) is a free website template provided by templatemo.com" />
    <link href="css/templatemo_style.css" rel="stylesheet" type="text/css" />
    <link href="css/s3slider.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/s3Slider.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $('#slider').s3Slider({
    timeOut: 3000
    });
    });
    </script>
    <script language="javascript" type="text/javascript">
    function clearText(field)
    {
    if (field.defaultValue == field.value) field.value = '';
    else if (field.value == '') field.value = field.defaultValue;
    }
    </script>
    </head>
    <body>
    <div id="templatemo_site_title_bar_wrapper">
    <div id="templatemo_site_title_bar">
    <div id="site_title">
    <h1>
    <a href="http://www.templatemo.com" target="_parent">Company Template
    <span>free html/css layout</span></a>
    </h1>
    </div>

    <ul id="top_menu">
    <li class="first"><a href="#">Home</a></li>
    <li><a href="#">Sitemap</a></li>
    <li><a href="#">Contact</a></li>
    </ul>

    </div> <!-- end of site title bar -->
    </div> <!-- end of site title bar wrapper -->
    <div id="templatemo_banner_wrapper">
    <div id="templatemo_banner">

    <div id="slider">
    <ul id="sliderContent">
    <li class="sliderImage">
    <a href="http://www.templatemo.com" target="_blank"><img src="gallery/01.jpg" alt="1" /></a>
    <span class="bottom"><strong>Project 1</strong><br />Suspendisse turpis arcu, dignissim ac laoreet a, condimentum in massa.</span>
    </li>
    <li class="sliderImage">
    <a href="http://www.templatemo.com" target="_blank"><img src="gallery/02.jpg" alt="2" /></a>
    <span class="bottom"><strong>Project 2</strong><br />uisque eget elit quis augue pharetra feugiat.</span>
    </li>
    <li class="sliderImage">
    <a href="http://www.templatemo.com" target="_blank"><img src="gallery/03.jpg" alt="3" /></a>
    <span class="bottom"><strong>Project 3</strong><br />Sed et quam vitae ipsum vulputate varius vitae semper nunc.</span>
    </li>
    <li class="sliderImage">
    <a href="http://www.templatemo.com" target="_blank"><img src="gallery/04.jpg" alt="4" /></a>
     
  4. Geoff Tyrer

    Geoff Tyrer Member

    Hi Eric,

    The HTML was incomplete - can you post the rest of it please.