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

原本參照 Fun New Run High 的介紹: 在blogger(blogspot) 標題列下加入一個水平列的功能選單(menu bar) 在 Blogger 標頭圖形底下新增一個 {HTML/Javascript}，來製作一個 Menu Bar。

遇到的問題：

• 在 Firefox 和 IE6 中，顯示位置會不一樣。
• 螢幕解析度不同時，顯示位置也會跑掉。 (如1024x768 及 1280x1024)

想要的效果：

• 想要讓 Menubar 能移動到標頭圖案的右上角。
• 在 Firefox 及 IE 中，顯示的位置要一樣。
• 解析度不同時，Menubar 的位置不會跑掉。

原因理解：

• 原文的方式採用position: absolute; (絕對位置)的方式，這樣調整好的位置，在不同的解析度下，顯示位置會跑掉，可能比較適合居中顯示的方式。
• 許多在 CSS 處理 Firefox 及 IE 的顯示問題，是採用相對位置(relative) 及浮動(float) 的方式解決。
• DIV 會自動換行，SPAN 不會自動換行，SPAN 可以放在 DIV 之間使用。

處理方式：

1. 將 MenuBar 的CSS 設定和顯示內容都放置在 {HTML/Javascript}，這樣方便調整多了，不用每次都得換頁到 [版面配置]--[修改HTML] 修改。
2. 修改 position: absolute; (絕對位置)-->為 position: relative;(相對位置) 。
3. 增加 float:left; 原文沒有。(需和 display:block/inline; 配合使用)
4. 調整 Top、Left、Width。(其中 Left+Width 必須設定好，才不會因為 DIV 的關係超過寬度而自動換行。)
5. 因為有背景圖，所以 border: 0px;。避免破壞畫面。
6. 滑鼠移動到 Menubar 上方時，底色＋邊框：(藍色字)
   • background-color:#61A782;
   • border: 1px solid #ffffff;

修改過後，在 Firefox 及 IE6 顯示位置果然可以接受了，而在不同解析度下位置也不會亂跑了。(1024x768 及 1280x1024)

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

在 Firefox 的顯示如下:

在 IE6 的顯示如下:

相關 CSS 程式碼如下：(大部分與原文相同)

<style type="text/CSS">
#navmenubar{
display:block;
float:left;
position: relative;
top: -126px;
left: 450px;
height:24px;
line-height:24px;
width:484px;
margin:0 1px;
color:#000000;
border: 0px;
}

#navmenubar li{
float:left;
list-style-type:none;
white-space:nowrap;
border: 0px;
}

#navmenubar li a{
display:block;
padding:0 10px;
font-size:12px;
font-weight:bold;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}

* html #navmenubar a {width:1%;}

#navmenubar .selected,#navmenubar a:hover{
text-decoration:none;
font-weight:bold;
color:#00ff00;
background-color:#61A782;
border: 1px solid #ffffff;
}
</style>


相關參考文章：

• wowbox blog (網頁設計知識庫) -- 裡面有很多 CSS 技巧教學和詳細的觀念介紹。(PS.該網站上文章還沒看完)