start > 2007-05-10 > 1

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

Created by Ada. Last edited by Ada, 2 years and 288 days ago. Viewed 3,479 times. #28

[diff] [history] [edit] [rdf]

labels

Parent:

attachments

CSS-KUSO.html (4774)
CSS.html (2437)
box.gif (5149)
css-kuso-1.png (18181)
css-kuso-2.png (20451)
css-kuso-3.png (22721)
css-kuso-4.png (33348)
css-kuso-5.png (27049)
css-kuso-6.png (28244)
css-kuso-7.png (26194)
css-kuso-8.png (37308)
css-kuso-9.png (26215)
css-kuso.jpg (29134)

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

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

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

『哩頭殼歹企係撫？』

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

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

寬度與高度
定位方式與定位點
邊界距離
令人討厭的 IE6

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

惡搞版型說明

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

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

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

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

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

div#container：這是版型上藍色框線所示的區塊，用於承載其他任意棄置、隨便亂丟的區塊之用。
div#title：就是版型上的『部落格抬頭』區塊。
div#sidebar1：就是版型上的『選單暨公告區』區塊。
div#sidebar2：這是版型上的『谷歌摩天大樓廣告』區塊。
div#sidebar3：這是版型上的『Google AdSense 橫幅廣告』區塊。
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 檢視調整相關設定後之情形