如何把自己變成電腦
把所有快樂儲存起來
將所有煩惱全部刪除
累的時候裝個不斷電
情緒不穩時加穩壓器
需要放空時就重開機
想重新出發請格式化
  C:> Set me = %ComputerName%  
  C:> Xcopy *.Happy %%Me  
  C:> Del *.Trouble  
  C:> If EXIST Tired Setup UPS  
  C:> If EXIST Swing Setup Stabilizer  
  C:> If EXIST Vent Reboot  
  C:> If ResetGame==True Format C:  

12.04.2008

[Blogger Hacks] 在 Blogger 標頭圖形上任意移動 Menubar 位置(2)

在前面一篇: [Blogger Hacks] 在 Blogger 標頭圖形上任意移動 Menubar 位置(1) 中,遇到的問題:

缺點:標頭的下方和 Post 區域之間,會多出一列空白。(IE多出的空白高度是Firefox的2倍)

這幾天一直在做調整和測試,總算有點成果。紀錄如下:


  1. 原本是直接在 Blogger 上的標頭的[網頁元素]上,直接放上 Title 背景圖,現在已移除。而移除的方式: [版面配置]--[網頁元素]--[標頭調整]--[編輯] 把背景圖移除。
  2. 把原本的上邊 Title 背景圖改放在 Outer-wrapper 的 CSS 區段。
    • 區段程式碼如下:紅字部分為增加的部份。
    • #outer-wrapper {
       width:850px;
       margin:0px auto;
       margin-top:20px; /* 原本在 Header-wrapper 區段與螢幕上緣的間距 */
       text-align:$startSide;
       font: $bodyFont;
       background:url("http://sites.google.com/site/japlinchen/dang-an-gui/Head-03.gif?attredirects=0") no-repeat;
      }
  3. 修改及調整 Head-wrapper 區段的設定。
    • 區段程式碼如下:紅字部分為增加的部份。
    • #header-wrapper {
       margin-top:20px;
      *margin-top:0px;/*for IE6*/
       margin-$endSide:0;
       margin-bottom:0;
       margin-$startSide:0;
       padding-top:0px;
       padding-$endSide:0;
       padding-bottom:0;
       padding-$startSide:0;
       color:$titleTextColor;
       background:transparent;
      /*背景顏色改為透明,才能完整顯示背景圖*/
      }
  4. 調整 Menubar 位置的部份,主要增加 margin-top*margin-top (for IE)

IE6的問題(尚待處理問題):

在 Firefox 上已經都能正常顯示,上邊(Title) 及下邊(Main) 之間的間距也都如預期;但是在 IE6 上還就是會多出一段間距。不過至少比之前的間距少很多了。再找時間針對 IE6 作調整吧!

------以下於 2008-12-05 新增

#main-wrap1#sidebar-wrap 區段加入 *margin:-10px 0 0; /*for IE6*/

#main-wrap1 為例:

#main-wrap1 {
 ...
 /* Header 和 Body 之間的間隙 */
 margin:15px 0 0; /*margin:框線外緣以外的距離。順序:下右上左*/
 padding:0 0 10px; /*padding:內容-框線內緣的距離。順序:下右上左*/
 ...
}

IE6 似乎會把 margin+padding 加在一起,我試著只調整過 margin:0px 0 0; 還是會有多出間距,但是,當扣掉 padding 的 10px 之後就OK了。

所以,加入後的程式碼大約如下:

#main-wrap1 {
 ...
 /* Header 和 Body 之間的間隙 */
 margin:15px 0 0; /*margin:框線外緣以外的距離。順序:下右上左*/
 *margin:-10px 0 0; /*專門給IE6看的*/
 padding:0 0 10px; /*padding:內容-框線內緣的距離。順序:下右上左*/
 ...
}

沒有留言:

張貼留言