取決於屏幕分辨率的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圖像放置方式

回答

相關問題