引述

淺談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吧~
大家一起來研究與討論:)
 

全站熱搜

felix 發表在 痞客邦 留言(0) 人氣()