2010-05-20 17 views
5

Tengo un margen desconocido en la izquierda y la parte superior de mi presentación de diapositivas de jquery ... ¿no puedo descubrir qué está pasando? ¡¡¡por favor ayuda!!! Abajo está el código y la pantallamárgenes desconocidos en mi presentación de jquery?

%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> 

<!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 runat="server"> 
    <title>Untitled Page</title> 

    <script src="js/jquery-1.3.2.js" type="text/javascript"></script> 

    <script src="js/cycle.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
$("document").ready(function(){ 

$('#slideshow').before('<ul id="nav">').cycle({ 
    fx:  'turnDown', 
    speed: 'fast', 
    timeout: 0, 
    pager: '#nav', 

    // callback fn that creates a thumbnail to use as pager anchor 
    pagerAnchorBuilder: function(idx, slide) { 
     return '<li><a href="#"><img src="' + slide.src + '" width="198" height="93" /></a></li>'; 

    } 

}); 

    $('li:lt(3)').wrapAll('<div class="wrapper" />'); 
$('li:gt(2)').wrapAll('<div class="wrapper2" />'); 

}); 

    </script> 

    <style type="text/css"> 
     #slideshow 
     { 
      height: 300px; 
      width: 469px; 
      padding: 0; 
      margin-top: 0px; 
      position: absolute; 
      left: 267px; 
      top: 25px; 
     } 
     #slideshow img 
     { 
      padding: 10px; 
      border: 1px solid #ccc; 
      background-color: #eee; 
      width: 449px; 
      height: 290px; 
     } 
     .wrapper 
     { 
      width: 217px; 
      float: left; 
     } 
     .wrapper2 
     { 
      width: 217px; 
      float: right; 
     } 
     #nav 
     { 
      width: 920px; 
      float: left; 
     } 
     #nav li 
     { 
      width: 198px; 
      margin-top: 0px; 
      float: left; 
      margin-bottom: 5px; 
      margin-left: 0px; 
      list-style: none; 
     } 
     #nav a 
     { 
      width: 198px; 
      height: 93px; 
      padding: 3px; 
      display: block; 
      border: 1px solid #ccc; 
      background-color: #eee; 
     } 
     #nav a.activeSlide 
     { 
      background: #88f; 
     } 
     #nav a:focus 
     { 
      outline: none; 
     } 
     #nav img 
     { 
      border: none; 
      display: block; 
     } 
    </style> 
</head> 
<body> 
    <div id="slideshow" class="pics"> 
     <img src="http://farm2.static.flickr.com/1429/1252247669_5f014e7dc1_b.jpg" /> 
     <img src="http://farm1.static.flickr.com/153/332584527_bd5efc0197_o.jpg" /> 
     <img src="http://farm4.static.flickr.com/3031/2744217176_33eeeef93a_b.jpg" /> 
     <img src="http://farm2.static.flickr.com/1429/1252247669_5f014e7dc1_b.jpg" /> 
     <img src="http://farm1.static.flickr.com/153/332584527_bd5efc0197_o.jpg" /> 
     <img src="http://farm4.static.flickr.com/3031/2744217176_33eeeef93a_b.jpg" /> 
    </div> 
</body> 
</html> 

Aquí hay un enlace a la pantalla

http://img337.imageshack.us/img337/9043/sliderb.jpg

+0

¿Alguna vez resolvió este problema? ¿Puedes responder las respuestas dadas? – jackocnr

Respuesta

0

¿Ha intentado reajustar todos los márgenes y el relleno a 0 en el cuerpo {}?

+0

no tengo ningún estilo para body.its solo una página de prueba. sin hoja de estilo, nada. el código está funcionando, son solo estos márgenes, simplemente no puedo descifrar por qué se muestran. – ravi

+0

Estoy diciendo que debería intentar establecer los márgenes del cuerpo y el relleno en 0, ya que creo que tienen valores predeterminados cuando no están establecidos explícitamente. ¿A menos que esté malinterpretando el problema? – edl

+0

lo intenté después de que lo mencionó, pero todavía no tuve suerte. – ravi

1

OK, si elimino su javascript, y comento el estilo 'izquierdo' y 'superior' de su CSS, y añado la regla CSS a continuación, entonces obtengo todas las imágenes apiladas verticalmente, desde la parte superior izquierda esquina (sin márgenes de fantasmas).

body {margin: 0;} 

También debe utilizar la versión más reciente de jQuery (v1.4.2). Finalmente, omitió un corchete angular de apertura en la línea Idioma de página = "VB" en la parte superior del código entre comillas, pero ¿está seguro de que necesita esa línea allí? Es posible que desee intentar eliminarlo ...

Si aplica esos cambios CSS, y elimina esa línea superior, y todavía no funciona, tendremos que ver su script cycle.js.

0

Estoy de acuerdo con @jackocnr, si cycle.js es un complemento, lo más probable es que cree dinámicamente una hoja de estilo. Las especificaciones del autor deben explicar cómo ajustar/personalizar, si tal cosa es posible. Intenta usar la pestaña "Métricas" de Herramientas para desarrolladores de Chrome para identificar el elemento que contiene el espacio, como una herramienta de diagnóstico.

0

asegúrese de que los márgenes y el relleno de html, body, ul y li sean 0. Si hay etiquetas P generadas o envolviendo cosas en su control deslizante, agregue margen y relleno 0 a eso también. Para las pruebas puedes intentar poner un borde rojo para tu clase de "fotos" para ver si realmente está sentado arriba y dejado 0 en relación con el cuerpo. Te recomendaría usar algo como Firebug para que Firefox corra a través de cada elemento y ver si hay algo desbordado de tu primer contenedor DIV.

Cuestiones relacionadas