Question

如果您导航到http://magee.darkslidedesign.com，您将在jQuery幻灯片的主页上看到图像。在幻灯片的两侧，有一个“上一个”和“下一个”按钮。

我将这些图像放在以下CSS中的某个位置......

#slides .next,#slides .prev {
    position:absolute;
    margin-top: -215px;
    width:24px;
    height:43px;
    display:block;
    border: 0;
}

#slides .next {
    margin-left: 827px;
}

我需要一些帮助，试图找出让这些箭头保持在1600x900分辨率相同位置的最佳方法，如果一个人的分辨率更低或更高。

帮助？

Answer 1

嗯...布局有点时髦......你可以做的一件事是删除margin-left: 100px;上的.prev，删除margin-left: 827px上的.next，添加{ {1}}到right:0px;，最后将.next添加到包含幻灯片div的60％宽容器中。您可能还想将position:relative放到同一个60％宽的div。

如果你总是希望它们留在同一个地方，请给60％宽的div一个固定宽度800px左右（min-width: 750px;）。

Answer 2

尝试这样的事情：

#slides {
    position:relative;
}

#slides .next,#slides .prev {
    position:absolute;
    top:30px; // use this instead of margins, of course change the value
    left: -30px // Try with this
    width:24px;
    height:43px;
    display:block;
    border: 0;
}

#slides .next {
    right: -30px; // Change the value
}

Answer 3

要解决此问题非常困难，因为html代码首先无效。此外，在箭头上使用绝对位置并不是明智之举，因为它开始非常依赖于标题...而它应该仅取决于滑块本身。看来当你改变位置时：绝对;在#slides .next,#slides .prev内，滑块停止正常工作。它几乎感觉就像滑块放在.prev所在的位置。所以.prev就像一个占位符。

基于这些原因，我坚信，从CSS的角度来看，你无法解决这个问题。我建议优化您的HTML，使其有效。并且可以使用不同的滑块。因为，通常将箭头放在滑块外面看起来像这样：

<style>
#hero_wrapper {float: left; border: 1px dotted blue; padding: 0px 60px;}
    #hero_images {border: 1px dotted red; width: 500px; height: 300px;}
    #hero_prev,
    #hero_next {position: relative; margin-top: 110px; padding: 20px; font-size: 30px; font-weight: bold; border: 1px dotted green; /* #hreo_next special: */ float: left; margin-left: -60px;}
    #hero_next {float: right; margin-right: -60px;}
</style>
<div id="hero_wrapper">
    <div id="hero_prev">&lt;</div>
    <div id="hero_next">&gt;</div>
    <div id="hero_images"></div>
</div>

^{[View output]}

对不起，我不能给你具体的答案，但我希望当你明白基本概念是多么容易时......你会重新考虑使用那个滑块（因为我假设滑块DOM结构不是最优的。）另外，从技术上讲，你只需找到一个具有独立箭头的滑块（我个人喜欢the jQuery Orbit Plugin）并简单地使用我的滑块结构的基本概念。因为，在这种情况下，你只需要制作#hero_images幻灯片并将上一个和下一个函数挂钩到箭头，瞧！

一些指示：

正如我在上面的评论中提到的，您的菜单图片应该是一个精灵，因此翻转时不会显示白色背景。
Meta标签应以xhtml中的/结束。
此外，谷歌分析强烈建议将他们的代码放在页脚</body>之前。
在现代网站开发中，没有人想要图像的边界。如果他们这样做，那么他们将手动设置它（.someimg {border: 1px solid black;}）。所以到avoid non-valid xhtml，然后在你的css顶部添加预定义的img值：img {border: 0px;}
你还有一些其他的非标准属性。 Use a validator!
通常在滑块中，图像放在ul列表中..

CSS图像放置方式取决于屏幕分辨率

3 个答案: