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

如果您导航到http://magee.darkslidedesign.com，您将在jQuery幻灯片的主页上看到图像。在幻灯片的任一侧，都有“上一个”和“下一个”按钮。取决于屏幕分辨率的CSS图像放置方式

我有这些图像放置在下面的CSS的某个位置...

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

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

我需要一些帮助，试图找出有这些箭头留在同一个地方，他们是最好的方式如果某人的分辨率较低或较高，则为1600x900分辨率。

帮助？

来源

2011-09-16 r584

PS：当你翻转菜单链接，则该元素没有加载速度不够快，并显示白色背景。您可以通过将这些图像放入Sprite中来解决这个问题。 –

唔...布局还挺时髦的......有一两件事你可以做的是.prev删除margin-left: 100px;，去除.next的margin-left: 827px，加right:0px;到.next，最后添加position:relative到60％广容器保存幻灯片div。您可能还想将min-width: 750px;添加到相同的60％宽div。

如果你总是希望他们留在同一个地方，给予60％宽的固定宽度800px左右（width:800px）。

来源

2011-09-16 01:30:56

不知道你的意思是“布局是否有点时髦”或如何相关...但你的建议工作，我只是想在初始创建时脱离固定宽度。谢谢。 – r584

@Rory，你做得很好。它能够很好地扩展自己（除了中心因为图像内容而需要修复的一个例外）。我之所以说它很时髦，是因为它使用了利润率来对齐事物。这并不是一种明显不好的做法，它只是不典型。（Adobe的新Muse程序使用与填充类似的方法）。无论如何，对不起，我的措辞。我不是故意以任何方式敲它。 –

尝试这样：

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

来源

2011-09-16 01:32:04 BBee

这是很难解决这个问题的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列表里面..

来源

2011-09-16 02:03:26

这是我在想什么，但没有详细说明。 +1 – Jared

我通过CSS修复了它。 prev和next按钮工作得很好，并且一直有。我不确定我的HTML的哪一部分是无效的，但是它的结构很好，也可以工作。不管怎么说，还是要谢谢你。 – r584

Validator说：20个错误，2个警告。它无效。正如“固定”一样，在IE7和IE6中也是如此。虽然IE6真的过时了，但IE7仍在使用，是一个有效的基准。作为一个完全个人的笔记，我不会像@罗伊所说的那样捍卫这个代码，它的时髦性。真的，不要被冒犯，但是如果你愿意为我工作并且说，那个代码结构就好 - 我会解雇你的。把这当作是，如果你想研究一些更好的方法，你可以向你的客户索要钱。 –

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

回答

相关问题