完成圖.JPG(這是完成圖)

上篇提到需要修改的細節和重點,現在開始動手實際的將痞客二欄版型轉成三欄式的。

 

上篇提到、需要掌握全寬,本文寬,和側欄寬。所以先找出這三個地方來。

#body-div{
 width: 900px;
 background:url(http://p4.p.pixnet.net/albums/userpics/4/5/420045/49dad6603e76f.png) left top repeat-y;
 position: relative;
 margin:0 auto 20px;
 }

這一段標示了總寬是900px。

 

 

#content{
 overflow: hidden;
 float:left;
 width: 630px;
 padding-top: 10px;
 }

這一段則標示了本文區為630px。

 

 

#links{
 overflow: hidden;
 float:right;
 width: 268px;
 margin-right:1px;
 display:inline;
}

這一段標示了側欄為268px。

 

 

所以先把這三段,複製起來,貼到最底下的位置,等等修改這邊就行了。

總寬900不變(若要改變,會更動更多地方),本文和側欄則需要重新分配大小。

我將本文區調為490,側欄則為200 200,剩下10則當成留白。

 

這三段,去掉不是很必要的,簡化之後變成。(記得加上註解,比較看得懂。)

/*總版面*/
#body-div{
 width: 900px;
 background:url(http://p4.p.pixnet.net/albums/userpics/4/5/420045/49dad6603e76f.png) left top repeat-y;
 position: relative;
 margin:0 auto 20px;
 }


/*主要內容區*/
#content{
 float:left;
 width: 490px;
 padding: 3px;
 }


/*總側欄*/
#links{
 float:right;
 width: 400px;
 margin-right:1px;
}

 

到目前為止,畫面還是兩欄。但是範圍已經改變了。

要將二欄改成三欄,主要是切割側欄,將側欄一分為二。

方法是1.先訂出總側欄寬度 2.單獨設定兩個新的側欄寬度。

寫法是這樣。(紅色為說明)

/*總側欄*/
#links{
 float:right;             訂出側欄要放在哪一邊,right是右。
 width: 400px;       總欄寬
 margin-right:1px;
}
/*側欄1*/
#links-row-1{
 float:left;               第一個側欄靠左
 width: 198px;       第一欄寬
 margin:1px;          邊界1px,左右各1加起來剛好2,共200
}
/*側欄2*/
#links-row-2{
 float:right;             第二個側欄靠右
 width: 198px;        第二欄寬
 margin:1px;
}

 

現在把全部整合起來就變成


/*總版面*/
#body-div{
 width: 900px;
 background:url(http://p4.p.pixnet.net/albums/userpics/4/5/420045/49dad6603e76f.png) left top repeat-y;
 position: relative;
 margin:0 auto 20px;
 }


/*主要內容區*/
#content{
 float:left;
 width: 490px;
 padding: 3px;
 }


/*總側欄*/
#links{
 float:right;
 width: 400px;
 margin-right:1px;
}


/*側欄1*/
#links-row-1{
 float:left;
 width: 198px;
 margin:1px;
}
/*側欄2*/
#links-row-2{
 float:right;
 width: 198px;
 margin:1px;
}

 

到這邊為止,只要把上面的語法加到全部的最底端(原來的內容不必理會,因為最底下優先權最高),就會讓畫面變成三欄。

來看看畫面變成怎麼樣。

我使用兩種瀏覽器來瀏覽,這樣可以知道再不同瀏覽器下,畫面有沒有想同。

先看看IE8.0的畫面

框框的地方,麻吉交流和碎碎念超出範圍,打圈的地方目前正常

IE.JPG 

 

再看看Maxthon的畫面。(這是我慣用的瀏覽器),打圈的地方重疊了,這表示在不同瀏覽器之下,同樣語法,畫面卻會不同。

若自己修改語法,或是套用現成的版面,最好選擇越多瀏覽器支援的越好。

maxthon.JPG 

 

 

 

修改語法之後,目前出現了三個問題

1.麻吉交流超出畫面

2.碎碎念超出畫面

