2007年5月10日

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

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

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

『哩頭殼歹企係撫?』

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

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

  1. 寬度與高度
  2. 定位方式與定位點
  3. 邊界距離
  4. 令人討厭的 IE6
    1. 與 W3 CSS 2.1 不相容的 Box Model:這問題可以透過將 padding 設為 0 以便讓 W3C 與 IE6 的 box width 一致。原因可以參考以下附圖:
      Two types of Box Model
    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 完成『部落格抬頭』區塊設定之版面編排結果:
IE6 調整『部落格抬頭』區塊後之情形

Firefox 完成『部落格抬頭』區塊設定之版面編排結果:
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 橫幅廣告』區塊設定之版面編排結果:
調整『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 檢視完成『殘存的本文區』區塊設定之版面編排結果:
IE6 檢視調整『殘存的本文區』區塊後之情形

使用 Firefox 檢視完成『殘存的本文區』區塊設定之版面編排結果:
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 調整相關設定後版面編排結果:
IE6 檢視調整相關設定後之情形

結論

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