如題, 因為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 二欄式版面加大寬度設定*/
.twocolga #yhtw_mastfoot, .twocoldr #yhtw_mastfoot {width:950px;margin:0 auto;}
.twocolga[class], .twocoldr[class]{min-width:950px;behavior:none;}
.twocolga .ycnt3col,.twocoldr .ycnt3col {zoom:1;width:950px;text-align:left;margin:0 auto;}




 

 

 

再補充: 若你和tina一樣想依照版面設計感覺調整三欄+配合最常看到 1024px畫面

所需語法如下: 950~1000 px均可

   









/*三欄式版面寬度設定*/


.thrcol #yhtw_mastfoot {width:950px;margin:0 auto;}
.thrcol[class]{min-width:950px;behavior:none;}
.thrcol .ycnt3col {zoom:1;width:950px;text-align:left;margin:0 auto;}





arrow
arrow
    全站熱搜

    Terry 發表在 痞客邦 留言(0) 人氣()