CODEWITHSUNDEEP
phpjqueryhtmlcss
Harrison Howard
Harrison Howard

Reputation: 173

HTML Text Error in jQuery SlideShow

I have been working on a slideshow for my school website, you can see that here. Although the text that appears under the photo, the two lines are two closed together, and the css that I have used hasn't worked.

The CSS is:

#slider {
width: 1047px; /* important to be same as image width */
height: 350px; /* important to be same as image height */
max-height: 350px;
position: relative; /* important */
overflow: hidden; /* important */
}
#sliderContent {
width: 1047px; /* 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;
font: 16px/16px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 1047px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear {
clear: both;
}
.sliderImage span strong {
font-size: 20px;
}

p.sliderDesc{
padding-top: 5px;
}

.top {
top: 0;
left: 0;
}
.bottom {
bottom: 0;
left: 0;
}
ul { list-style-type: none;}

And the HTML for the slider is: 

<div id="slider">
    <ul id="sliderContent">
        <li class="sliderImage">
            <a href=""><img src="slider_images/image1-5.jpg" alt="1" /></a><!--Image     Courtesy Of Wikipedia |     http://upload.wikimedia.org/wikipedia/commons/e/e1/Little_Rock_Central_High_School.jpg-->
            <span class="bottom"><strong>Welcome to Beautiful Little Rock Central High!    </strong><br />Content text...</span>
        </li>
        <li class="sliderImage">
            <a href=""><img src="slider_images/image2.jpg" alt="2" /></a>
            <span class="bottom"><strong>National Historic Site & Museum</strong><br            /BLAH!!!</span>
        </li>
        <li class="sliderImage">
            <img src="slider_images/image3-5.jpg" alt="3" />
            <span class="bottom"><strong>No state shall make or enforce any law which shall abridge the privileges or immunities of citizens of the United States.</strong><br />Fourteenth Amendment </span>
        </li>
        <li class="sliderImage">
            <img src="slider_images/image4-5.jpg" alt="4" />
            <span class="bottom"><strong>Title text 2</strong>
                <br />
                <p class="sliderDesc">Content text...</p>
            </span>
        </li>
        <!--<li class="sliderImage">
            <img src="slider_images/410/5.jpg" alt="5" />
            <span class="bottom"><strong>Title text 2</strong><br />Content text...</span>
        </li>-->
        <div class="clear sliderImage"></div>
    </ul>
</div>
<!-- // slider -->

Thanks! I hope this is a simple fix. Thanks.

Upvotes: 0

Views: 158

Answers (1)

Harrison Howard
Harrison Howard

Reputation: 173

Okay I found the solution to this problem, apparently the quick and easy solution is to make a class that I called "sliderDesc" and I used it in this way:

                 <span class="bottom"><strong>National Historic Site & Museum</strong><br /><p class="sliderDesc">Content text...</p></span>

And that resulted in this: lrch.harrisonbh.com

Upvotes: 1

Related Questions