CSS 排版惡搞 - 談五欄式編排

嗯，即然太多人談 CSS 的三欄式編排，那麼我應該更進化才行。由於『四』不好聽，所以跳過改談『五欄式編排』。

※關於此處所謂欄的定義請見 CSS 中關於『欄』的定義 說明。

『哩頭殼歹企係撫？』

這就難說了，畢竟總是有些網頁設計師們會搞出這類的高等設計（），我們當然要提早準備以為因應，而且還可以順便再進一步的加深 CSS 排版的印象！

首先再次強調 CSS 排版的幾個重點：

1. 寬度與高度
2. 定位方式與定位點
3. 邊界距離
4. 令人討厭的 IE6
1. 與 W3 CSS 2.1 不相容的 Box Model：這問題可以透過將 padding 設為 0 以便讓 W3C 與 IE6 的 box width 一致。原因可以參考以下附圖：
   
2. 會破壞元素指定寬度的 overflow 設定：在 CSS 實戰篇 - SnipSnap 已經遭遇過這種情形，所以這次要主動迴避之！

惡搞版型說明

CSS.html 是基於前述五欄式版型所建立之 HTML 原始檔案。

不過雖然是惡搞但也不必弄的太複雜，版型設定參數如下：

1. 橫向區塊（部落格抬頭、Google AdSense 橫幅廣告）：儘量使用頁面寬度，高度統一設為 50px。
2. 縱向區塊（選單暨公告區、谷歌摩天大樓廣告）：寬度統一設定為 75px，高度由其所含內容多寡決定。
3. 本文區塊：扣除前述區塊佔用空間後之所有剩餘空間皆作為本文區塊之顯示區。
4. 區塊間距：各區塊相隔 5px 以明確區隔各區塊空間。

請注意 CSS.HTML 原始檔中並未依據區塊排列的順序編寫相關內容，這是為了強調此類頁面版型的編排並不受 HTML 原始資料的影響，並且證明資料的保存與顯示是可以不會互相影響、不致於彼此牽制的。

懶的開啟 CSS.HTML 端詳的客官可以先參考以下的區塊設定說明：

1. div#container：這是版型上藍色框線所示的區塊，用於承載其他任意棄置、隨便亂丟的區塊之用。
2. div#title：就是版型上的『部落格抬頭』區塊。
3. div#sidebar1：就是版型上的 『選單暨公告區』區塊。
4. div#sidebar2：這是版型上的『谷歌摩天大樓廣告』區塊。
5. div#sidebar3：這是版型上的『Google AdSense 橫幅廣告』區塊。
6. div#content：這是被前面四個區塊蹂躪過後『殘存的本文區』區塊。

尚未進行設定前之排版結果：

排版容器 div#container 之設定

已知確定針對多個區塊使用定位模式進行定位，加上為了避免 IE6 的奇怪定位 Bug，決定使用頁面寬度 100% 為容器之寬度設定（不設定不等於 100%）並對此區塊指定使用相對定位模式。

body {
  margin: 0;
  padding: 0;
  /* 文字置中設定，給 IE6 有時候使用的 */
  text-align: center;
}
#container {
  background-color: #0600F2;
  border-width: 1px;
  border-style: solid;
  /* 使用頁面寬度 100% 為排版空間 */
  width: 100%
  /* 指定使用相對定位模式以提供子元素定位參考 */
  position: relative;
  /* 將區塊置中 */
  margin: 0 auto;
  /* 有時前述設定對 IE6 失效時，必須在父元素中指定文字置中 */
  text-align: left;
  /* 使用整個頁面的全部高度 */
  height: 100%;
}

『谷歌摩天大樓廣告』區塊

優先處理此區塊的原因是… 作為其他區塊的定位參考！請直接看源碼說明：

#sidebar2 {
  border-width: 1px;
  border-style: dotted;
  border-color: yellow;
  background-color: #8081B9;
  /* 寬度設定 75px */
  width: 75px;
  /* 使用絕對定位 */
  position: absolute;
  /* 距上邊界 0px */
  top: 0;
  /* 距右邊界 0px */
  right: 0;
  /* 讓摩天大樓能貫通整個版面，此設定會使用到 div#container 的高度設定值 */
  height: 100%;
}

完成『谷歌摩天大樓廣告』區塊設定之版面編排結果：

『部落格抬頭』區塊

#title {
  border-width: 1px;
  border-style: dotted;
  border-color: #999999;
  background-color: #7FFF00;
  /* 高度設定 50px */
  height: 50px;
  /* 使用絕對定位 */
  position: absolute;
  /* 距上邊界 0px */
  top: 0;
  /* 距左邊界 0px */
  left: 0;
  /* 距右邊界 75px（摩天大樓區塊寬度） + 5px（區塊間邊界） */
  /* 除了 IE6 以外，此設定等於間接指定元素寬度 */
  right: 80px;
}

