如何讓二欄的主版面變寬?

看到有這個語法真的很高興, 因為當初真的不明白奇摩BLOG為何二欄版面是如此小氣型 !

 

想整篇發表引用的網友,只要複製下列語法,進入發表文章後,
先將 觀看HTML 原始碼 打勾,再把語法貼進”空白內容”處,
切記不可預覽,直接發表就可以囉 !
如何使用懶人引用法? 

<embed src="http://tina123.ic.googlepages.com/1117022" width="550" height="600"></embed>

看到吧?! 二欄的版面若能大些不是很好用嗎 ? ! 不會被一些畫面大於550px硬是把左右欄位 擠到最下方啊 !本篇給那些不想放太多主版想要大些的朋友 !

以下請看提供語法的blog可以明白我說什麼囉 ! 散落至藍色星球的星星碎片

第一次使用yahoo blog 時~
發現... 只要是二欄式的版面,寬度都只有 750 px 左右
三欄式的版面才有到 1024px 左右~~
可是 ... 我不想用三欄 o . o|| 可是二欄的版面我又覺得太小....
只好 ... 啟動 css 修改模式囉 一一+ (笑)

原版面設定css語法如下: (二欄)
-------------------------------------------------------------------------------------------------------------------
/*two col layout*/   ** 兩欄式版面大小設定 語法
.twocolga #yhtw_mastfoot, .twocoldr #yhtw_mastfoot {width:750px;margin:0 auto;}
.twocolga, .twocoldr {behavior:expression(this.style.width=(document.body.clientWidth<760)?"750px":"auto");}
.twocolga[class], .twocoldr[class]{min-width:750px;behavior:none;}
.twocolga .ycnt3col,.twocoldr .ycnt3col {zoom:1;width:750px;text-align:left;margin:0 auto;}

以上可以看出版面寬度被設定在 750px

/*main on left*/       ** 兩欄式 - 窄欄靠右 語法
.twocolga .yc3main {width:100%;float:left; margin-left:-160px;}
.twocolga .yc3mainbd {margin-left:160px;}
.twocolga .yc3pri {width:100%;}
.twocolga .yc3subbd {width:150px;float:right;}
.twocolga .yc3sec {display:none;} /*in case there's content*/

 /*main on right*/   ** 兩欄式 - 窄欄靠左 語法
.twocoldr .yc3main {width:100%;float:right; margin-right:-160px;}
.twocoldr .yc3mainbd {margin-right:160px;}
.twocoldr .yc3pri {width:100%;}
.twocoldr .yc3subbd {width:150px;}
.twocoldr .yc3sec {display:none;} /*in case there's content*/

↑↑↑↑↑ 以上可以看出窄欄寬度設定為 150px ,其餘寬度分配給主要欄位。
------------------------------------------------------------------------------------------------------

目前版面css設定如下:  ** 以下設定只針對 兩欄式 - 窄欄靠左
------------------------------------------------------------------------------------------------------
/*two col layout*/
.twocoldr #yhtw_mastfoot {width:950px;margin:0 auto;}
.twocoldr[class]{min-width:950px;behavior:none;}
.twocoldr .ycnt3col {zoom:1;width:950px;text-align:left;margin:0 auto;}

.twocoldr #yhtw_mastfoot  最底下版權宣告那一欄的寬度設定
↑ .twocoldr .ycnt3col  整個版面的寬度設定

/*main on right*/
.twocoldr .yc3main {width:750px;float:right; margin-right:-10px;}
.twocoldr .yc3mainbd {margin-right:5px;}
.twocoldr .yc3pri {width:100%;}
.twocoldr .yc3subbd {width:200px;}
.twocoldr .yc3sec {display:none;} /*in case there's content*/

↑↑↑↑↑ .twocoldr .yc3main  主要欄位範圍的寬度設定,也可以用%的形式設定;其中 margin-right:-10px; 效果等於左側頁面邊緣的距離(記得是負的喔!)
↑↑↑↑↑ .twocoldr .yc3mainbd  主要欄位與右側頁面邊緣的距離
↑↑↑↑↑ .twocoldr .yc3subbd 窄欄的寬度設定
------------------------------------------------------------------------------------------------------
以上就是目前版面的css語法了~ ^^ 不知道有迷有像我一樣在意版面大小的人呢(笑)
有些用不到的語法我就直接刪除了,重點須修改的地方才有用不同顏色標示出來! 應該看的懂吧?qq?
窄欄靠右的css設定我沒試過,不過應該是差不多的方式吧! ^^|||
所以還是要聲明 以上是 二欄式 - 窄欄靠左 的設定方式喔! (爆)
祝版面修改成功 ^o^/

題外話:
其實在 .twocoldr .yc3main 應該也是與右邊頁面邊緣的距離
只是套用的地方不同,所以我直接寫成 "效果等於左邊頁面邊緣的距離" ,想知道更清楚的話,再麻煩其它高手解答好了 ^^|||  (我不知道該如何說明清楚 ....... orz.. )
有錯誤的地方再麻煩前輩指點喔 ^^ 阿里呀多!!

《完》
tina 引用:http://tw.myblog.yahoo.com/jw!U9K4kA6fGRnftRdJ8uaazhLU._MX/article?mid=12