November 20, 2008
鼓勵此網誌：24
[ 2008-11-23 新增 ] 找到我想要的新功能顯示方法 
[ 2008-11-24 新增 ] 總算是 FF/IE7 都 OK 了
IE6之前還不行 
[ 2008-11-25 新增 ] z-order 再調整
今天下午，好友amos通知我，變天了
同時還告訴我這次變天所使用的技術。
回到社區一看，天空真的變了，除了每一戶還是存在會翻落的屋頂外，整個天頂都被蓋住了... Orz...
原本就打算改 CSS 了，想把左側欄提高，以增加廣告收益作公益，就利用這個機會，改一改吧
與amos一邊測試一邊修改，amos 已整理好把天空變回來，並拆掉會翻落屋頂的好方法。
※ 請參考：AMOS 研究小站 : 頂層下拉選單 http://blog.yam.com/csharp2008/article/18357881
改好時，正好收到 Qme 的通知，官方發出公告了：【新上線】天空工具列，一去看，不得了，才兩個小時不到的時間，就有57篇的留言，90%以上是反對的聲浪，平約 2 分鐘就一篇
我猜想是很多人守在官網等公告，一公告就留言，因為實在是改太多了，許多人的版面大亂，或是配色與天空工列具差太多，看起來就是...怪
當初，加入天空時，對於其開放的功能，覺得很棒，一開始用還看不太懂的 CSS 表，略作版面修改，在今年九月，利用 FireFox 配合 FireBug，把原本較制式的版面作了修改。在最近的屋頂事件及今天的天頂事件，我也是使用 FF+FB 去查看變化，或是線上修改測試，真的很方便。
與 amos 討論，最近天空的修改，應該都是用現成的技術，大部分可能都是直接套用，沒有作太多的調整，也因為如此，大家的 blog 變成天空實驗室... 實驗的過程，通常會發生，登入狀態改變。像是我整天掛在 blog 上，點來點去突然變成「請登入」，就表示系統可能作了「微調了」，今天下午就發生好幾次。
大家必需把您的問題反應給小尖兵，他們才會去您家看看，再研究如何調整程式。或是寫 EMail 到客服信箱給他/她 blogservice@yam.com
在上一篇「右邊屋頂翻落, 路人請小心」發表時，我就測試過把會翻落的屋頂拆掉一天，測試 OK 但是我還是把它裝回去了，因為我覺得，應該是要建商拆，而不是住戶自己拆。此事件，自發生到現在，官網仍舊是沒對廣告作出任何回應。
今天的蓋頂事件，其實，說真的，我不反對工具列，因為很多 BSP 也都有上置的工具列，對於「隨便逛逛」的新功能，也覺得不錯，但是，又蓋頂，又翻頁，這樣會不會改太多了!! 如官網 stanleylu 的 留言：
「這樣乾脆網誌也幫使用者寫一寫好了啦!!!」
雖然，我已申請了痞客邦的部落格，但我還不想搬家....
※ 誠心給天空開發團隊的建議：
１ 翻頁廣告就免了吧，令人討厭的廣告，不會有效益的。
別為了 Google Analytics 統計有人由翻頁廣告點入，就揚揚得意，
那些都是因為被嚇到不小心才點到的。
２ 工具列要留我不反對，但請把它們的 CSS 獨立出來，並公開格式，
讓用戶們可以按她/他的版面自行調整，同時，官方也應將現有公版
的版面先作調整，而不是讓廣大不知如何改 CSS 的用戶不知所措。
３ 工具列才是需要作成類似翻頁的!! 工具列平常只占上面很小的空間或不占空間，
當滑鼠移到頁面上方時，才將工具列展現出來，這樣才是又炫又實用。
※ 延伸閱讀：
建構活動屋頂廣告(純技術)
右邊屋頂翻落, 路人請小心
AMOS 研究小站 :頂層下拉選單
AMOS 研究小站 :Stylish 0.5.7 - 修改網頁CSS樣式 (Firefox 外掛)
小尖兵站管部落格:【新上線】天空工具列
2008-11-23 找到我想要的新功能顯示方法
今天再到「小尖兵站管部落格:【新上線】天空工具列」查看鄰居們的留言時，發現 mini0633 作出了我想要的顯示方法，也就是：
請參考 mini0633 的這一篇「把天空工具列隱藏XDDD」
看到許多網友對目前的 CSS 修改還是不知所措，以下整理我所作的修改：
1. 把新增的工具列設成自動隱藏，並關閉活動廣告，在 CSS 加入以下幾行
.chromestyle{opacity:0.0;filter:alpha(Opacity=0)}
.chromestyle:hover{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100)}
#flipPageDiv { display:none; }
2. 整體頁面調高
#mainFrame { MARGIN: 0px auto; 改成 #mainFrame { MARGIN: -28px auto;
3. 原本的 topbar 修改(僅剩下推薦部落格還用著它)
#topbar{ height:22px; 改成 #topbar{
4. 調整推薦部落格的位置 (可能要配合您自己的版面)
#commend{ 改成 #commend{margin-top: 4px;
以上的 3,4 可能不同的版面會不太一樣，若不修改，只是上面會覺得空了點。
只要改 1，就可以讓新的功能列不會影響到整體配色，要登入時，再移滑鼠去點即可。
感謝 mini0633 分享的好方法
2008-11-24 總算是 FF/IE7 都 OK 了 IE6之前還不行
昨天調整了 CSS，總算是讓 IE/FF 的效果相近了...
因為很久沒有用 IE，前天改完 FF 正常，就以為都 OK 了，沒想到，在 IE 下整個版面是不能看的，而且還會跳來跳去，對於使用 IE 的訪客，真是抱歉了
不過，希望 IE 的訪客們，可以改用 FireFox，真的比 IE 好太多了。
mjscat 提醒我，原本的版面還有一個問題，就是下方會出現 Scroll Bar，查看後發現，是我自己的 CSS 沒寫好，以及因為配合上方工具列調整部分位置後，沒有改它的 Width 而導致它過長。這個部分，像是 h2(次標題), navBar(選日記/網誌/相簿的那個bar) 我都有調整。
另外，則是 FireFox 與 IE 對於 DIV 定位的處理差異，導致在 FireFox 下「相關閱讀」的 post_title 跑到文章 post_title 的後面，又正好我設定的文字顏色與底色相同，所以看不出是什麼東西讓 Scroll Bar 跑出來。
找到 [css學習筆記]float屬性在IE與firefox中的差異-阿皮仔的電腦生活二三事
阿皮仔說明了 FireFox 與 IE 在 position 上的差異，其中:
#DIV:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
好像試不太出來... 最後查看網頁的 HTML 原始碼，在「相關閱讀」DIV 的上面有一個空白的 articleCategory，於是就加上
/* 修正"相關閱讀"跑到視窗外的問題 */
.articleCategory {clear: both;}
總算是讓相關閱讀回到原來的位置。
最後發現，Scroll Bar 還是在，原來是上方工具列大了那麼一點點，經過測試，只要把 .chromestyle ul 內的 width:100%; 改成 width:auto; 就不會有 Scroll Bar了。因為我們自定的版面 CSS 是先載入，之後才載入上方工具列的 CSS，以後壓前的原則，不論由自定版面 CSS 如何改，都無法改到那一項。只好在自定欄位，加入以下程式：
<link type="text/css" rel="stylesheet" href="http://dllee.tw.googlepages.com/yamblogfixed.css" />
其內容就只有：
/* 修正 chromemenu 使 FF 出現 Scrollbar */
.chromestyle ul {width:auto;}
這樣，就可以讓 Scroll Bar 消失了。
※ 不可錯過：
AMOS 研究小站 :頂層下拉選單 新增工具列顯示/隱藏
2008-11-25 z-order 再調整
原本加的自動隱藏那兩行：
.chromestyle{opacity:0.0;filter:alpha(Opacity=0)}
.chromestyle:hover{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100)}
只適用於 FireFox 及 IE7，對於 IE6(含)之前的版本，加了以上兩行，等於只有隱藏，因為在 IE6(含)之前的版本，無法處理 hover。感謝amos告知，並介紹我以下的處理方式(還沒時間測試)
....(沒時間整理了... 等有空再來更新... 主要就是讓選單要在滑鼠移到最上最上面才會出現啦 )...
[ 2008-11-24 新增 ] 總算是 FF/IE7 都 OK 了
IE6之前還不行 [ 2008-11-25 新增 ] z-order 再調整
今天下午，好友amos通知我，變天了
同時還告訴我這次變天所使用的技術。回到社區一看，天空真的變了，除了每一戶還是存在會翻落的屋頂外，整個天頂都被蓋住了... Orz...
原本就打算改 CSS 了，想把左側欄提高，以增加廣告收益作公益，就利用這個機會，改一改吧
與amos一邊測試一邊修改，amos 已整理好把天空變回來，並拆掉會翻落屋頂的好方法。
※ 請參考：AMOS 研究小站 : 頂層下拉選單 http://blog.yam.com/csharp2008/article/18357881
改好時，正好收到 Qme 的通知，官方發出公告了：【新上線】天空工具列，一去看，不得了，才兩個小時不到的時間，就有57篇的留言，90%以上是反對的聲浪，平約 2 分鐘就一篇
我猜想是很多人守在官網等公告，一公告就留言，因為實在是改太多了，許多人的版面大亂，或是配色與天空工列具差太多，看起來就是...怪
當初，加入天空時，對於其開放的功能，覺得很棒，一開始用還看不太懂的 CSS 表，略作版面修改，在今年九月，利用 FireFox 配合 FireBug，把原本較制式的版面作了修改。在最近的屋頂事件及今天的天頂事件，我也是使用 FF+FB 去查看變化，或是線上修改測試，真的很方便。
與 amos 討論，最近天空的修改，應該都是用現成的技術，大部分可能都是直接套用，沒有作太多的調整，也因為如此，大家的 blog 變成天空實驗室... 實驗的過程，通常會發生，登入狀態改變。像是我整天掛在 blog 上，點來點去突然變成「請登入」，就表示系統可能作了「微調了」，今天下午就發生好幾次。
大家必需把您的問題反應給小尖兵，他們才會去您家看看，再研究如何調整程式。或是寫 EMail 到客服信箱給他/她 blogservice@yam.com
在上一篇「右邊屋頂翻落, 路人請小心」發表時，我就測試過把會翻落的屋頂拆掉一天，測試 OK
但是我還是把它裝回去了，因為我覺得，應該是要建商拆，而不是住戶自己拆。此事件，自發生到現在，官網仍舊是沒對廣告作出任何回應。今天的蓋頂事件，其實，說真的，我不反對工具列，因為很多 BSP 也都有上置的工具列，對於「隨便逛逛」的新功能，也覺得不錯，但是，又蓋頂，又翻頁，這樣會不會改太多了!! 如官網 stanleylu 的 留言：
「這樣乾脆網誌也幫使用者寫一寫好了啦!!!」
雖然，我已申請了痞客邦的部落格，但我還不想搬家....
※ 誠心給天空開發團隊的建議：
１ 翻頁廣告就免了吧，令人討厭的廣告，不會有效益的。
別為了 Google Analytics 統計有人由翻頁廣告點入，就揚揚得意，
那些都是因為被嚇到不小心才點到的。
２ 工具列要留我不反對，但請把它們的 CSS 獨立出來，並公開格式，
讓用戶們可以按她/他的版面自行調整，同時，官方也應將現有公版
的版面先作調整，而不是讓廣大不知如何改 CSS 的用戶不知所措。
３ 工具列才是需要作成類似翻頁的!! 工具列平常只占上面很小的空間或不占空間，
當滑鼠移到頁面上方時，才將工具列展現出來，這樣才是又炫又實用。
※ 延伸閱讀：
建構活動屋頂廣告(純技術)
右邊屋頂翻落, 路人請小心
AMOS 研究小站 :頂層下拉選單
AMOS 研究小站 :Stylish 0.5.7 - 修改網頁CSS樣式 (Firefox 外掛)
小尖兵站管部落格:【新上線】天空工具列
2008-11-23 找到我想要的新功能顯示方法
今天再到「小尖兵站管部落格:【新上線】天空工具列」查看鄰居們的留言時，發現 mini0633 作出了我想要的顯示方法，也就是：
工具列在平時是隱藏的，當滑鼠移到頁面最上方時，才顯示出來。 |
請參考 mini0633 的這一篇「把天空工具列隱藏XDDD」
看到許多網友對目前的 CSS 修改還是不知所措，以下整理我所作的修改：
1. 把新增的工具列設成自動隱藏，並關閉活動廣告，在 CSS 加入以下幾行
.chromestyle{opacity:0.0;filter:alpha(Opacity=0)}
.chromestyle:hover{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100)}
#flipPageDiv { display:none; }
2. 整體頁面調高
#mainFrame { MARGIN: 0px auto; 改成 #mainFrame { MARGIN: -28px auto;
3. 原本的 topbar 修改(僅剩下推薦部落格還用著它)
#topbar{ height:22px; 改成 #topbar{
4. 調整推薦部落格的位置 (可能要配合您自己的版面)
#commend{ 改成 #commend{margin-top: 4px;
以上的 3,4 可能不同的版面會不太一樣，若不修改，只是上面會覺得空了點。
只要改 1，就可以讓新的功能列不會影響到整體配色，要登入時，再移滑鼠去點即可。
感謝 mini0633 分享的好方法
2008-11-24 總算是 FF/IE7 都 OK 了
IE6之前還不行 昨天調整了 CSS，總算是讓 IE/FF 的效果相近了...
因為很久沒有用 IE，前天改完 FF 正常，就以為都 OK 了，沒想到，在 IE 下整個版面是不能看的，而且還會跳來跳去，對於使用 IE 的訪客，真是抱歉了
不過，希望 IE 的訪客們，可以改用 FireFox，真的比 IE 好太多了。mjscat 提醒我，原本的版面還有一個問題，就是下方會出現 Scroll Bar，查看後發現，是我自己的 CSS 沒寫好，以及因為配合上方工具列調整部分位置後，沒有改它的 Width 而導致它過長。這個部分，像是 h2(次標題), navBar(選日記/網誌/相簿的那個bar) 我都有調整。
另外，則是 FireFox 與 IE 對於 DIV 定位的處理差異，導致在 FireFox 下「相關閱讀」的 post_title 跑到文章 post_title 的後面，又正好我設定的文字顏色與底色相同，所以看不出是什麼東西讓 Scroll Bar 跑出來。
找到 [css學習筆記]float屬性在IE與firefox中的差異-阿皮仔的電腦生活二三事
阿皮仔說明了 FireFox 與 IE 在 position 上的差異，其中:
#DIV:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
好像試不太出來... 最後查看網頁的 HTML 原始碼，在「相關閱讀」DIV 的上面有一個空白的 articleCategory，於是就加上
/* 修正"相關閱讀"跑到視窗外的問題 */
.articleCategory {clear: both;}
總算是讓相關閱讀回到原來的位置。
最後發現，Scroll Bar 還是在，原來是上方工具列大了那麼一點點，經過測試，只要把 .chromestyle ul 內的 width:100%; 改成 width:auto; 就不會有 Scroll Bar了。因為我們自定的版面 CSS 是先載入，之後才載入上方工具列的 CSS，以後壓前的原則，不論由自定版面 CSS 如何改，都無法改到那一項。只好在自定欄位，加入以下程式：
<link type="text/css" rel="stylesheet" href="http://dllee.tw.googlepages.com/yamblogfixed.css" />
其內容就只有：
/* 修正 chromemenu 使 FF 出現 Scrollbar */
.chromestyle ul {width:auto;}
這樣，就可以讓 Scroll Bar 消失了。
※ 不可錯過：
AMOS 研究小站 :頂層下拉選單 新增工具列顯示/隱藏
2008-11-25 z-order 再調整
原本加的自動隱藏那兩行：
.chromestyle{opacity:0.0;filter:alpha(Opacity=0)}
.chromestyle:hover{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100)}
只適用於 FireFox 及 IE7，對於 IE6(含)之前的版本，加了以上兩行，等於只有隱藏，因為在 IE6(含)之前的版本，無法處理 hover。感謝amos告知，並介紹我以下的處理方式(還沒時間測試
)....(沒時間整理了... 等有空再來更新... 主要就是讓選單要在滑鼠移到最上最上面才會出現啦 )...
誰推薦這篇文章：
