|
第五步：補(bǔ)充設(shè)計(jì)
如果瀏覽器重新調(diào)整大小，中間的容器小于左邊欄的時候，整個布局都會被破壞掉，所以要設(shè)置一個min-width來保持我們的布局不被片破壞，雖然在IE6上這個屬性是不起作用的，但是沒關(guān)系。
body {
min-width: 550px; /* 2x LC width + RC width */
}
沒有任何一個布局是不要對IE增加一些額外的工作就能完成的。(-_-!) 在IE6中負(fù)邊距會使左邊欄離的太遠(yuǎn)（在全寬瀏覽下），我們要用右邊欄的寬大把他向右拉回來。并且用* html來屏蔽其他瀏覽器執(zhí)行他.
* html #left {
left: 150px; /* RC width */
}
至于為什么要用右邊欄的寬度，要牽涉到一些算法。當(dāng)然我不會用去解釋這些，我們只要知道這樣是起作用的，我們甚至可以認(rèn)為這個是IE的眾多”魔法”之一。
Padding, please
我不是設(shè)計(jì)師，但是上面的布局實(shí)在是觸犯了我的審美觀。沒有邊距的欄目是很分辨和閱讀的，我們需要空隙！
使用One True Layout這樣百分比布局的的弊端之一就是會造成中間層的padding困難，百分比的padding在某些分辨率下會變的很難看�？梢杂霉潭▽挾鹊膒adding，但是需要給每一欄內(nèi)部嵌套一個div。
用這個布局padding不是問題，他可以直接給左、右邊欄添加padding，只需響應(yīng)的調(diào)整即可。例如我們要給上面的例子添加10px的padding，并且保持他（width+padding）還是200px，只需要小小的改動
#left {
width: 180px; /* LC fullwidth - padding */
padding: 0 10px;
right: 200px; /* LC fullwidth */
margin-left: -100%;
}
要給中心層加padding需要一個技巧，但是不需要額外的結(jié)構(gòu)，只需額外的一小段css。加的100%的寬度導(dǎo)致中心層和外部的的padding以外（non-padded width）的寬度一樣寬。為了達(dá)到我們想要的效果，我們需要增加右邊的margin，使其等于padding值的總和，這樣就保證了他會是我們想要的大小。
我們改變了中間層的改變成現(xiàn)在這樣后，左邊欄需要移動更多的距離才能在正確的位置上，這也是技巧所在。我們需要給右邊框的抵消值（上面的right值）增加上中間層的padding值。
為了更具體的說明，我繼續(xù)以上面的例子為例，現(xiàn)在給每一個邊框增加10px的padding值（合計(jì)20px），中間層增加20px的padding值（合計(jì)40px），新的樣式如下：
body {
min-width: 630px; /* 2x (LC fullwidth +
CC padding) + RC fullwidth */
}
#container {
padding-left: 200px; /* LC fullwidth */
padding-right: 190px; /* RC fullwidth + CC padding */
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px; /* CC padding */
width: 100%;
}
#left {
width: 180px; /* LC width */
padding: 0 10px; /* LC padding */
right: 240px; /* LC fullwidth + CC padding */
margin-left: -100%;
}
#right {
width: 130px; /* RC width */
padding: 0 10px; /* RC padding */
margin-right: -190px; /* RC fullwidth + CC padding */
}
#footer {
clear: both;
}
/*** IE Fix ***/
* html #left {
left: 150px; /* RC fullwidth */
}
當(dāng)然上下的padding值能很方便的添加，具體請參看nicely padded version 中的例子
這個布局也能在em下很好的工作，但是不能在混合em和px的時候工作，選什么你來定，但是要選的正確。
等高欄
這個布局能保證所有的欄目都是等高的，實(shí)現(xiàn)方式是來著與One True Layout的adapted wholesale。所以我不詳細(xì)解釋，增加和修改代碼如下
#container {
overflow: hidden;
}
#container .column {
padding-bottom: 20010px; /* X + padding-bottom */
margin-bottom: -20000px; /* X */
}
#footer {
position: relative;
}
我特別在下面留了10個像素
附加的說明，請注意在Opera上存在一個bug，即overflow：hidden會讓你所有的欄目都變大，在One True Layout上有詳細(xì)的解決辦法。你可以使用這個方法或是等Opera 9（被修復(fù)了這個bug）來測試。
另一個問題是，在IE中如果內(nèi)容的高度沒有背景圖片的高度高，背景不會被剪掉，他會超出footer。如果你沒有獨(dú)立的footer或是內(nèi)容比背景高，這也不是個問題。如果你仍然需要一個footer，不要怕還是有解決的辦法的。用一個DIV把footer封裝一下就可以。
<div id="footer-wrapper">
<div id="footer"></div>
</div>
現(xiàn)在依然用上面我們使用到的讓各個欄目對齊的技巧來讓footer超過封裝的DIV，來顯示我們想要顯示的內(nèi)容
* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff; /* Same as body
background */
}
現(xiàn)在解決了所有的問題，得到了我們想要的結(jié)果和很少量冗余的代碼。
哦,還需要說明的
完美主義者有可能是想知道是否有一個更好的方式來做到這一點(diǎn)？我之前聲明過，我引用了一個非語義化的包含容器(DIV),確實(shí),我們不應(yīng)該包含一個額外的結(jié)構(gòu)來打亂我們完美的結(jié)構(gòu).
如果你像我一樣,象知道這樣怎么去實(shí)現(xiàn),不需要更多的結(jié)構(gòu),我向你介紹“wrapper-free Holy Grail (沒有包含的圣杯)”,其最抽象的特殊之處在于,用一個DIV實(shí)現(xiàn)了各部分 — 不多也不少,語義化,不愧于”圣杯”的美名.其原理是相似的.主體直接應(yīng)用padding不需要多余的容器,而用負(fù)邊距來延伸header和footer 使其剛好達(dá)到想要的寬度.
這種布局能在所有的瀏覽器上正常工作,甚至(令人震驚)是在IE上,但是不是等高的.而且在非常小的窗口中是會”破掉”的,使用他的時候一定要謹(jǐn)慎.
最后
雖然文中提到的例子很具體,但是這項(xiàng)技術(shù)的使用范圍確實(shí)很大.為什么不能有兩個活動的中心層,為什么不調(diào)換層的順序.這些引用都超出了本文的表述范圍,但是要實(shí)現(xiàn)他們只需要很小的改動即可.使用圣杯是明智的.他可以成為你使用CSS的技巧之一.
本文鏈接：http://m.95time.cn/tech/web/2008/6273.asp 
出處：Alipay UED
責(zé)任編輯：moby
上一頁 尋找圣杯 [4] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 5 頁 尋找圣杯 [5]
