Buenas gente, este es mi primer mensaje. Estoy recien empezando con esto del diseño asi que seguro es una estupidez lo que voy a preguntar, pero bueh, para los que saben es un toque.
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> Y este es el css:
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!!!!