days here| Online
﹥I am 桑妮 :D arrow_61.gif 加我為Pixnet好友
﹥最佳解析度、瀏覽器:1024*768↑ on Firefox & Chrome

※ 近來少使用痞客邦,無法即時回應留言,請見諒噢。
 不回應籠統的問題,沒禮貌的留言也不會回覆。若是有明確問題的留言,看到就會回應。

這次是改變內文和側欄的寬度,這也是很多人問過的問題!:)

 

首先呢,要先知道寬度的英文叫做「width」
若我要設定某區塊為100px,就這樣打width: 100px;

以最常問的內文來說,就是 #content{width: 100px; }當然不可能只設為100px啦…XD)
側欄呢,就是 #links{width: 100px; }

在改寬度有個重點要注意,就是…其實我不知道怎麼說… =  ="
意思就是,例如今天要改內文和側欄的寬度的話,兩者的寬度加起來不能超過 #container 的寬度。

因為 #content 和 #links 都是包含在 #container 下面的,
所以如果 #content 和 #links 的寬度超過 #container 的寬度,#container 包不住這兩樣,就會造成側欄往下掉的悲劇(?)。

*注意:如果 #content 和 #links 有使用 margin-left 或 margin-right 的話,也要把 margin 的數值算進去,不然也會跑版。

再來說說三欄式要注意的,
三欄式的側欄會多兩個設定:#links#links-row-1(三欄式第一欄)、#links-row-2(三欄式第二欄)。
所以改的時候也要注意 #links-row-1 和 #links-row-2 的寬度加起來不可以超過 #links 的寬度噢。(也要記得把margin的值算進去)

 

補充:由於做樣式的慣性,在改的時候或許會遇到一個問題:底圖不變,看起來很奇怪。

因為做樣式時常常會需要製圖美化每個區塊,而背景就是基本上一定會另外做的,所以看到的背景並不是用色碼指定區塊(側欄或是內文)的背景色,而是圖片。既然是圖片,想當然爾光改CSS是不能變動它的囉。 

要改的話只能再做一張新的圖,把原本的圖取代掉。 



 

創作者介紹

Learn to live *

桑妮♥ 發表在 痞客邦 PIXNET 留言(32) 人氣()


留言列表 (32)

