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

Question

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

我将这些图像放置在以下 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

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

如果您始终希望它们保持在同一位置，请为 60% 宽的 div 指定 800px 左右的固定宽度 (width:800px)。

Answer 2

修复这个问题非常困难，因为 html 代码首先是无效的。另外，在箭头上设置绝对位置并不是明智之举，因为它开始非常依赖于标题......而它应该仅依赖于滑块本身。看来当你改变位置时：absolute;在#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"><</div>
    <div id="hero_next">></div>
    <div id="hero_images"></div>
</div>

^{[ 查看输出 ]}

很抱歉，我无法给您具体的答案，但我希望当您了解基本概念有多么简单时..您会重新考虑使用该滑块（因为我假设滑块 DOM 结构不是最佳选择。）此外，从技术上讲，您只需找到一个具有独立箭头的滑块（我个人喜欢 jQuery Orbit 插件）并简单地使用我的滑块结构的基本概念。因为，在这种情况下，您只需使 #hero_images 滑动并将 prev 和 next 函数挂接到箭头上，瞧！

一些提示：

• 正如我在上面的评论中提到的，您的菜单图像应该位于精灵中，因此白色背景不会在翻转时显示。
• xhtml 中的元标记应以 / 结束。
• 此外，谷歌分析强烈建议将其代码放在页脚的 之前。
• 在现代网站开发中，没有人想要图像边框。如果他们这样做，那么他们无论如何都会手动设置它（.someimg {border: 1px Solid black;}）。因此要避免无效的xhtml，然后在顶部添加预定义的img值你的 css: img {border: 0px;}
• 另外你还有一些其他的非标准属性。 使用验证器！
• 通常在滑块中，图像被放入 ul 列表中。

Answer 3

尝试这样的事情：

#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
}