3.本文區有部份和側欄區重疊

接著來修改這三個問題。

找到之後,將寬度修改為198px或是 auto。(auto是自動配合)

 

/*文章+列表+回應區塊*/
#article-area{
 width: 490px;        修改寬度,讓本文區和側欄不會重疊。
 margin:0 auto;
 }

/*麻吉交流*/
#headshot {
 background:url(http://p4.p.pixnet.net/albums/userpics/4/5/420045/49dad6619e319.png) left top no-repeat;
 width: auto;    修改寬度為auto,自動配合,或是改為198px也可。
 height:105px;
 margin: 15px auto;
 position: relative;
 }

/*碎碎念*/
#murmur{
 width: auto;  修改寬度為auto,自動配合,或是改為198px也可。
 margin: 15px auto;
 background:#ffdde2;
 position:relative;
 }

 

修改完上面三項後,再來看看有沒有成功。

側欄修正.JPG 

三個超出範圍重疊的地方已經正常了,現在剩下圖中三個圓圈的地方,各有一條垂直的細線影響畫面。

左右兩條其實沒差,但中間那條破壞了美觀。

但很可惜的是,這三條線其實是一張圖,一體成形,沒法單獨修改。

解決的方式1.另選一張適合的圖來替換  2.取消掉這張圖。

我們選擇取消圖。

所以找到這張圖的位置。將畫面中反白那行去除掉。

這一段語法其實就是我們一開始所找出來的『總版面』,的位置。

去背景圖的那行語法.JPG 

去掉之後變成

/*總版面*/
#body-div{
 width: 900px;
 position: relative;
 margin:0 auto 20px;
 }

如此一來,那三條線就不見了。

 

 

去總背景圖.JPG 

現在畫面分成三欄,也沒有任何重疊,三條底線的圖也消失了。可以說大公告成了。

但是還得檢查一下有沒有遺漏。

我們點進去文章看看。

 

 

迴響區變形.JPG 

迴響區的畫面被截斷了,連『送出』的按鈕也蓋住了。

 

 

 

 

 

所以我們只好在進行修改。

/*迴響*/
#comment-form {
 background:#ffecf0;
 border:1px solid #ffe3e9;
 padding:  10px 5px;
 width: 490px;        修改寬度為490。
 margin: 10px auto;
 }

 

 

 

修改過後就變成這樣

迴響修正後.JPG 

 

 

 

來看看最終完整修正後的畫面。

完成圖.JPG 

 

這樣就讓二欄的版面,切割成三欄。

 

 

 

 

要補充的是

1.若要讓側欄放在左右兩側,則需要使用定位功能,將其中一欄強制移動,且將本文區,也往中間移動。有興趣再研究吧!

2.我忘了檢查版主回覆,是不是有變形,若有、修改方法和迴響一樣,改個寬度就好了。

3.側欄、本文的寬度,可以自行分配,或是加大邊界讓畫面不會太擠,這個自己調整。

4.有些很奇怪的版面,各種區塊都移動到正常不會出現的地方,這是使用強制定位的功能,若不熟悉就盡量不要去修改那種版型。

5.牽涉到圖的部份,最好都另外準備一張符合尺寸的新圖替換,才不會讓畫面怪怪的。

6.語法我都簡化過了。最終修改到的語法我放在最後面,只要複製這些語法,貼到CSS欄最底下,畫面就會變成三欄。

7.有問題就留言一起討論吧!

 

 


 

『所有更動過的完整語法』

 

/*總版面*/
#body-div{
 width: 900px;
 position: relative;
 margin:0 auto 20px;
 }


/*主要內容區*/
#content{
 float:left;
 width: 490px;
 padding: 3px;
 }

/*文章+列表+回應區塊*/
#article-area{
 width: 490px;
 margin:0 auto;
 }

/*總側欄*/
#links{
 float:right;
 width: 400px;
 margin-right:1px;
}
/*側欄1*/
#links-row-1{
 float:left;
 width: 198px;
 margin:1px;
}
/*側欄2*/
#links-row-2{
 float:right;
 width: 198px;
 margin:1px;
}

 