IE6 完成『部落格抬頭』區塊設定之版面編排結果：

Firefox 完成『部落格抬頭』區塊設定之版面編排結果：

比較之後可以發現 IE6 的編排結果與期望不符，不過這有個非正規（就是 IE Only）的手段可以校正。

『選單暨公告區』區塊

#sidebar1 {
  border-width: 1px;
  border-style: dotted;
  border-color: red;
  background-color: #FA8400;
  /* 寬度設定 75px */
  width: 75px;
  /* 使用絕對定位 */
  position: absolute;
  /* 距上邊界 50px（部落格抬頭區高度） + 5px（區塊間距） */
  top: 55px;
  /* 距左邊界 0px */
  left: 0;
  /* 據下邊界 0px */
  /* 除了 IE6 以外，此設定等於間接指定元素高度 */
  bottom: 0;
}

完成『選單暨公告區』區塊設定之版面編排結果：

當然，對於在 IE6 下『選單暨公告區』區塊的高度問題後續也有解決方法。

『Google AdSense 橫幅廣告』區塊

#sidebar3 {
  border-width: 1px;
  border-style: dotted;
  border-color: Navy;
  background-color: #7A8306;
  /* 設定高度 50px */
  height: 50px;
  /* 指定絕對定位 */
  position: absolute;
  /* 距上邊界 50px（部落格抬頭區高度）+ 5px（區塊間距） */
  top: 55px;
  /* 距左邊界 75px（選單暨公告區寬度） + 5px（區塊間邊界） */
  /* 除了 IE6 以外，此設定等於間接指定元素寬度 */
  left: 80px;
  /* 距右邊界 75px（摩天大樓區塊寬度） + 5px（區塊間邊界） */
  /* 除了 IE6 以外，此設定等於間接指定元素寬度 */
  right: 80px;
}

完成『Google AdSense 橫幅廣告』區塊設定之版面編排結果：

至於那個區塊寬度不足的問題還是請稍安勿燥！

『殘存的本文區』區塊

#content {
  border-width: 1px;
  border-style: dashed;
  border-color: blue;
  background-color: #7F8180;
  /* 
    距上邊界 50px（部落格抬頭區高度） + 5px（區塊間距）+  
            50px（選單暨公告區高度） + 5px（區塊間距）
  */
  margin-top: 110px;
  /* 距左邊界 75px（選單暨公告區寬度） + 5px（區塊間邊界） */
  /* 除了 IE6 以外，此設定等於間接指定元素寬度 */
  margin-left: 80px;
  /* 距右邊界 75px（摩天大樓區塊寬度） + 5px（區塊間邊界） */
  /* 除了 IE6 以外，此設定等於間接指定元素寬度 */
  margin-right: 80px;
  /* 避免內含大圖時破壞版面規劃 */
  overflow: hidden;
}

使用 IE6 檢視完成『殘存的本文區』區塊設定之版面編排結果：

使用 Firefox 檢視完成『殘存的本文區』區塊設定之版面編排結果：

由附圖可以發現到目前為止 Firefox 已經達成惡搞要求，但是 IE6 怎麼辦？讓所有區塊的背景色一致當然可以掩飾 IE6 的鳥問題，只不過其實 IE6 針對其不符標準的特立風格也提供了相應的解決之道：CSS Expression！

雖然 CSS Expression 不是 W3C 標準，但如果無法限制網站瀏覽者所使用的瀏覽器時，使用這項工具個人是認為也無可厚非。此處僅簡單列出解決方式，若要細究者請自行參考其他網站上之說明。

<!-- 以下這行開始一直到 endif 間之內容表示是 IE 6 專用 -->
<!--[if IE 6]>
  <style type="text/css">
    /* 設定『部落格抬頭』區塊寬度 */
    #title { 
      width: expression( this.parentNode.clientWidth - 80 + "px" );
    }
    /* 『選單暨公告區』區塊高度設定 */
    #sidebar1 {
      height: expression( this.parentNode.clientHeight - 55 + "px" );
    }
    /* 『Google AdSense 橫幅廣告』區塊寬度設定 */
    #sidebar3 {
      width: expression( this.parentNode.clientWidth - 160 + "px" );
    }
  </style>
<![endif]-->

使用 IE6 檢視使用 CSS Expression 調整相關設定後版面編排結果：

結論

1. 果然使用 CSS 可以隨意編排任意欄數之版面。
2. 最終的測試檔名 CSS-KUSO.html 。
3. 搞怪完畢，收工回家。