Felix's Spaces

引述

淺談CSS與Div排版技術，適用IE與FireFox

最近有一個案子"國貿局與WTO"，因為遭網友投書，所以回鍋找我來修正在FireFox瀏覽上的錯誤，果真在Firefox上看真的破碎虛空，但是各位看官可知這是小布在2003年的作品，那時哪有什麼Firefox，而且又是第一次接觸到所謂的無障礙網頁，也因此採用那時新的技術來編輯網頁，也就是棄表格Table不用，而全改寫成Div排版的全CSS網頁，記得那時痛苦萬分，因為怎麼會有不能用Table的一天? 而且還要全用Div?，那時我對Div的認知僅止於它是個"容器"而已，以及我只會用<div align="center">..的對齊標籤，哈哈~說到此還真不好意思內:P

 

後來，當然小布因為這個緣故走進了CSS-P(css-position)網頁的世界，有一次去參加Macromedia MX2004大會，有堂課推廣CSS-P(css-position)的概念，正好證明小布誤打誤撞的走對了方向，而後來我幾乎所有的網頁皆用Div排版，也因此發現它的好，以及突破既有的網頁設計，而更全面化更圖形化的展現新的網頁設計，這點不用小布的作品來證明，請見mezzoblue  §  css Zen Garden — Design List，沒看過的朋友，你可以發現所有的作品，都是CSS控制，以及皆用同一個內容，只是不一樣的CSS和Images罷了，這點當然跟現在所有的Blog版型的用法是一致性的，我想小布在此也就不歌功頌德了，應該很多人都已經知道了，因此在此分享一下小布的Solution，當你有遇到三欄式的制式專案時，又要IE跟Firefox可以用，如果你還不是很清楚，就參考看看小布的作法囉:)

 

一般三欄式的作法如下圖所示，我的作法會有幾個DIV框架：Top、Container、Left、Content、Right、Footer這幾個常態會存在的DIV。

====================

CSS原始碼

====================

body{

margin:0; padding:0px}  (如果你要置中，在Firefox要正常，就要改成margin: 0px auto;)

 

#DivTop {

width:1000px;

} (或者設定百分比)

 

#DivContainer {} (可以不用設立width，沒有設定會預設為100%)

 

#DivLeft {

width:200px; float:left; }

 

#DivRight {

width:200px; float:right;}

 

#DivContent {

margin-left:200px;margin-right:200px;}

 

#DivFooter {

clear:both;}

====================

HTML原始碼

====================

<div id="DivTop">華山論劍室</div>

<div id="DivContainer">   

    <div id="DivLeft">左邊是圓</div>

    <div id="DivRight">右邊是方</div>

    <div id="DivContent">中間方圓並濟</div>

</div>

<div id="DivFooter">下踩八方</div>

====================

以上的HTML的排列是關鍵，中間的Container內包了左、中、右三個DIV內容，而左、中、右的原始碼在本體HTML中的排列順序依序是 左、右、接下來才是Content

這是因為我們在左Div與右Div設立了float:left(right)的浮動，因此會IE、Firefox瀏灠器會先決定左右的位置後，最後的中間Content再排進來，因為我們設立了margin-left:200px;margin-right:200px;，因此空出了左右的區塊寬度。

 

最後在DivFooter裡一定要設定clear:both;的屬性，是為了要清掉float的屬性，好讓footer可以緊接著在最下方正確呈現，若是你沒有設立這個屬性，嘿嘿...Footer就會給你浮上去，很不聽話:P

 

另外，Firefox對CSS整個場景所設定的height會影響底端的Footer，以及對於padding與margin的判斷，IE與Firefox很不一樣，因此設定上要小心，這點當你反覆設計較複雜的版型時就會碰到，不過知道這點比較好辦了，不外乎是加加減減的算數問題。

 

還有Firefox不吃text-align: center;這個CSS設定，因此傳統的<div align="center">還蠻好用的啦:P，當然，可以解決的方法有很多，就看大家的創意了。

 

好的作品，如果都能善用CSS-P(css-position)來做，不但可以很容易維護，對程式人員的coding速度也會加快，因為網頁的原始碼實在太乾淨了，不過，對於設計人員來說，小布建議你一定要會，要吃這行飯，如果你不會，那你就落伍了，現在都已經進到Web2.0時代，以後不是AJAX就是RIA的世界，那麼你還緊守著table與傳統的作法? 那麼就太沒有彈性了! 因為小布喜歡偷吃步，所以CSS-P Solution非常方便，因為制訂好自己的一套CSS與頁面規則，哈哈~ 一套抵萬套，做起網站來就快多了，而時間就多留給Flash RIA 這種下世代的介面技術研究，HTML也可以這麼簡單的:)

 

Trust Me! 就從現在開始寫你的第一套CSS-P吧~

大家一起來研究與討論:)