2013年yahoo與無名小站要關閉

於是把小女兒『小鱉妹妹』的點點滴滴所有紀錄全搬過來這收藏

08年2月CSS新制三欄左右加寬

2008052919:52

饅頭 喜歡三欄模式

 也一直在找尋修正整體格子的美感,也就是欄位寬度

像有些格友製作的作品一定都會尺寸大小不一要如何自我修正呢?

為了不讓放置於自定欄位中,格友作品失真

找尋多方語法之下~饅頭感到滿意的就是這篇

有興趣可以多測試試看囉

 

2008年2月CSS新制三欄左右加寬,重新編輯日期 2008/03/02

2008年2月CSS新制三欄左右加寬(二度空間)重新編輯日期 2008/03/02

   前言:

配合CSS-2008年2月新制語法,用此語法美中不足之處,因受限於奇摩新制訂格式,只能加寬左欄,右欄上限為160px,另外文章欄不得貼超出中間欄寬設定值之圖片或影音連結檔,否則有欄框重疊之現象,同時在此呼籲尋找語法高手,望能突破此語法之缺陷,感激不盡,以下參考語法:

除上述問題以外,應用上有其它問題,請務必回報,謝謝!

PS : 先前引用作廢,因進行複製動作會產生錯誤

/*註解*/可以同時複製貼上,奇摩很雞婆,會幫你清掉!

/*左右140px-中間增大*/
.thrcol .yc3mainbd {margin-left:140px;}
.thrcol .yc3pribd {margin-right:144px;}
.thrcol .yc3sec {position:absolute;width:140px;left:5px; }
.thrcol .yc3subbd {width:140px;}

/*左右160px-中間縮*/
.thrcol .yc3mainbd {margin-left:160px;}
.thrcol .yc3pribd {margin-right:164px;}
.thrcol .yc3sec {position:absolute;width:160px;left:5px; }
.thrcol .yc3subbd {width:160px;}

/*左180px右140px-中間縮*/
.thrcol .yc3mainbd {margin-left:180px;}
.thrcol .yc3pribd {margin-right:144px;}
.thrcol .yc3sec {position:absolute;width:180px;left:5px; }
.thrcol .yc3subbd {width:140px;}

/*左180px右160px-中間縮*/
.thrcol .yc3mainbd {margin-left:180px;}
.thrcol .yc3pribd {margin-right:164px;}
.thrcol .yc3sec {position:absolute;width:180px;left:5px; }
.thrcol .yc3subbd {width:160px;}

/*左190px右140px-中間縮*/
.thrcol .yc3mainbd {margin-left:190px;}
.thrcol .yc3pribd {margin-right:144px;}
.thrcol .yc3sec {position:absolute;width:190px;left:5px; }
.thrcol .yc3subbd {width:140px;}

/*左190px右160px-中間縮*/
.thrcol .yc3mainbd {margin-left:190px;}
.thrcol .yc3pribd {margin-right:164px;}
.thrcol .yc3sec {position:absolute;width:190px;left:5px; }
.thrcol .yc3subbd {width:160px;}

/*左210px右140px-中間縮*/
.thrcol .yc3mainbd {margin-left:210px;}
.thrcol .yc3pribd {margin-right:144px;}
.thrcol .yc3sec {position:absolute;width:210px;left:5px; }
.thrcol .yc3subbd {width:140px;}

/*左210px右160px-中間縮*/
.thrcol .yc3mainbd {margin-left:210px;}
.thrcol .yc3pribd {margin-right:164px;}
.thrcol .yc3sec {position:absolute;width:210px;left:5px; }
.thrcol .yc3subbd {width:160px;}

/*左240px右120px-中間縮*/
.thrcol .yc3mainbd {margin-left:240px;}
.thrcol .yc3pribd {margin-right:124px;}
.thrcol .yc3sec {position:absolute;width:240px;left:5px; }
.thrcol .yc3subbd {width:120px;}

/*左230px右130px-中間縮*/
.thrcol .yc3mainbd {margin-left:230px;}
.thrcol .yc3pribd {margin-right:134px;}
.thrcol .yc3sec {position:absolute;width:230px;left:5px; }
.thrcol .yc3subbd {width:130px;}

示範連結:http://tw.myblog.yahoo.com/jw!MKo7tK2aCR_1ksLizWs-/article?mid=5&prev=-1&next=1

引用:http://tw.myblog.yahoo.com/jw!.KNty8iGR0WBlosOtiUpDA--/article?mid=13176

 

這是 另一篇。。。


左右加寬190px,中間欄 613px

body{width:1000px;}
.thrcol {position:absolute;}
.thrcol .yc3pribd {width:613px;margin:0px 0px 0px 12px;padding:0px 0px 0px 12px;}
.thrcol .yc3subbd {position:absolute;width:190px;right:-2px;margin:0px;padding:0px;}
.thrcol .yc3sec {position:absolute;width:190px;left:0px;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}


左加寬190px,右加寬150px,中間欄 653px

body{width:1000px;}
.thrcol {position:absolute;}
.thrcol .yc3pribd {width:653px;margin:0px 0px 0px 12px;padding:0px 0px 0px 12px;}
.thrcol .yc3subbd {position:absolute;width:150px;right:-2px;margin:0px;padding:0px;}
.thrcol .yc3sec {position:absolute;width:190px;left:0px;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}


左加寬150px,右加寬190px,中間欄 650px

body{width:1000px;}
.thrcol {position:absolute;}
.thrcol .yc3pribd {width:650px;margin:0px 92px 0px 0px;padding:0px 92px 0px 0px;}
.thrcol .yc3subbd {position:absolute;width:190px;right:-2px;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}
.thrcol .yc3sec {position:absolute;width:150px;left:0px;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}


PS:欄位邊界數據調整margin與padding的順序為上、右、下、左

引用:http://tw.myblog.yahoo.com/jw!yr14GvuDRUa82pC0IeI-/article?mid=8417