<< 四葉妹妹陪你聊 | 回blog首頁 | 荒廢好久的喵の卷 >>

January 12,2005

三欄式 版面 css 作戰中

今天嘗試了一下午，想恢復以往在舊。喵の卷的三欄式風格。
但是..Orz 。
試了幾種三欄做法都無法矯正完成。
大部分的人三欄都是貼左，一個接一個。不過這種把視窗縮小後，會以左欄為中心，向左靠緊產生重疊吃欄位的現象。
舊。喵の卷我是把左右 side bar 定死，縮小時只有 content 會潰縮。所以我一直愛用這種方式。

不過..到目前為止，我還是無法完成在樂多上的攻略，一直被擊倒仆街。
羅德祖先啊!!請傳授一招必殺技吧!!好讓我快快破關...


Posted by cat_devil at 樂多Roodo! │22:16 │回應(13) │引用(2) │喵組本部整備室
工具：編輯本文
Ads by Roodo! 

引用URL

http://cgi.blog.roodo.com/trackback/4388
引用列表:
三欄部落格滿實用的，\r\n因為現在太多 blog 的小玩意，\r\n兩欄常會把網頁拉的很長，所以玩玩三欄也是不錯的。\r\n\r\n
樂多裡的三欄部落格【德布西第 1976 號華麗曲】 at April 17,2005 02:15
原諒我用這種白濫的說明方式做解說，希望對想嘗試三欄Blog的同好有所幫助。
三欄式【【字言字語】】 at May 18,2005 12:50
回應文章
我的方法是....用 table...:p

雖然 table 不利 html 原始檔閱讀, 不過這是試過比較好的方法...

只是單純解決浮動 div 在視窗小時，重疊的問題...

另一個方法是, 把三欄都用 pixel 定死大小, 不過可能要 scroll bar....沒試過...
Posted by 優格 at January 13,2005 08:34
#container和#content裡面，margin-left和margin-right不要設定成auto，分別設成左右兩欄的寬度，即可解決resize時版型破壞的問題。
（不知道是不是你要的效果）
如果左右兩欄搭配使用position:absolute效果更佳。
Posted by billy at January 13,2005 08:55
to 優格
用table..嗯..非不得已得話才會考慮這招。(無聊的堅持 XD)
三欄都定死..我有看過，應該就類似那種主要版面都得縮小，需要scroll bar來捲動觀看內容..
不過這樣..瀏覽起來好像會有點不順手 @@?!

to billy
你說的這招，是不是視窗假如往左縮的話，右側Side bar就會看不到，然後依序看不到Content...這種。
還是說..是3欄都會跟著縮的 ..@@||
..
hummm...總之，這幾招我就收著先，等考完試再花時間來Try..
(聽說已經被列入被當名單了..Orz)
搞不好到時候已經有範本可以參考了~(您們要加油攻略哦!! XD)
Posted by cat_devil at January 13,2005 11:24
看來用自訂格式才是玩Blog的王道丫
（還是用範本的笨蛋）
Posted by 伴月‧孤影 at January 14,2005 11:29
這個以前我是用float將左右欄定位，再用margin/padding設定中間的欄，假設左右欄的寬度是各200px，那中欄的設定就是margin: 0px 200px 0px 200px/padding 0px 200px 0px 200px
不過後來我發現這方法在IE下會出現奇怪的輕微移位問題（對整體排版沒有影響，只是外觀差了點），我知道是有解決方法的，但我不懂啦>.<

所以後來我用了一個新方法：
先用float令兩個DIV置左置右，然後在置左了的DIV內再放兩個DIV，並再用float令其置左置右，這就完成三欄設定了～
Posted by 路人甲~.~ at February 28,2005 12:21
唔 感謝 路人甲 的建議，找時間來試看看。 3qqqqq
Posted by cat_devil at March 1,2005 06:46
對了.忘了說，有沒有範例可以偷看一下啊@@?
直接這樣說 我沒有概念 Orz
原諒我的無知...
Posted by cat_devil at March 1,2005 06:48
範例
請存為.html
======================================================







一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正




一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正



一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正一二三四正





======================================================
CSS中的『width: 197px !important; width: 200px』是用來解決IE（5.0以上）與Mozilla對border的理解不一樣而特地加上的，若想知道有什麼分別，可以將其修改為『width: 197px』或『width: 200px』，然後用IE及Mozilla來看看！
但要注意，此方法只適用於HTML(ver 4.01)標準

如果閣下要使用XHTML(ver 1.0)標準
即是在檔頭加上


這些宣告

那就需要用到另一個方法，因為在XHTML標準下，IE 6.0及與Mozilla對border的理解是一樣的，但IE 5.0~5.5與
IE 6.0的理解卻不一樣（IE你真的不是一般的麻煩呀OTZ），為了達到最大兼容度，我們就需要將『width: 197px !important; width: 200px』改為『width: 200px; voice-family : ""}""; voice-family :inherit; width: 197px』才行！
Posted by 謎之路人甲 at March 2,2005 16:49
不支援HTML語法？？？
那麼：
http://sg.liful.com/111.html
　　
CSS中的『width: 197px !important; width: 200px』是用來解決IE（5.0以上）與Mozilla對border的理解不一樣而特地加上的（次序不能錯），若想知道有什麼分別，可以將其修改為『width: 197px』或『width: 200px』，然後用IE及Mozilla來看看！
　　
但要注意，此方法只適用於HTML(ver 4.01)標準
　　
如果閣下要使用XHTML(ver 1.0)標準
即是在檔頭加上
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"＞
這些宣告
　　
那就需要用到另一個方法，因為在XHTML標準下，IE 6.0及與Mozilla對border的理解是一樣的，但IE 5.0~5.5與
IE 6.0的理解卻不一樣（IE你真的不是一般的麻煩呀OTZ），為了達到最大兼容度，我們就需要將『width: 197px !important; width: 200px』改為『width: 200px; voice-family : ""}""; voice-family :inherit; width: 197px』才行（次序也是不能錯的）！
Posted by 謎之路人甲 at March 2,2005 16:55
XHTML：
http://sg.liful.com/222.html
Posted by 謎之路人甲￣▽￣ at March 2,2005 17:08
更正，發現不論是HTML還是XHTML，只要作了宣告如：
＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"＞
IE 6.0對border的理解就會立即跟Mozilla一樣，所以請使用
http://sg.liful.com/222.html
的範例
Posted by 謎之路人甲￣▽￣||| at March 2,2005 17:20
總之，
如果不作DOCTYPE宣告，就用111.html的範例
如要用DOCTYPE宣告，則改用222.html的範例
　　
看過閣下Blog的原始檣，好像都有用到DOCTYPE宣告，所以應該用222.html的範例啦～
　　
（留言好像多了點XD）
Posted by 路人甲 at March 2,2005 17:35
挖..╰(￣ｏ￣)╯
大手筆..真詳細，真是太感激嚕 Orz
找時間整理一下把你的範例 po在版面上 :P
Posted by cat_devil at March 2,2005 22:33


回最上方