unbekannte Ränder auf meiner jquery Slideshow?

Ich habe einen unbekannten Rand links und den Anfang meiner jquery Slideshow..kann herausfinden, was passiert ist? bitte helfen !!! unten ist der Code und die Screenshotunbekannte Ränder auf meiner jquery Slideshow?

%@ 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>

hier ist ein Link zum Screenshot

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

Quelle

2010-05-20 ravi

Haben Sie dieses Problem jemals gelöst? Können Sie bitte auf die gegebenen Antworten antworten? – jackocnr

Haben Sie versucht, alle Ränder und padding auf 0 im Körper Zurücksetzen {}?

Quelle

2010-05-20 19:39:31 edl

Ich habe keine Stile für body.its nur eine Testseite. kein Stylesheet, nichts. Der Code funktioniert, es sind nur diese Ränder, ich kann nicht herausfinden, warum sie zeigen. – ravi

Ich sage, Sie sollten versuchen, die Körperränder und Padding auf 0 setzen, da ich glaube, dass sie Standardwerte haben, wenn nicht explizit festgelegt. Wenn ich das Problem nicht falsch verstehe? – edl

Ich habe es versucht, nachdem Sie erwähnt haben, aber immer noch kein Glück. – ravi

OK, wenn ich dein Javascript ausziehe und den "linken" und "oberen" Stil aus deinem CSS auszinke und die unten stehende CSS-Regel hinzufüge, dann werden alle Bilder vertikal gestapelt, ganz oben links Ecke (keine Geisterränder).

body {margin: 0;}

Auch sollten Sie die neuere Version von jQuery (v1.4.2) werden. Schließlich haben Sie eine öffnende eckige Klammer in der Zeile Page Language = "VB" oben in Ihrem zitierten Code verpasst, aber sind Sie sicher, dass Sie diese Zeile dort brauchen? Sie können es versuchen wollen zu entfernen ...

Wenn Sie diese CSS Einstellungen übernommen haben, und entfernen Sie das obere Linie, und es immer noch nicht funktioniert, wir müssen Ihre cycle.js Skript sehen.

Quelle

2010-06-01 15:44:18 jackocnr

Ich stimme mit @jackocnr überein, wenn cycle.js ein Plugin ist, erstellt es höchstwahrscheinlich ein Stylesheet dynamisch. Die Spezifikationen des Autors sollten erklären, wie man anpassen/anpassen kann, wenn so etwas möglich ist. Verwenden Sie die Registerkarte "Metriken" von Chrome Developer Tools, um das Element, das den Bereich enthält, als Diagnosewerkzeug zu identifizieren.

Quelle

2010-07-01 06:00:50

Stellen Sie sicher, dass html, body, ul und li margins und padding 0 sind. Wenn P-Tags generiert werden oder in Ihrem Slider eingeschlossen sind, fügen Sie auch margin und padding 0 hinzu. Zum Testen können Sie versuchen, einen roten Rahmen für Ihre "Pics" -Klasse zu setzen, um zu sehen, ob sie wirklich oben und links 0 in Bezug auf den Körper sitzt. Ich würde empfehlen, dass Sie etwas wie Firebug für Firefox verwenden, um durch jedes Element zu laufen und zu sehen, ob etwas aus Ihrem ersten DIV-Container überläuft.

Quelle

2010-07-03 16:33:14 bcm

unbekannte Ränder auf meiner jquery Slideshow?

Antwort

Verwandte Themen