2010-05-20 3 views
5

왼쪽에 알 수없는 여백이 있고 내 jquery 슬라이드 쇼의 맨 ... 무슨 일이 일어나고 있는지 파악할 수 있습니까? 도와주세요!!! 아래의 코드와 스크린 샷 여기내 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> 

몸에서 0

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

+0

이 문제를 해결 했습니까? 주어진 답변에 응답 해 주시겠습니까? – jackocnr

답변

0

당신이 봤어 스크린 샷 모든 마진과 패딩을 재설정에 대한 링크입니다 {}?

+0

body.its 테스트 페이지에 대한 스타일이 없습니다. 아무 스타일 시트도, 아무것도. 코드가 작동하고 있으며,이 마진 만 표시됩니다. 이유는 무엇입니까? – ravi

+0

명시 적으로 설정하지 않았을 때 기본값이 있다고 생각하므로 본문 여백과 패딩을 0으로 설정해야한다고 말합니다. 문제를 오해하지 않는 한? – edl

+0

당신이 언급 한 후에 i'v가 시도했지만 여전히 운이 없습니다. – ravi

1

좋아요, 자바 스크립트를 제거하고 CSS에서 '왼쪽'과 '위쪽'스타일을 주석 처리하고 아래 CSS 규칙을 추가하면 맨 위 왼쪽부터 모든 사진이 세로로 쌓입니다. 구석 (귀신 여백 없음).

body {margin: 0;} 

또한 최신 버전의 jQuery (v1.4.2)를 사용해야합니다. 마지막으로, 따옴표 붙은 코드 맨 위에있는 Page Language = "VB"줄에 여는 대괄호가 없지만 그 줄이 필요합니까? 제거하려고 시도 할 수 있습니다 ...

CSS 변경 사항을 적용하고 해당 맨 위 행을 제거해도 여전히 작동하지 않으면 cycle.js 스크립트가 필요합니다.

0

@jackocnr에 동의합니다. cycle.js가 플러그인 일 경우 동적으로 스타일 시트를 작성하고있을 가능성이 큽니다. 제작자의 스펙은 그러한 것이 가능한지 조정/맞춤화하는 방법을 설명해야합니다. Chrome 개발자 도구의 '측정 항목'탭을 사용하여 공간이 포함 된 요소를 진단 도구로 확인해보세요.

0

html, body, ul and li 여백과 여백은 0입니다. 생성되는 P 태그가 있거나 슬라이더에 내용을 배치하는 경우 마진과 여백 0을 추가하십시오. 테스트를 위해 "pics"클래스에 빨간색 테두리를 넣어 실제로 몸통과 관련하여 맨 위에 앉아 있고 왼쪽에 있는지 확인할 수 있습니다. Firebug와 같은 항목을 사용하여 각 요소를 실행하고 첫 번째 DIV 컨테이너에서 넘치는 항목이 있는지 확인하는 것이 좋습니다.

관련 문제