側欄的文字跑掉了 - 部落格

By Caitlin
at 2010-02-04T02:47
at 2010-02-04T02:47
Table of Contents
※ 引述《CiaCLAMP (大家都熱衷於"板上"的事!)》之銘言:
: http://ma-sa-ya.blogspot.com/
: 這是我目前在使用的
: 就是我目前是左邊主要的main
: 右邊就是sidebar
: 我要如何讓右邊的sidrbar變兩個呢
: 一定要套用新的範本嗎
: 還是我可以在修改html裡面做到呢
: 謝謝
版面配置→修改範本 (不用展開小裝置範本)
先找到這一段:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
很多<b:widget .../>
</b:section>
</div>
緊接著在他下面新增一段:
<div id='sidebar-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'/>
</div>
然後回頭去css的地方,新增#sidebar-wrapper2{}
這是專門控制第二側欄css用的
接著看你想要怎樣子的排列,再去決定括弧內的語法要怎麼寫
基本上只要設定大小和位置就好了,其他細節會自動套用.sidebar為首的css
在大小方面~兩側欄與文章的width、margin、padding
總和不能超過#outer-wrapper的width
至於位置的設定
若新側欄要跟原側欄一樣都在右邊,那就給它下float:right;
如果要一左一右,文章區塊在中間的話
那新側欄除了給它下float:left; 之外
也要去把#main-wrapper{}的float:left;改成right
以上。
--
: http://ma-sa-ya.blogspot.com/
: 這是我目前在使用的
: 就是我目前是左邊主要的main
: 右邊就是sidebar
: 我要如何讓右邊的sidrbar變兩個呢
: 一定要套用新的範本嗎
: 還是我可以在修改html裡面做到呢
: 謝謝
版面配置→修改範本 (不用展開小裝置範本)
先找到這一段:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
很多<b:widget .../>
</b:section>
</div>
緊接著在他下面新增一段:
<div id='sidebar-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'/>
</div>
然後回頭去css的地方,新增#sidebar-wrapper2{}
這是專門控制第二側欄css用的
接著看你想要怎樣子的排列,再去決定括弧內的語法要怎麼寫
基本上只要設定大小和位置就好了,其他細節會自動套用.sidebar為首的css
在大小方面~兩側欄與文章的width、margin、padding
總和不能超過#outer-wrapper的width
至於位置的設定
若新側欄要跟原側欄一樣都在右邊,那就給它下float:right;
如果要一左一右,文章區塊在中間的話
那新側欄除了給它下float:left; 之外
也要去把#main-wrapper{}的float:left;改成right
以上。
--
Tags:
部落格
All Comments

By Gary
at 2010-02-08T19:27
at 2010-02-08T19:27

By Gilbert
at 2010-02-12T18:38
at 2010-02-12T18:38

By Hardy
at 2010-02-13T09:25
at 2010-02-13T09:25

By Poppy
at 2010-02-16T00:01
at 2010-02-16T00:01

By Christine
at 2010-02-17T01:47
at 2010-02-17T01:47
Related Posts
請問FC2套用樣板..

By Skylar DavisLinda
at 2010-02-03T13:50
at 2010-02-03T13:50
側欄的文字跑掉了

By Edith
at 2010-02-03T06:45
at 2010-02-03T06:45
改進為友善的部落格10點

By Bennie
at 2010-02-03T06:03
at 2010-02-03T06:03
加入外掛,側邊欄跑下去了!!

By Sierra Rose
at 2010-02-03T01:19
at 2010-02-03T01:19
Slide問題請教

By Thomas
at 2010-02-02T23:09
at 2010-02-02T23:09