close

如何調整部落格版面總寬度?


如題, 因為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畫面
所需語法如下:
   

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

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


本文出自 Tina~小小世界  http://tw.myblog.yahoo.com/tina88888888-babytony/

arrow
arrow
    全站熱搜

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