大家有發現搜尋文章的功能區塊被我搬到中間欄位的最上方嗎？
沒錯，有鑑於很多網站提供的站內搜尋都在明顯的位置，所以我也試著將位於左右兩側的側欄Sidebar模組，透過CSS設定，將它搬移到中間的欄位位置！

首先要將中間欄位的文章主體位置下移，騰空出一些位置給側欄Sidebar區塊使用！

調整前	調整後
/*中間欄*/ #mid{  position:center;  margin: 0px 235px 0px 235px;  padding: 0px 0px 0px 0px;  text-align:left;  z-index:0;  overflow:visible; }	/*中間欄*/ #mid{  position:center;  margin: 60px 235px 0px 235px;  padding: 0px 0px 0px 0px;  text-align:left;  z-index:0;  overflow:visible; }

margin: 上  右  下  左; 設定與上邊、右邊、下邊、左邊的留白距離。所以將中間欄距離上方的距離由0px改為60px;

然後調整側欄位的CSS，這邊動的比較多↓

調整前

調整後

/*欄位名稱*/ .sidetitle {  padding-left:45px;  border:#FBD34A 1px solid;  background:#FFF5BA;  font-weight:bold; background-image:url(http://s.blog.xuite.net/_image/skin/windows/85/blog011_2.gif);  color:#CC6600;  letter-spacing:0.1em;  font-size:17px;  margin-top:5px;  text-align: left;  word-wrap: break-word; line-height:34px; height:33px; } /*搜尋文章*/ .searchTitle li{  list-style:none; } .searchTitle{ } .searchSide {  text-align:left; }

/*欄位名稱*/ .sidetitle {  padding-left:0px; } /*搜尋文章*/ .searchTitle li{  padding-left:45px; background-image:url(http://s.blog.xuite.net/_image/skin/windows/85/blog011_2.gif); background-repeat: no-repeat; list-style:none; } .searchTitle{   border:#FBD34A 1px solid;  background:#FFF5BA;  font-weight:bold;  color:#CC6600;  letter-spacing:0.1em;  font-size:17px;  margin-top:5px;  text-align: left;  word-wrap: break-word; line-height:34px; height:50px; width:710px; position:absolute;  top:0px; left:220px; } .searchSide { width:180px; height:50px; position:absolute;  top:8px; left:365px; text-align:center; }

這裡有點小複雜，首先解釋一下，我將原本左右側欄的欄位名稱CSS定義移到各別的.xxxxTitle裡面，也就是不定義在sidetitle"父"CSS模組中，不繼承CSS定義，主要是因為例如框線的部份：border:#FBD34A 1px solid;，原本的左右欄寬度可能只有200px; 所以框線會框200，但是我將其中的一個側邊欄位移到中間欄時，這個側邊欄位寬度已經變大，我的Case是變710(height:50px; width:710px;)，所以如果不調整，那麼框線就會不對！當然還有其他的影響，所以就將這個欄位標題的CSS定義，藍色字的部份都移除，將它移動到其他各個欄位標題的CSS裡面去個別定義！所以其他如.categoryTitle, .calendarTitle,  .chatTitle, .bloglistTitle, .epaperTitle, .customTitle, .resourceTitle, .paintTitle, .musicTitle, .articleTitle, .messageTitle, .countTitle, .rssrollTitle, .rankTitle, .albumTitle, .linkTitle, .pTitle, .hotArticleTitle, .personaltitle都可以比照調整修改(就是將原本的.sidetitle裡的CSS(藍色字)複製搬移過去)，在此就不多做說明。另外原本欄位標題的背景圖片CSS設定，則不是搬到.xxxxTitle裡面，而是搬到.xxxxTitle li{}裡面(紅色字的部份)，這樣才會有標題背景。

裡面的重點是要移動位置，所以在.searchTitle{ }.searchSide {}
分別加上位置的CSS語法position:absolute;  top:0px; left:220px;以及position:absolute;  top:8px; left:365px;，將該欄位位置放置到中間欄位的上方！我是將它弄成絕對位置，透過top語法去定義與版面上方的距離(top:0px;)，透過Left去定義與左邊的距離(left:220px;)！
你可以自己調整看看到底需要設定為多少才會擺放正確！