2015-02-11 56 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