雅虎CSS將二欄窄欄變寬語法

 
第一次使用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.. )
有錯誤的地方再麻煩前輩指點喔 ^^ 阿里呀多!!

《完》

 

 

 

 

 

QQ我要三欄...我要三欄...(被毆)

不過仔細想想如果我這裡三欄變寬的話那可不得了~~~

因為我有很多文章都是靠著內文欄寬打的,萬一兩側都寬了中間窄了,

那麼文章就難看了~~

真是難以兩全其美啊啊~~~~~(頭痛

 

 


Vemmabuilder 在家創業系統 幫您實現在家工作夢想,

您還在尋找一個 真正可靠的網路賺錢方法?

現在就可以立即開始讓 Vemmabuilder系統幫您賺錢

Vemmabuilder 90天免費網路創業
點我免費試用90天!

-

任何問題?歡迎聯繫 “Minin 讚珉 "
E-Mail: vemmaminin@gmail.com
skype: eadgminin
即時通: eadgminin@ymail.com
MSN: eadgminin@hotmail.com.tw
行動電話: 0980 624999 (中華) 海外請撥+886 980 624999

-

網路行銷 I 在家工作 I 兼職 I 網路工作 I 創業商機 I 直銷 I 電子商務 I 健康生活 I 財務自由 I VEMMA I美商維瑪 I 加盟事業 I 網路開店| 加薪不求人| 自動化系統 | 免費試用


 
arrow
arrow
    文章標籤
    css 二欄窄欄變寬語法
    全站熱搜

    vemma維瑪珉珉Min 發表在 痞客邦 留言(0) 人氣()