2008-02-21 17:38:16 幸福泡沫

[版面修改] 二欄式版面大小改為 1024px 版本

[版面修改] 二欄式版面大小改為 1024px 版本

 
第一次使用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:expre ssion(this.styl e.width=(docume nt.body.clientW idth<760)?"750p x":"auto");}
.twocolga[class ], .twocoldr[class ]{min-width:750px ;behavior:none; }
.twocolga .ycnt3col,.twoc oldr .ycnt3col {zoom:1;width:750px;text-align:lef t;margin:0 auto;}

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

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

 /*main on right*/   ** 兩欄式 - 窄欄靠左 語法
.twocoldr .yc3main {width:100%;float:right; margin-right:-1 60px;}
.twocoldr .yc3mainbd {margin-right:16 0px;}
.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:lef t;margin:0 auto;}

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

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

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

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

《完》