El tema es que estoy haciendo una slide con el jquery y cuando pongo las imagenes adentro del div las imagenes se ven como un poco corridas hacia abajo a la derecha, por lo que se pierde una parte. Aca les dejo el codigo a ver si pueden ver algun error. Saludos!
Código HTML:
</head> <body> <div id="Element"> <div id="s3slider"> <ul id="s3sliderContent"> <li class="s3sliderImage"> <img src="imgRotator/images/sliderImages/handle.jpg" /> <span class="top">Lorem ipsum dolor si lorum impsum donpretium volutpat cursus. Nunc sed diam erat, hendrerit commodo enim.</span> </li> <li class="s3sliderImage"> <img src="imgRotator/images/sliderImages/hills.jpg" /> <span class="top">Lorem ipsum dolor si lorum impsum donpretium volutpat cursus. Nunc sed diam erat, hendrerit commodo enim.</span> </li> <li class="s3sliderImage"> <img src="imgRotator/images/sliderImages/lake.jpg" /> <span class="top">Lorem ipsum dolor si lorum impsum donpretium volutpat cursus. Nunc sed diam erat, hendrerit commodo enim. </span> </li> <li class="s3sliderImage"> <img src="imgRotator/images/sliderImages/salad.jpg" /> <span class="top">Lorem ipsum dolor si lorum impsum donpretium volutpat cursus. Nunc sed diam erat, hendrerit commodo enim. </span> </li> <li class="clear"></li> </ul> </div> </div> </body> </html>
Código HTML:
#Element { height: 300px; width: 950px; margin-right: auto; margin-left: auto; border: medium solid #333; } #s3slider { overflow: hidden; position: relative; list-style-type: none; height: 300px; width: 950px; } #s3sliderContent { height: 300px; width: 950px; margin-left: 0px; position: absolute; top: 0px; list-style-type: none; } .s3sliderImage { float: left; display: none; position: relative; } .clear { clear: both; } .s3sliderImage span { font-family: Arial, Helvetica, sans-serif; font-size: 15px; padding-top: 10px; padding-bottom: 10px; padding-right: 13px; padding-left: 13px; background-color: #000; color: #FFF; display: none; width: 924px; position: absolute; opacity: 0.7; -moz-opacity: 0.7; filter: alpha (opacity=70) } .top { height: 60px; width: 924px; left: 0px; top: 0px;
GRACIAS!!!!