如題, 因為2008年2月25日奇摩部落格的css限制語法限制不能有負數值,
因此有動到這段語法的文章: 如何加大側欄寬度以及之前有發表如何讓二欄的主版面變寬？ 所教的全部都無效 !
其實tina自己並不太介意側欄寬度, 因為以多數1024px畫面用三欄版面扣去加大部份,
文章區相形變小,我個人偏愛二欄版型, 只是奇摩部落格自定值實在太小不太好用...
不死心啊 ! 方才把奇摩部落格css預設值研究一下....
如下這是有調整版面寬度部份原始語法:
取自 :(http://tw.yimg.com/i/tw/blog/css/blog_global061120.css)
/*three col layout*/
.thrcol {width:100%;behavior:expression(this.style.width=(document.body.clientWidth<920)?"900px":"auto");}
.thrcol[class] {min-width:930px;behavior:none;}
.ycnt3col {zoom:1;margin:0 10px;}
.ycnt3col:after {content:".";height:0;visibility:hidden;display:block;clear:both;}
由上定義可看出三欄總寬度至少900px以上, 扣去側欄部份其餘給主要文章區,
這也就是為何三欄總是佈滿整個版面了, 在1024px或1280px畫面看起來還ok,
可是目前漸漸不少的特大螢幕+16:9的畫面, 實在是沒有美感可言.....
/*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, 扣去側欄150px後文章區實在給它有夠小, 動不動就把側欄硬擠到下方, 也是沒有美感可言....
tina目前心得只針對二欄版面, 只要動總寬度數字, 就可以達到想要的美感了 !
也就是把原先750px調大為950px, 如下這是沒加大文章區的二欄+1024px畫面參考:
如下這是加大文章區的二欄+1024px畫面參考: 是不是看起來舒服多了呢 ?
由此看出不用受限側欄要在左方或右方, 只要三段語法一切搞定了 ! ^^
後記: 我會補上原先發表版型文章, 想用的朋友也可以自行加上即可 !
|
/*two col layout 二欄式版面加大寬度設定*/ |
|
/*三欄式版面寬度設定*/ .thrcol #yhtw_mastfoot {width:950px;margin:0 auto;} |
