Foros del Web » Creando para Internet » HTML »

Imagen corrida...AYUDA!

Estas en el tema de Imagen corrida...AYUDA! en el foro de HTML en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 30/10/2010, 20:21
 
Fecha de Ingreso: octubre-2010
Mensajes: 6
Antigüedad: 7 años, 1 mes
Puntos: 0
Imagen corrida...AYUDA!

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)  
Antiguo 31/10/2010, 07:08
Avatar de 3nr1c  
Fecha de Ingreso: septiembre-2010
Ubicación: Barcelona
Mensajes: 407
Antigüedad: 7 años, 3 meses
Puntos: 50
Respuesta: Imagen corrida...AYUDA!

Prueba a poner esto al principio del CSS:

Código CSS:
Ver original
  1. * {margin:0px;padding:0px;border:0px}

Ya dirás
__________________
Tu duda está explicada aquí →→Mi blog de JavaScript, HTML5, CSS3 y PHP

+1 si te sirvió mi respuesta ;-) (y ya de paso visita el blog ▲↑)
  #3 (permalink)  
Antiguo 31/10/2010, 11:08
 
Fecha de Ingreso: octubre-2010
Mensajes: 6
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Imagen corrida...AYUDA!

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?
  #4 (permalink)  
Antiguo 31/10/2010, 13:06
 
Fecha de Ingreso: octubre-2010
Mensajes: 6
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Imagen corrida...AYUDA!

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;
}
  #5 (permalink)  
Antiguo 31/10/2010, 13:12
 
Fecha de Ingreso: octubre-2010
Mensajes: 6
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Imagen corrida...AYUDA!

ya lo pude arreglar: tenia que ponerle

Código HTML:
#Elemento #s3slider #s3sliderContent {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
saludos

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:06.