css - views_slideshow控件修改Drupal 7

Question

我在 Drupal 7 上使用 views_slideshow。我已将其配置为显示底部控件而不是顶部控件。

我尝试用图像替换“下一个”和“上一个”文本，大部分情况下我已经成功完成了。问题是，图像不可点击。让我解释更多。我有这个 CSS 代码:

.views-slideshow-controls-bottom {
margin-left: 500px;
background-image: url(../images/links-bg.gif);
background-repeat: no-repeat;
width: 107px;
height: 57px;
}
.views-slideshow-controls-text-previous {
background-image: url(../images/prev-link-hover.gif);
display: inline-block;
width: 36px;
height: 35px;
margin-left: 15px;
margin-top: 10px;
}
.views-slideshow-controls-text-previous a {
display: none;
}
.views-slideshow-controls-text-next {
background-image: url(../images/next-link-hover.gif);
display: inline-block;
height: 35px;
width: 36px;
}
.views-slideshow-controls-text-next a {
display: none;
}

这让它看起来很棒，它向右移动(通过 margin left 500px)应用整体背景，然后将相关图像应用到下一个和上一个。一切正常。但是，单击下一张和上一张图像时，实际上不会让幻灯片转到下一张和上一张幻灯片。所以我决定看看它是否可能是利润率。我测试了这一切并发现了一些有趣的东西。当我从 .views-slideshow-controls-bottom 中取出 margin-left: 500px; 时，当我点击下一张和上一张图片时，它会起作用它有效。所以我尝试了不同的 margin 。我应用了 margin-top:500px; 并且成功了。似乎只是 margin-left.

链接:http://www.completegroupuk.com (主页上的幻灯片)

为什么会这样？我该如何解决这个问题？

Answer 1

好的，这就是我如何让它工作的。添加相对于 .view-slideshow div 的位置，从 .views-slideshow-controls-bottom 移除 margin-left 并绝对定位具有高 z-index 的导航元素。

.view-slideshow { position: relative; }

.views-slideshow-controls-bottom {
  background-image: url(../images/links-bg.gif);
  background-repeat: no-repeat;
  width: 107px;
  height: 57px;
  position: absolute;
  top: 230px;
  right: 355px;
  z-index: 500;
}