液體 - 修正 - 調整版面

我工作的這個網址：http://www.justaddsolutions.com/SampleSite/液體 - 修正 - 調整版面

主要領域，就是要1,024像素寬，總是爲中心，這是實現的。但是，當瀏覽器窗口寬度超過1024像素時，我的客戶希望黃色和紅色條帶延伸到瀏覽器窗口的受尊重邊緣（黃色左側和紅色右側）。

我想用基於CSS的Liquid-Fixed-Liquid Layout來解決它，其中心部分居中且側面部分具有相等的液體寬度。但我無法自己想出來，也無法找到任何地方如何做到這一點。

我確實在mathewjamestaylor液體佈局網站上發現了液體固定液體佈局，但是當瀏覽器的窗口調整到小尺寸時，它在IE8中斷了。

然後我想在我的頭文件中使用3列表格並使用background-image和repeat-x對我的td元素進行樣式化，但在Chrome和Safari中看起來效果不佳。

任何有關這個問題的幫助將不勝感激。

來源

2011-01-20 hanazair

剛剛測試了這一點，

http://www.antiyes.com/test/4753259/

查看HTML，它看起來有點糟糕，因爲現在的顏色配置文件和材料與圖像，他們將不得不更好的削減，但是這個節目做什麼的基礎知識。

<html> 
<head> 
<style type="text/css"> 
body 
{ 
margin:0; 
padding:0; 
} 
#header 
{ 
width:100%; 
height: 145px; 
position:relative; 
overflow:hidden; 
text-align:center; 
} 

#logo 
{ 
margin:auto; 
position:relative; 
z-index:5; 
width:1024px; 
height:99px; 
background:transparent url(iea_logo_13Jan2011.png) no-repeat top center; 
} 

#red_stripe,#yellow_stripe 
{ 
position:absolute; 
    left:0px; 
right:0px; 
z-index:4; 
} 

#red_stripe 
{ 
left:50%; 
height:31px; 
top:6px; 
background:transparent url(red_strip.png) repeat-x top left; 
width:50%; 
} 

#yellow_stripe 
{ 
height:32px; 
top:60px; 
width:50%; 
background:transparent url(yellow_strip.png) repeat-x top left; 
} 

</style> 
</head> 
<body> 
<div id="header"> 
<div id="red_stripe"></div> 
<div id="yellow_stripe"></div> 
<div id="logo"></div> 
</div> 
</body> 
</html>

來源

2011-01-20 22:41:37

哇......這太棒了！並以如此簡單的方式完成。非常感謝你。 – hanazair 2011-01-20 23:43:25

我相信你是在過度思考這一點。既然你正在使用絕對定位的頭元素，我會簡單地使用背景圖像的身體元素（不重複）。基本上它會是一個像你目前的標誌，但顏色從兩邊延伸的圖像。

由於它只是純色，因此您可以將其設置爲任意大的寬度（比如說9000像素），以適應幾乎任何瀏覽器大小，並且圖像仍然會相對較小。

來源

2011-01-20 22:22:29 ghoppe

我以前使用過這種技術，儘管我沒有去9000像素的寬度。但是，幾千。 :) – 2011-01-20 22:28:25

我建議的解決方案適用於分辨率高達3072像素，應該很多。

您需要爲#body_background製作背景圖片，寬度爲3072px，高度約爲140px。這個主要背景顏色顯然是白色的。然後，您會在左側部分中創建一個1024像素寬的黃色條，從頂部開始向下86px，以便與主要部分中的黃色條對齊。然後，在黃色條在1024px處結束的水平點處，您將創建一個2048px的紅色條帶，該紅色條帶在32px的右邊緣向下，以便與主要部分中的紅色條帶對齊...所以基本上，您將擁有看起來像這樣的圖像：

[ - - - - -1024px- - - - - - ]___________________________________________________ 
______________________________[- - - - - - - - - - -2048px- - - - - - - - - - - ]

然後它作爲背景圖像與下面的CSS添加到#body_background：

#body_background { 
    background:url('../path/to/image/bg_strips.gif') left top no-repeat #fff; 
}

而且應該這樣做！讓我知道它是否有效！

來源

2011-01-20 22:38:56 mVChr

非常感謝你的想法，mVChr。我已經嘗試了John Boker早些時候發佈的解決方案，它似乎工作得很好，所以我現在就去做。不過，再次感謝。 – hanazair 2011-01-21 00:09:47

液體 - 修正 - 調整版面

回答

相關問題