發表留言
  • lovejie2005
  • ^^用心的好小孩...
    真棒!!
  • 可是打這個好累噢..Orz
    不過這樣以後就不用一個一個教了~XD
    說到底也是因為懶啦..(汗)

    桑妮♥ 於 2008/05/12 08:05 回覆

  • relaxbobo
  • 我我我...看不太懂 囧
  • 呵呵~不懂沒關係啦!!
    反正小寶沒有要改嘛~ XD

    桑妮♥ 於 2008/05/15 08:13 回覆

  • chien0106
  • hi~
    我覺得你很厲害喔~
    我也想學css
    可以像你們這樣設計樣式,超酷的
    可以建議我該從哪裡學起呢??

    感恩 ^^"
  • 咦咦咦!!!
    我現在才發現這篇迴響 = A ="
    真是不好意思 > x <"
    --
    剛剛點了你的blog
    發現是我的樣式耶!! >///<
    是你改的嗎?
    改得很好看耶 =ˇ=((那個閃閃背景good!
    ((不過有點跑版..超級一點點的一點點~
    那你應該也會一點了吧 ˙ˇ˙?
    有問題需要我幫忙再問我 ^ ^
    P.S.你錢錢好可愛~~~XDD

    桑妮♥ 於 2009/05/05 10:24 回覆

  • chien0106
  • 對呀,是你的樣式呦
    我超愛的~謝謝你做出這麼漂亮的樣式
    我因為想用這個樣式
    所以才從無名搬家來痞客的啦

    我想放上我們家狗狗的照片
    再個人化一點點所以就一點點一點點慢慢的改成這樣了
    花超多時間的
    你不介意真好^^"

    星星的背景是希望格子裡的風格是像樂園一樣的閃亮
    錢錢狗寶貝住的地方充滿歡樂

    我還很菜
    跑版是什麼意思呢??
    ㄎㄎㄎ...

  • 唔!!! (驚!!)
    為了要用我的樣式才跑來痞客嗎?!˙口˙"
    好感動噢~~~~>////<
    真是太謝謝你了~(抱)
    --
    只要是自己要用的
    隨便怎麼改都可以啦~ = ˇ =
    這樣也可以練習練習怎麼弄CSS XD
    --
    你們家真的有歡樂的fu唷~
    錢錢真幸福 XD
    話說我有一個朋友的狗狗也叫錢錢耶!! ˙w˙
    --
    跑版就是..
    東西跑掉了!!(?) XD

    桑妮♥ 於 2009/05/06 07:26 回覆

  • chien0106
  • 原來東西跑掉了>"<
    我都不知道

    因為我家電腦上網是用用kkman跟IE
    我打開來看都好好的,就以為好了,沒想到都跑掉了 >"<

    可以告訴我你用什麼看,然後跑掉了嗎?
  • 噗噗..不用緊張啦 XDD
    也不算跑掉..
    只是下面有捲軸而已 = w ="((被打
    無傷大雅的啦 XD

    桑妮♥ 於 2009/05/07 12:01 回覆

  • jacintachien
  • 修改樣板

    嗨,你好…

    我很喜歡你的樣板耶,都好漂亮喔!
    我已套用了你的樣板0012-2,再此謝謝你囉!^ ^

    因為也想調整側欄和內文的寬度,可是我看了這篇還是有點不懂耶…
    我有找到#content , width=690px,#links, width=272,也有找到margin-left 或 margin-right,可是沒有看到後兩者的寬度,我可以偷懶不去管後兩者是否有寬度,只要將#content和#links的寬度加起來的總和是原來的總合就可以了嗎?也就是原來是690+272=962,我可以直接將內文寬改成710,側欄改成252嗎,因為這樣加起來還是962?

    另外想請問我已更改過header的照片,要如何才能保有和你原先的圖片一樣有左邊的那層像薄紗一樣的感覺呀?

    更改欄寬會影響這層薄紗的顯現嗎?是否要先更改欄寬後再增加圖片上的薄紗才行呢?

    另外我有看到之前你回網友時提到murmur要在後台輸入想說的悄悄話,能否請問後台是指哪兒呀?是CSS語法裡嗎?要到後台哪裡更改?不好意思我不會CSS,所以問了很多問題,麻煩你了,謝謝!
  • margin後的*px就是啦,這部分可以參考下一篇教學"調整邊界" :)
    如果不想管margin的話,那最好就是將它設為0px或是刪掉,就不會影響了。

    摁,一般來說你的想法(要將內文改為710而側欄改為252)是可行的。
    但是這樣式(或者應該說很多樣式)不是以很普通的做法作的,你可以到CSS裡找到#container,裡面有一串設定背景的語法,就會發現背景是用圖片做的,而不是一般的色塊。所以,若是依照你的想法這樣改,版子雖然不會跑掉,但是因為背景圖的關係,看起來會怪怪的,讓人以為有跑版。
    (也就是你問的“更改欄寬會影響薄紗的顯現嗎”,你可以先照著你所想的改改看,就知道我的意思了)

    header的圖也是我做的,所以你說的那個薄紗,是沒辦法直接保有的,要改的話必須自己用繪圖軟體或影像處理軟體做噢!

    改murmur不用改CSS,到後台/好友互動(可以選部落格或是相簿的那排),
    點左邊選單的[我的碎碎念]就會有一個新視窗跳出來,然後點[使用pixnet帳號登入],就會進到自己的碎碎念版面了。

    不用客氣,有問題可以再問我:D

    桑妮♥ 於 2009/10/26 22:37 回覆

  • 悄悄話
  • 悄悄話
  • 蜜絲飛揚 小姐
  • 疑疑疑疑疑!?? 我用的是firefox的,才剛更新過(Orz)
    好吧,如果別人看了沒問題就這樣吧? haha

    我的文章常常不知不覺就漏漏長(///搔頭),可怕的碎念啊!!!!
  • Mi 媽咪
  • 您好,
    謝謝您的教學,
    我剛在摸索部落格,真的很新手,
    您的教學對我來說,已經很白話文了....
    感謝.....
    可是我不知道這些語法要在哪修改耶???

    我是套用既有模式,
    但覺得側欄寬度太寬,
    但在在"自訂樣式進階版"中的"側欄 (#links)"設定選項只看到 背景顏色,文字顏色的修改,沒看到可以更改側欄寬度......

    問客服的回答是
    "目前需透過調整部落格樣式的CSS語法來進行修改。......請您不吝親自於網路上搜尋符合您需求的相關資訊....."

    還好我一查就是您熱心解說的文章,
    不好意思,問這麼基本的問題....
    謝謝。 ^ ^
  • Mi 媽咪
  • 妳好,
    我找到"編輯 CSS 原始碼"處了,
    我想將側欄調窄,

    #links {
    float:left;
    width:290px;
    }

    改為
    #links {
    float:left;
    width:190px;
    }
    也儲存了....
    部落格頁面卻沒更動 側欄寬度,
    是我遺漏了什麼步驟嗎??

    然後,
    側欄調窄,就想將主文欄 調寬,
    卻沒找到#content{width:
    有可能有其他 英文嗎??

    謝謝,非常感謝您的分享與教學...^ ^
  • 我到妳的網誌看了,有喔,到CSS原始碼那邊再找找#content裡的width(可以用「ctrl+F」輸入「#content」找),現在的設定值是635px。

    若要把#links改為190px,可以把#content改為735px,改好後按右下角的儲存按鈕。

    另外有一點,改好後背景不會變唷。嗯,就是,妳現在的藍底和白底處的寬度是不會變的(或許是因為這樣所以妳看起來像改了數值卻沒更動),因為背景圖是製作者在做的時候就做好了,除非再做一張新的圖或是把現在的圖撤掉,不然是不會變的。(這樣講可能有點模糊,先將側欄和主文寬度改好就知道我的意思了)

    試試看吧,有問題可以再問我。:)

    桑妮♥ 於 2012/04/12 20:25 回覆

  • 咪 媽
  • 謝謝您的回覆,
    您回覆得好仔細,
    謝謝您.....

    真的耶~~~
    "是藍底和白底處的寬度是不會變的(或許是因為這樣所以妳看起來像改了數值卻沒更動)"
    ......您完全說對了 Orz...............
    那就算了,目前沒有時間研究 換底圖,就先這樣子囉~~~~

    謝謝您的熱心,
    那真的還可以問一個笨問題嗎??

    行高(行距)要怎麼調整?? 客服也是叫我自己查CSS碼....
    我還沒爬文查,可以直接請教您嗎??
    非常非常感謝您 ^ ^
  • 嗯,其實如果你會一點製圖的話,換底圖挺簡單的,於CSS是只要換個網址的事。

    行距的話,找CSS裡的.article-content{line-height: *px; }
    改*數值就可以了,數字越大距離越大(如果沒有line-height可以自己加進去)。

    不客氣:)

    桑妮♥ 於 2012/04/13 10:02 回覆

  • 咪 媽
  • 謝謝,謝謝,
    我找到了,也試修改了,可以預覽已經成功了,
    但是我還沒正式改,
    因為解決了行高設定,要大改編排,要晚上才有時間弄了
    謝謝,謝謝,妳真的很厲害又有耐心....

    ㄟ....可以再請問一個問題嗎??

    要如何使 側欄中,
    "文章分類" 處於展開狀態....
    讓何人來瀏覽,都是展開狀態,
    就是可見"資料夾"內的分類內容....

    我問客服的回答,
    "站方已收到您的提問,於文章分類與資料夾的部份,目前站方預設皆為收起的狀態,暫未有提供會員自行設定為全部展開的功能,還請您的見諒。"

    這次連叫我去查CSS都沒有,
    所以是連CSS 那都不能改嗎??

    謝謝,感謝您這麼熱心的幫忙,
    真的幫了我超大超大的忙....
    未來我寫"成立部落格的歷程"文,
    可以把妳供出來嗎??
    謝謝。 大感恩。
  • 嗯,是的喔,這方面就是要跟站方建議可以修改的了。

    噗哧,可以啊。舉手之勞,不用如此客氣,而且也是因為妳態度超好,讓人忍不住想幫忙。:)

    桑妮♥ 於 2012/04/16 09:55 回覆

  • 咪 媽
  • 謝謝您的回覆 ^ ^

    所以只能希望 站方趕快修改成有這個 功能了.....
    希望不會遙遙無期 ^ ^

    謝謝您,是您對每個提問的人,都很有耐心 細心....又很厲害
    謝謝您的幫忙 ^ ^

    阿~~可以再請問一下,(拍謝 一堆問題...)

    請問,我本來想設FB同步發表文章,
    不過痞客邦要我同意的 授權,讓我有點害怕

    1.以我的名義貼文??
    2.「痞客邦 PIXNET 」可以存取你的資料,即使你並沒有在使用這個應用程式。???

    因為我不同意,所以一直沒能同步成功 @ @

    所以先聽聽前輩的經驗及意見,

    同意這二個授權 沒關係 沒有後遺症嗎??

    謝謝喔~~ ^ ^ 一直麻煩您
  • 那不是痞客邦要你同意,是FB要你同意,如果你常用FB就知道每要用某個東西就會跑出這種授權的讓妳同意。

    以名義貼文就是,例如:你發了一篇文章,有選擇同步的話,FB就會有你大頭發出的痞客邦新發文訊息,如果要同步,這是必須的。

    存取資料我就比較不清楚,如果你信任痞客邦(或FB)可以同意,不然應該可以把它打叉吧(滑鼠移到該項上面,右上角)。

    桑妮♥ 於 2012/04/18 18:06 回覆

  • 悄悄話
  • 咪 媽
  • 謝謝妳的回覆,
    之前就是"把它打叉",
    就一直沒能同步成功>"<
    我會再試試看的......
    再次 大大大感謝妳 ^ ^
  • 不客氣:D

    桑妮♥ 於 2012/09/24 09:12 回覆

  • 悄悄話
  • Jei
  • 您好~剛剛去改了~
    但是搞不定~
    現在版面亂掉~
    修改不回了來!
    糟糕~XD
    可以幫我看一下問題在那邊嗎?
    感激不盡了~
    http://jeiphoto.pixnet.net/blog
  • 嗯,你應該已經改好了吧?(這麼久了)
    有問題可以再問我,有空會回:)

    桑妮♥ 於 2012/09/24 09:12 回覆

  • 悄悄話
  • simplelamp
  • 謝謝囉~
  • 不客氣:)

    桑妮♥ 於 2013/01/12 08:56 回覆

  • smilesquare
  • 你好
    我目前用的是這個樣式
    http://panel.pixnet.cc/theme/blog/5669
    他很漂亮帶我覺得內文的地方太窄了
    請問要怎麼改成寬板呢?
    我希望白色的部分少一點
    中間紅綠藍整個放大變寬

    可以給我一些建議嗎?
    或是要去哪裡爬文改CSS

    謝謝你
  • 先找找看CSS裡的#body-div或是#container裡面有沒有width,那個數值是整個樣式的最大寬度。看你需要多寬就把數值改多寬。例如螢幕1024*768的建議改成1000px。

    然後照我這篇文章的找到內文(#content)和側欄(#link-row-1、#link-row-2)的寬度,大概調一下看你要多寬就改width的數值,不能超過上面#body-div或是#container的寬度。

    如果改好之後側欄往下掉的話就表示內文和側欄的寬度加總起來超過全樣式寬度,再稍微調一下數值就可以了。
    -
    噢對了,如果改好之後發現文字範圍變了,但底圖(紅綠藍色部分)卻還是一模一樣的話,那就表示作者在做樣式時把背景弄成圖片了,這樣是無法更改的(表示紅藍綠不是顏色而是圖片)。

    桑妮♥ 於 2013/09/03 00:26 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • VIVI
  • 好正啊!我找了很久啊!終於找到你的文章!真的是謝謝你!
  • 不用客氣,很高興有幫到你哦~

    桑妮♥ 於 2014/01/18 08:43 回覆

  • 浮生若夢
  • 您好,我還是看不懂怎麼用,可以請您直接跟我說我如何改成寬版嗎?謝謝您
  • @ @?

    麻煩請再問具體一點。
    改成寬版的意思是?要充滿整個螢幕嗎?

    桑妮♥ 於 2014/01/18 08:44 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • citi336
  • 哇~ 謝謝分享~
找更多相關文章與討論