關於這種網誌版型

Question

http://www.wretch.cc/blog/iakwe
請問這種三欄式ㄉ版行
語法該怎ㄇ寫ㄋ?

Answer 1

相信我，這是用 CSS 寫成的不會有錯(因為它是無名的-.-||)，無論是要一欄、兩欄、三欄甚至於四欄以上都有辦法寫成，差別只在於 CSS 語法的複雜度上而已。給我點時間我可以寫個無名範例給你。

2007-03-01 13:36:33 補充：
再補充一點，無名改變樣式是以純 CSS 方式修改的，就連『樣式修改』裡的三欄 or 兩欄樣式也只是 CSS 不同而已，HTML標籤它是一個子兒都沒動過喔。

2007-03-01 15:29:51 補充：
請先參考以下兩個網頁內容和它們原始碼的 CSS 內容：
網頁一： http://nidgetgod.myweb.hinet.net/sample/nidgetgod1.htm
http://nidgetgod.myweb.hinet.net/sample/nidgetgod_files/blog1.css
網頁二： http://nidgetgod.myweb.hinet.net/sample/nidgetgod2.htm
http://nidgetgod.myweb.hinet.net/sample/nidgetgod_files/blog2.css
注意：以下內容只大概做一些重點說明，我也當你懂 CSS 了一些基本常識就不多贅述。
這兩張網頁是copy我的無名網誌修改而成。網頁一 中是無名有提供的兩欄式版型，而 網頁二 則為我修改網頁一的版型而成的三欄式版型，請注意兩個網頁中的原碼除了在 中引入的 blog.css 檔案不同外，其餘是一模一樣的。
重點來了，兩個網頁我都用了黑色、紅色、綠色框線標示清楚範圍(為了方便修改)，以下內容請參考 blog1.css 及 blog2.css 內容：

步驟一：
找到
#container1 {
position: relative;
MARGIN: 0px auto;
WIDTH: 720px;
}
改變 width: 720px 也就是黑色框線的部份，將裡面的數值改大，為的是能容納三個 or 三個以上的欄位，這點很重要請一定要注意。(這裡我改成 1000px )

步驟二：
找到
#content {
FLOAT: left;
padding-top: 60px;
padding-left: 10px;
WIDTH: 460 px;
}
這裡一樣修改 width: 460px; 不過不一樣的是將數值改小(可改可不改，如果步驟一中的數值改的夠大這裡可以不管他)，改小是為了能騰出更多空間給第三個欄位。(這裡我改成 380px)

步驟三：
找到
#links {
FONT-SIZE: 12px;
width:190px;
padding-right: 30px;
float:right;
word-wrap: break-word;
}
修改 width:190px 將數值改大，這裡也很重要，因為這裡包含除了文章外(紅色區塊)所有可變成第三第四甚至四欄以上的元素(綠色區塊)，請依需要修改。(這裡我將數值改成 500px )
另外補充，注意到我還新增了兩行語法
height: 535px;
overflow: auto;
這是用來縮短右側欄位高度(height: 535px)，但是又必須讓內容完整呈現所以加入(overflow: auto;)來強制顯示捲軸，當然如果你不希望秀出捲軸也可改成 hidden。

步驟四：
這裡是關鍵，延伸至步驟三的說明，將『最新的文章』『最新的回應』(藍色區塊部份)右移(float: right;)並調整位置(margin-top: -630px;)，讓它感覺上就像是第三個欄位一樣。
這裡可用的技巧有三種，我用的是 float ，另外也有 position 的方法，看需要選擇適合的來修改，也有兩種併用的第三種方法，當然其語法的複雜度就不言而喻了。

其他還有一些零零雜雜的細節就由你自己去體會囉。

Answer 2

兩欄跟三欄的設定是決定在 HTML 而不是 CSS

國內的網誌供應商(BSP)大部分都沒有開放修改 HTML
而修改 CSS 語法時無法修改網誌的欄位多寡

所以你在選版型時先選定為 三欄 的版型
再針對版型下去修改 CSS