奇摩側欄css加寬語法破解啦^^

2009060114:16

 

因為為了分享自己創作的欄物,居然忘了奇摩的側欄都粉窄,

結果好友 kittyli 說喜歡的欄物放不下都會截圖顯得不完美,

所以我只好徹夜測試語法,終於讓我破解啦.....呵呵真開心,

這樣一來我製作的小玩意大家就可以美美的放上去囉,

本來已經放棄了奇摩結果居然又給它"遼落去”真不曉得我在忙啥呀??

以下語法我只在我的格上做測試,如果套用有出問題請提出,

我可以再找出問題點做修正呦^^

**適用於ie與firefox,最佳瀏覽設至1024*768**

 

兩欄式 (請先至版型設定設置-兩欄式 - 窄欄靠右)

 

**感謝Tina的圖檔借用呦**

 

備註:現在很多版型(如上圖)都有將文章與側欄框在一起的設置,

可是這樣一來側欄寬度也只能小小的,當你版寬度縮小時,

你只要修改以下語法紫色的數值就可以將側欄整個移動到你理想的位置,

數值越大越往裡頭中間靠,另外側框線也可沿用以前的設置方法呦^^

綠色數值為側欄寬度,可自由調整欄寬

 

 

側欄在右-寬200

.twocolga .yc3main {width:100%;float:left;}
.twocolga .yc3mainbd {margin-right:40px;}
.twocolga .yc3pri {width:100%;}
.twocolga .yc3subbd {width:200px;position:absolute;right:20px;}
.twocolga .yc3sec {display:none;}

 

側欄在左-寬200

.twocolga .yc3main {width:100%;}
.twocolga .yc3mainbd {margin-left:210px;}
.twocolga .yc3pri {width:100%;margin-left:155px;}
.twocolga .yc3subbd {width:200px;position:absolute;left:20px;}
.twocolga .yc3sec {display:none;}

 

 

三欄式  (請先至版型設定設置-三欄式 )

 

備註:版寬設置在980為最佳,因為這樣文章處也不會太窄

 

 

右左側欄-寬200

.thrcol .yc3main {width:100%;float:left;}
.thrcol .yc3mainbd {margin-left:210px;}
.thrcol .yc3pri {width:100%;float:right;}
.thrcol .yc3pribd {margin-right:212px;}
.thrcol .yc3subbd {width:200px;float:left;position:absolute;right:15px;}
.thrcol .yc3sec {width:200px;float:right;position:absolute;left:15px;}

 

左側欄-寬200  右側欄-寬150

.thrcol .yc3main {width:100%;float:left;}
.thrcol .yc3mainbd {margin-left:210px;}
.thrcol .yc3pri {width:100%;float:right;}
.thrcol .yc3pribd {margin-left:0px;}
.thrcol .yc3subbd {width:150px;float:right;position:absolute;right:15px;}
.thrcol .yc3sec {width:200px;float:left;position:absolute;left:15px;}

 

左側欄-寬150  右側欄-寬200

.thrcol .yc3main {width:100%;float:left;}
.thrcol .yc3mainbd {margin-left:160px;}
.thrcol .yc3pri {width:100%;float:right;}
.thrcol .yc3pribd {margin-right:210px;}
.thrcol .yc3subbd {width:200px;float:left;position:absolute;right:15px;}
.thrcol .yc3sec {width:150px;float:right;position:absolute;left:15px;}