2015-02-11 83 views
0

我已經通過該網站進行了一次搜索,以查看我是否可以找到答案,但不幸的是我無法找到答案 - 我的問題非常具體,所以我希望有人可以提供幫助。縮略圖庫CSS和Jquery問題

我已經建立了一個縮略圖庫,您可以在下面的鏈接中看到。我從網上找到的教程構建了這個,因爲我對jQuery的使用還不是很好。我不得不修改教程代碼中的大圖和縮略圖的大小,因爲這樣做並沒有讓我滿意。我只按照教程中的指示修改了CSS中的大小。

我的問題是:圖像上的縮略圖塊不能很好地與大圖像的底部對齊。它看起來像是切斷了。我已經檢查了CSS下面粘貼的每個方面。

非常感謝提前看一看。

http://www.emmasteed.co.uk/robsteed/gallery.html

#slideshow-main { 
    width:714px; 
    float:left; 
    margin-right:3px; 
} 

#slideshow-main ul { 
    margin:0; 
    padding:0; 
    width:714px; 
} 

#slideshow-main li { 
    width:714px; 
    height:351px; 
    display:none; 
    position:relative; 
} 

#slideshow-main li.active { 
    display:block !important; 
} 

#slideshow-main li span.opacity { 
    position:absolute; 
    bottom:0; left:0; 
    display:block; 
    width:100%; 
    height:60px; 
    background:#000; 
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
    z-index:500; 
} 

#slideshow-main li span.content { 
    position:absolute; 
    bottom:0; left:0; 
    display:block; 
    width:100%; 
    height:60px; 
    z-index:1000; 
} 

#slideshow-main li span.content h1 { 
    font-size:14px; 
    margin:5px 0; 
    padding:0 10px;; 
    color:#42e2e8; 
} 

#slideshow-main li span.content p { 
    font-size:11px; 
    margin:5px 0; 
    padding:0 10px;; 
    color:#42e2e8; 
} 

#slideshow-carousel { 
    float:left; 
    width:206px; 
    height:400px; 
    position:relative; 
} 

#slideshow-carousel ul { 
    margin:0; 
    padding:0; 
    list-style:none; 
} 

#slideshow-carousel li { 
    background:#fff; 
    height:117px; 
    position:relative 
} 

#slideshow-carousel li .arrow { 
    left:3px; 
    top:38px; 
    position:absolute; 
    width:20px; 
    height:40px; 
    background:url(images/arrow_white.png) no-repeat 0 0; 
    display:block; 
} 

#slideshow-carousel li a { 
    background:#000; 
    display:block; 
    width:206px; 
    height:117px; 
} 


#slideshow-carousel .active { 
    filter:alpha(opacity=100); 
    -moz-opacity:1.0; 
    -khtml-opacity: 1.0; 
    opacity: 1.0; 
} 

#slideshow-carousel .faded { 
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
} 

回答

1

變化.jcarousel-skin-tango .jcarousel-container-vertical高度符合滑塊的高度。

.jcarousel-skin-tango .jcarousel-container-vertical { 
    height: 351px; 
} 
+0

非常感謝!我沒有意識到有一個單獨的CSS,我需要修改。發現了 - 謝謝! – user3714234 2015-02-11 18:41:18