在前面一篇: [Blogger Hacks] 在 Blogger 標頭圖形上任意移動 Menubar 位置(1) 中,遇到的問題:
缺點:標頭的下方和 Post 區域之間,會多出一列空白。(IE多出的空白高度是Firefox的2倍)
這幾天一直在做調整和測試,總算有點成果。紀錄如下:
- 原本是直接在 Blogger 上的標頭的[網頁元素]上,直接放上 Title 背景圖,現在已移除。而移除的方式: [版面配置]--[網頁元素]--[標頭調整]--[編輯] 把背景圖移除。
- 把原本的上邊 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;
}
- 修改及調整 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;
/*背景顏色改為透明,才能完整顯示背景圖*/
}
- 調整 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:內容-框線內緣的距離。順序:下右上左*/
...
}
沒有留言:
張貼留言