下拉選單(Drop-Down Menu)被Flash擋住了…

今天遇到一個奇怪的問題，就是當我們用Dreamweaver的SPRY來做下拉選單(Drop Down Menu)功能的時候，如果底下有個Flash的話，會造成這個下拉選單被擋住！

被擋住會怎樣嗎？…很明顯的，會讓人很生氣！

我首先想到的是 z-index 屬性，它的數值愈大，愈不會被別的東西擋住；數值愈低，則代表這個元素在愈底層…不過，前提是它只能在設有 position 屬性的元素裡面才有作用。所以我在 ul 裡面加了一個 class="zTop" 的類別，在zTop加入底下的屬性：

position:static; z-index:999;

結果，發現…根本就沒有任何作用！難不成得在Flash裡面加上 position:static; z-index:-1; 這樣的屬性嗎？仍然是一個完全無效的結果…ap4a有一篇文章可以參考： Z-index Oddities: Menu dropdowns overlapped by positioned elements，但在目前的狀況下，似乎幫助不大。

所以這問題可能不在 z-index 的深度，而是在Flash本身的問題。webmasterworld.com的一篇文章有提到另一個解決的方法：mozilla - dropdown menu will does not overlap flash movie。這方法確實解決了這個問題！

請在Flash的Object標籤底下加入一個空白標籤，裡面寫進底下的參數：

<param name="wmode" value="transparent">

在 embed 標籤裡再加入底下的參數：

wmode="transparent"

沒想到這樣就解決我的問題了！棒！Adobe針對Flash Object與Embed標籤的屬性也有做詳細的說明。事實上，不一定只有將 wmode 的參數值設成 Transparent(透明) 才行，其實 Opaque(不透明) 也可以！所以只要設定透明度，不論是否透明，都能有效解決這個問題。(設成 window 則是肯定不行！因為我試過了~)

慾望城市：官方網站

最近在播放的電影：慾望城市，我覺得它的官方網站設計得相當不錯！純白的背景、灰階的紐約街景，襯托出四位女主角的身影！彩色的主體與黑白的背景對比，加上鑽石般閃亮的SEX AND THE CITY，可說是一整個白色時尚簡潔的高雅與貴氣！

這個網站整個都是Flash的，當你在畫面左右移動滑鼠的時候，畫面也會跟著移動；當你選取其它項目的時候，利用上下的兩個虛線開合，產生一種把頻道開啟的錯覺，這就是Flash的互動表現囉！

除了整個設計感讓人覺得很時尚之外，可能會有人很好奇那些紅色大大的、像鑽石一樣發亮的字要怎麼做？其實我也有一些好奇，但我懷疑那是「純手工」的…也就是一個一個排上去的，因為裡面的鑽石並不是排列得非常整齊，有一些地方還是有歪掉…不過，瑕不掩瑜，它的效果還是非常的棒！這個網站非常值得我們參考與借鏡！

CSS：簡單解決「飄浮(float)」的問題

當我們在Div裡面再放進不同的Div的時候，只要你有使用 "float" (float:Left;或float:Right;)這個屬性的話，常常會發現外面的Div立刻就會忘記自己裡面還有其它的小Div…所以會變成「外面的Div是外面的Div、裡面的Div是裡面的Div」，好像沒什麼關係似的！？

到底應該怎麼弄才能讓外面的Div想起來自己應該要隨著裡面的Div來調整高度呢？畢竟它們是有連帶關係的！不能因為裡面的Div會飄來飄去的就不予理會呀~！？

其實是有幾個解決的方法，例如W3C就建議用額外的標籤來解決這個問題：在裡面最後的一個Div底下，加上強制換行的 BR 標籤，並且在裡面加入 Style="clear:both" 屬性；如此一來，就可以解決這個問題了！

不過，這會讓我們的程式碼看起來有點兒多餘！有別的方法嗎？

有，用假類別(pseudo class) ":after" 屬性一樣能達到同樣的目的！不過…那很複雜！

目前最簡單也最直接的方法，是由英國的Paul O'Brien所發現！只要把外面的Div加上 "overflow:auto;" 屬性，外面的Div就會知道…原來裡面有其它的Div存在！真的是很神奇！

Alex Walker在SitePoint.com的Simple Clearing of Floats以及Peter-Paul Koch在QuirksMode.org的Clearing Floats都有更詳細的圖示與說明。