January 12,2005 22:16

三欄式 版面 css 作戰中

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

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

  • cat_devil 發表於樂多回應(12)引用(2)喵組本部整備室編輯本文
    切換閱讀版型 │昨日人次:0 │累計人次:425
     

    引用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語法???
    那麼:
    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
    挖..╰( ̄o ̄)╯
    大手筆..真詳細,真是太感激嚕 Orz
    找時間整理一下把你的範例 po在版面上 :P
    | 檢舉 | Posted by cat_devil at March 2,2005 22:33