que estoy haciendo mal?

00israel · #1 (**permalink**) 01/07/2011, 12:01

tengo una pagina de prueba con esto:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="links/scripts/jquery.js" type="text/javascript"></script>
<script src="links/scripts/jqFancyTransitions.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
</style>
</head>
<body>
<div id="imagen-principal"><img src="links/imagenes-entrada/imagen-entrada-1.jpg" width="574" height="365" />
<div id="imagen-principal"><img src="links/imagenes-entrada/imagen-entrada-2.jpg" width="574" height="365" />
</div>
<script>
$('#imagen-principal').jqFancyTransitions({ width: 574, height: 365 });
</script>
</body>
</html>

y en el CSS tengo puesto esto:

Código:

#contenedor2 #imagen-principal {
	float: left;
	height: 384px;
	padding-top: 17px;
	padding-left: 17px;
}

y no entiendo dos cositas. Primero porque las imagenes no me aparecen con el espacio superior y el de la izquierda que tiene el CSS?

y por otro lado. No se si el jquery.js se esta ejecutando bien. Porque en el dreamweaver se me colocan las imagenes una debajo de la otra aunque luego se visualicen bien.

soy muy novato con esto del jquery y es la primera vez que lo aplico

_cronos2 · #2 (**permalink**) 01/07/2011, 12:06

La regla CSS es

Cita:

#contenedor2 #imagen-principal

¿Existe algún elemento que cumpla con esas características?
Por cierto, te recomiendo que si usas Dreamweaver lo uses como editor de texto, no para ver cómo queda una página. La gente ve las webs en el navegador, no en el Dreamweaver.
Saludos (:

00israel · #3 (**permalink**) 01/07/2011, 12:20

perdona me he confundido al ponerlo. seri asi:

Código HTML:

<body>
<div id="contenedor2">
  <div id="imagen-principal">
  <img src="links/imagenes-entrada/imagen-entrada-1.jpg" width="574" height="365" />
  <img src="links/imagenes-entrada/imagen-entrada-2.jpg" width="574" height="365" />
  </div>
</div>
<script>
$('#contenedor2 #imagen-principal').jqFancyTransitions({ width: 574, height: 365 });
</script>
</body>

la hoja de estilo del #contenedor2 no lleva mucha complicacion. Es esta:

Código HTML:

#contenedor2 {
	width: 944px;
	position: relative;
}

estoy utilizando el dreamweaver como editor de texto y luego lo visualizo con la opcion nueva que lleva el Cs5 de "vista en vivo" para verlo como en un navegador. Aunque es inveitable echar un vistazo a la opcion de diseño del Dreamweaver y ahi aunque se que no es muy fiable, se ven la imagenes una debajo de la otra.

Pero aun habiendo corregido esto que me puntualizabas. se sigue viendo sin el margen y com osi la imagen estuviera descolocada una encima de la otra ¿porque?

_cronos2 · #4 (**permalink**) 01/07/2011, 12:57

Entonces la duda es de CSS, o como mucho de jQuery. Este no es el foro adecuado.
Saludos (:

00israel · #5 (**permalink**) 01/07/2011, 13:10

no el CSS funciona a la perfeccion porque funcionaba antes de meter el jquery. ¿pero este no es el foro de jquery?

el codigo del jquery le he cogido de aqui: http://workshop.rs/2009/12/image-gal...tions-effects/

pone que debo de incluir dos js uno, la ultima version del jquery y el otro la transicion en concreto

00israel · #6 (**permalink**) 01/07/2011, 13:40

el resultado es este. Parece como si repitiera las imagenes por debajo a parte de no dejarme los 17 pixeles de margen que le pido de arriba y de la izquierda:

http://dissenium.com/isra/elcollage/prueba.html

a parte me he dado cuenta de que hace algo un poco extraño antes de ejecutar la transicion, como si hiciera un barrido y luego ya viene lo de las barras.

alexg88 · #7 (**permalink**) 01/07/2011, 13:51

Cambia

Código CSS:

Ver original#contenedor2 #imagen-principal {
    float: left;
    height: 384px;
    padding-top: 17px;
    padding-left: 17px;
}

por

Código CSS:

Ver original#contenedor2 #imagen-principal {
    float: left;
    height: 384px;
    margin-top: 17px;
    margin-left: 17px;
}

00israel · #8 (**permalink**) 01/07/2011, 14:02

joder. Si señor. Mil gracias, mil gracias de verdad. Llevo toda la maldita tarde. Lo que no se es poruqe me da por poner padding en lugar de margin.

muchas gracias de verdad

hasta otra