/*麻吉交流*/
#headshot {
 background:url(http://p4.p.pixnet.net/albums/userpics/4/5/420045/49dad6619e319.png) left top no-repeat;
 width: auto;
 height:105px;
 margin: 15px auto;
 position: relative;
 }

/*碎碎念*/
#murmur{
 width: auto;
 margin: 15px auto;
 background:#ffdde2;
 position:relative;
 }


/*迴響*/
#comment-form {
 background:#ffecf0;
 border:1px solid #ffe3e9;
 padding:  10px 5px;
 width: 490px;
 margin: 10px auto;
 }

創作者介紹

非學不可

鹿老師 發表在 痞客邦 PIXNET 留言(12) 人氣()


留言列表 (12)

發表留言
  • suwarren
  • 大姐~
    只能說你太拼了
    為了讓大家方便自己修改
    你的精神太令人佩服了
    給你拍拍手

    版主回覆:(02/25/2010 09:05:32 AM)


    謝謝^^
    有空多來看看唷
  • ivy2156
  • 佩服佩服!謝謝大大無私的教學

    版主回覆:(02/25/2010 05:04:23 AM)


    謝謝^^
  • dainel1022
  • 哈囉,你好

    能不能向大大請教一個問題

    我想把文章 跟相片能放大

    應該是調整下面這個
    /*主要內容區*/
    #content{
    float:left;
    width: 490px;
    padding: 3px;
    }

    可是調整完,欄框是變大了沒錯
    內容還是跟原始一樣

    這樣該如何解決呢

    版主回覆:(02/25/2010 10:13:00 AM)


    你說的內容,是指?

    那語法是將區塊加大,而內容若沒修改則會跟原來一樣沒錯。

    但不知你想修改的內容是那一方面?以及圖片的放大是指?

    能否詳細描述一下的想要修改的具體樣子(例如 文字加大? 同一行能擠更多字進去?圖片放大? 還是?)
  • dainel1022
  • 恩~我指的內容就是

    文章的版面加大

    貼上的照片也可以加大

    如果直接在文章把照片拉大

    拉大的部份就會被切掉了

    我看了部份的BLOG

    他的文章版面大,所能顯示的就能變大

    版主回覆:(05/18/2010 02:47:30 PM)


    我沒測試過拉大以後會不會被切掉,還是你拉超過版面大小導致。(這方面我需要測試才能確認)

    但我建議你不要使用拉大的功能,改用自訂大小的功能。

    在圖片上右鍵,可以編輯圖片大小。

    例如你版面設定寬600,那自訂圖片就不要大於600。(我懷疑你使用拉大的方式,拉超過600而不曉得已經超過寬度,所以被截掉超出的部份)

    但我沒測驗過,無法確認是否你拉超過尺寸。

    我看過你的部落格,圖片大約600寬,所以文章區塊範圍應該也是600多附近。
    試試看拉大以後,如果被截掉,看看圖片是不是超過600太多。

    如果還是有這種問題,再跟我說,我去研究看看問提出在哪裡。。(我有想到一個可能性,大概知道你問題出在哪,不過你先試試看)


    ps.你的問題,我到你留言板回覆你。怕你沒看見。
    ///////////////////////////////////
    以下回覆也在你的留言板留言
    --


    你的問題應該出在我寫的那篇三欄轉二欄裡面所提到的『迴響』的問題一樣。 (一開始我沒發現你的問題是在這篇文章下,所以沒聯想到你是想三欄轉二欄,還以為止是單純修改主文區塊的問題。。)

    也就是只改到最外圍的區塊框,卻沒修改裡面的區塊,這個問題。

    #content的內容包含了全部主文區的東西,例如迴響、標題等等..
    單純加大#content這個框,只是主文區範圍變大,但標題寬度,迴響寬度卻都沒改到,於是被限制在原來的大小,無論你怎麼拉大圖片,都無法超出原始設定。

    解決的方法跟文章中解決迴響超出範圍一樣,找到對應區塊然後修改大小即可。

    試試看修改這幾個地方。

    #article-area/*文章+列表+回應區塊*/
    #article-box/*文章+列表區塊*/
    .article-area-title/*文章+列表區塊之標題*/
    title h2 a/*文章標題*/
    .article-body/*文章內容區*/
    article-content/*文章內文*/

    至於要修改哪一個,可能要試一下,因為原版面作者若有訂出大小,則你必須修改成你要的大小,若原作者沒有設定,則會採用預設值。檢查一下原來的作者有沒有個別針對這些區塊做設定。
  • dainel1022
  • 恩,確定是超過版面設定寬的才會被裁掉....

    我主要的問題是....怎麼可以把版面設定寬能

    在加大一些呢,因為直接更改#content{

    感覺版面還是沒有變大的說



    版主回覆:(05/19/2010 01:49:15 PM)


    看你的留言板,我有回覆如何解決了。

    若不行在跟我說
  • dainel1022
  • 不好意思我又來了打擾了

    我在你的留言版留了css@@

    版主回覆:(05/19/2010 01:49:58 PM)


    不好意思現在才看見。
    現在有點晚了,我明天找時間用測試帳號套用看看問題出在哪裡,再跟你說明。
  • dainel1022
  • 真是的....套用這版面是可以了

    所以就不用在麻煩你測試那css

    可是照片放大好像要用手動拉大

    不知道有沒有其它設定可以讓照片放大呢


    不過真的很感謝你陪我耗了兩天^^"


    版主回覆:(05/19/2010 02:44:25 PM)


    如果問題解決了先恭喜你囉^^
    最近忙開課的事情無法抽空回覆留言
    還有其它的問題歡迎再來唷

  • Yo-Wen Liang
  • 剛玩Blog沒多久,
    才發現這個Blog講pixnet的CSS講得很清楚,
    之前還自己在那邊摸索了半天,
    改語法改得頭很大..+>+"

    版主回覆:(05/31/2010 01:55:23 PM)


    哈哈哈!
    這要感謝sophie,因為她一直努力將教學寫的比較適合初學者看。
    畢竟、單純只是要語法教學,網路上一堆,可是要寫的簡單化,就有難度了。
    謝謝你的誇獎,他會很開心的。

    by 金盞花
  • VivianChai
  • 版主~
    不好意思請請教你
    我跟四樓的有大致相同的問題

    我是套用別人設計好的版型直接修改部分
    可是像我這篇文章內照片
    http://vivian1519.pixnet.net/blog/post/13594695
    橫式照片超過600切會被切到
    我有試改你說的#content中的width
    可是一改大側邊欄位就會全部不見
    也沒辦法從側邊欄位那修改側邊欄位的寬度
    可以請你教教我嗎?
    感激不盡!!





    版主回覆:(08/26/2010 02:05:53 PM)


    回在下篇
  • VivianChai
  • 我的問題已解決了!
    謝謝你囉....^^

    版主回覆:(09/03/2010 10:02:11 PM)


    太厲害了,我還沒回覆你就已經搞定。
    因為比較忙,所以有時沒法立即回覆,抱歉。

    修改區塊寬度,常常動一髮牽全身,需要同時對相關區塊做出更動。
    需要對各區塊優先權瞭解,還有定位的問題。
    通常你放大主文區,側欄會自動移位,沒移位應該是該模板的作者,使用了絕對定位,所以就跟主文區重疊了。

    不過因為妳已經解決了,所以我也不清楚問題在哪,但解決了就好。

    能看懂這篇,還能動手改到成功,已經對CSS有充分瞭解了。。︿︿
  • Irene
  • 我想請問
    如果我三欄式的側邊我想要
    左側欄 內文 右側欄
    我語法應該怎麼寫?

    版主回覆:(09/03/2010 10:01:58 PM)


    基本上要看作者怎麼定位的.
    不過這比較簡單,只是移動其中一個側欄跟內文區對換位置.
    你把css寫信寄給我看看,完整的.
    我幫你看看怎麼改.
  • 悄悄話