Imagen corrida...AYUDA!

nicolasmedina94 · #1 (**permalink**) 30/10/2010, 19:21

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!!!!

#2 (**permalink**) 31/10/2010, 06:08

Prueba a poner esto al principio del CSS:

Código CSS:

Ver original* {margin:0px;padding:0px;border:0px}

Ya dirás

nicolasmedina94 · #3 (**permalink**) 31/10/2010, 10:08

No me sigue apareciendo corrida la imagen. En un momento pense que era por el iconito de listado que corria la imagen, pero ya cambie el list-style a none y sigue pasando: alguna otra idea?

nicolasmedina94 · #4 (**permalink**) 31/10/2010, 12:06

Lo estoy haciendo devuelta paso a paso para ver donde esta el problema. El desplazamiento de la imagen con respecto al div parece ser producido por ponerlo en listas. Aca les paso el codigo mas simplificado a ver si se les ocurre algo.

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link href="imgRotator/css/Prueba.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="Elemento">
  <div id="s3slider">
  <ul id="s3sliderContent">
  <li class="s3Image"><img src="imgRotator/images/sliderImages/handle.jpg" /><span>Lorem ipsum dolor si lorum impsum donpretium volutpat cursus. Nunc sed diam erat, hendrerit commodo enim.</span></li>
  
  </ul>
  
  </div>
</div>
</body>
</html>

Código HTML:

#Elemento {
	height: 300px;
	width: 950px;
	margin-right: auto;
	margin-left: auto;
	border: medium solid #333;
}
#Elemento #s3slider #s3sliderContent .s3Image {
	list-style-type: none;
	margin-top: 0px;
	margin-left: 0px;
}

nicolasmedina94 · #5 (**permalink**) 31/10/2010, 12:12

ya lo pude arreglar: tenia que ponerle

Código HTML:

#Elemento #s3slider #s3sliderContent {
	margin: 0px;
	padding: 0px;
	list-style-type: none;

saludos