4 Replies Latest reply: Jul 16, 2012 11:23 AM by sturmgeshutz RSS

    Having problem with banner slider

    sturmgeshutz

      www.webslingerz.ca

       

      Hey gang, trying to figure out why my banner isn't working. It is supposed to fade an image in every few seconds (i am just using the same image for now) with a drop down box over the image. Any help would be grateful. My validation errors are;

       

      Line 102, Column 34: document type does not allow element "div" here; assuming missing "li" start-tag

                     <div class="clear sliderImage"></div>

       

       

      Line 103, Column 7: end tag for "li" omitted, but OMITTAG NO was specified

                </ul>

      You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

       

      Line 102, Column 4: start tag was here

                     <div class="clear sliderImage"></div>
        • 1. Re: Having problem with banner slider
          cdeatherage Community Member

          Without seeing the actual code to your page, we can only guess, and mine (based on the snippets you've provided above) is that you have not completely coded your slider container. I suspect it should look something like this:

           

               <div class="clearSliderImage">

                    <ul>

                         <li><img src="Images/YourImage_01.jpg" alt="description"/></li>

                         <li><img src="Images/YourImage_02.jpg" alt="description"/></li>

                         <li><img src="Images/YourImage_03.jpg" alt="description"/></li>

                    </ul>

               </div>

           

          Note I removed the space from your class="clear sliderImage" designation. Spaces are never a good idea for naming conventions.  Better to use all lower case, a mix of upper and lower case (as I have  done), and the hyphen or underscore to assist in clarity.

           

          Hope this helps.

           

          Chris

          • 2. Re: Having problem with banner slider
            sturmgeshutz Community Member

            Thanks Chris, here is my css for the slider;

             

            /* Color Legend */

             


            #slider {
                width: 900px; /* important to be same as image width */
                height: 300px; /* important to be same as image height */
                position: relative; /* important */
            overflow: hidden; /* important */
            text-align:left;

            }

            #sliderContent {
                width: 900px; /* important to be same as image width or wider */
                position: absolute;
            top: 0;
            margin-left: 0;
            }

            .sliderImage {
                float: left;
                position: relative;
            display: none;
            }

            .sliderImage span {
                position: absolute;
                padding: 10px;
                width: 300px;  /* This is the width of the caption box  */
            height:300px; /* This is the height of the caption box  */
                background-color: #000;  /* This sets the background color of the semi transparent box */
                /* If you do not want the transparent content field to appear, change all opacity values to 0 */
            filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7;
            font-family:Arial, Helvetica, sans-serif;
            font-size:12px;
            line-height:150%;
                color: #fff; /* This is the color of the text in the caption box */
                display: none;
            }

            .sliderImage span strong {
            color:#FF9428;  /* This is the color of the title text in the caption box */
            font-size: 22px; /* This is the font size of the title text in the caption box */
            line-height:300%;
            }

            .clear { clear: both; }


            .top { top: 0; left: 600px; }  /* This sets the upper left corner of the caption box */

            .bottom { bottom: 0; left: 0; } /* This sets the lower left corner of the caption box */

            #slider ul   { list-style-type: none;}
            #slider ul li  { margin-left:0px; }

            • 3. Re: Having problem with banner slider
              osgood_ CommunityMVP

              Change media="print" to media="screen" as below:

               

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

              • 4. Re: Having problem with banner slider
                sturmgeshutz Community Member

                Osgood, I could kiss you...but I sincerely hope you are woman, no offense.