Browsing articles tagged with " CSS"
二月
4
2010

如何不讓flash object顯示在最上層

網頁中加入flash object 例如 youtube embedded 影片雖然可以讓網頁增色不少,但是網頁如果使用類似阿維雜記本最下方的wibiya toolbar相同的特效,也就是在網頁顯示中多加一層div來呈現內容,就會發現flash object會顯示在網頁中最上層。如果使用AJAX整頁鎖定特效,例如像colorbox特效,就會看得更明顯。

[ 範例 ]

1. 我們首先在網頁中加入一個youtube的影片

2. 我們希望當按下連結的時候,會出現下面的畫面

3. 可是事與願違,youtube影片會浮現在最上層擋住我們真正要顯示的內容

這時候我們只需要稍微修改一下flash object就可以達成我們想要的功能了。
如果你所使用的flash object是使用符合W3C XHTML標準的寫法 (請參考讓網頁插入的flash符合W3C XHTML標準),那麼只需要在object 後面加上 <param name="wmode" value="opaque" /> 這段就可以。

如果你所使用的flash object不符合W3C XHTML寫法(目前youtube上面所提供的嵌入語法就是屬於這種),那麼請修改以下兩個部分
1. 在object 後面加上 <param name="wmode" value="opaque" />
2. 在embed 的標籤中加上 wmode="opaque",也就是 <embed wmode="opaque" src=xxxxxxx

透過這樣的修改方法就可以讓flash object不會一直顯示在網頁層次的最上層了。

二月
4
2010

阿維冷笑話時間: 因為狐狸沒有手

今天我和同事在上課,課程中提到 cursor:hand 這個css寫法在firefox中沒有作用,如果要讓這個特效生效,必須寫成 cursor:pointer,這樣在firefox中才會有效果產生。

在大家認真聽講的時候,我講了一句超冷的話,因為狐狸(fox)沒有手(hand),所以cursor:hand在firefox才會沒有作用。

對不起….讓大家冷爆了

六月
16
2008

終於調整好CSS了

之前我有一篇文章,是關於線上即時翻譯部落格文章成英文的工具.原始文章請參照 – 部落格的線上即時翻譯 – Yahoo Babel Fish. 在這篇文章中我提到,Yahoo Babel Fish翻譯出來的英文可讀性比較高,但是卻會讓阿維雜記本的版面整個爛掉,最嚴重的部分就是阿維雜記本的屋頂整個飛走了,這個屋頂就是最上面那塊藍色底,寫著阿維雜記本的那一塊.

今天我想著這樣下去實在不是辦法,所以決定來個CSS大檢修,於是我就到 W3C CSS Validator的網站去檢查阿維雜記本的CSS.不檢查還好,一檢查居然發現有一堆錯誤,再仔細一看,媽的啊….這些錯誤大部分居然都是我以前在換成現在這個版面的時候,寫的一些測試段落 而我居然沒有把這些測試的段落拿掉或者是註解掉,而是用一些詭異的方式讓他們不會被讀到.看來我有時候真的是懶惰到一個過頭的境界.這個實在是太不專業了,以後一定要改掉這個壞習慣才行.

另外一個種類的錯誤,就是我以前在寫margin的時候,都習慣寫數字而已,而正確標準的寫法應該要加上單位.例如:maring: 5px 1px 5px 1px 這樣才是符合CSS level 2.1的寫法.

透過這次的CSS大檢修,我不但讓阿維雜記本的CSS更加正確,也讓自己寫程式常犯的毛病顯現出來,更讓我對於CSS的一些定義有了更明確的了解.看來也是相當有收穫.

修改之後,在FireFox下使用Yahoo Babel Fish版面可以正常的顯示,而IE依然有一些小小的詭異問題,不過屋頂飛走的悲慘畫面已經確定不會再出現了.

六月
17
2007

文繞圖版面的CSS全攻略

我的朋友剛剛請我幫他解決文繞圖的顯示問題,
我一直以為這個功能應該不難,
不過透過那位朋友口中得知還蠻多人遇到這樣的困擾.
因此我為了節省大家下載我的CSS來研究,
所以就直接把我的作法和大家分享一下.
不過如果各位有興趣研究436行的CSS,
我也是不反對大家下載回去研究啦.

[ 版面配置 ]
首先我先說明一下版面配置的順序
<div class=ad-right>
放入廣告的代碼,像我就是放入Adsense的代碼
</div>

<p>
文章內容
</p>

如果<p>放在<div>前面,你就會發現,
歐耶~~廣告版面不聽話,到處亂飛囉..

[ CSS 內容 ]
.ad-right {
    float: right;
    position:static; margin:0pt 45px 0px 5px; z-index:3;
    width:280px;
    }

[ CSS 內容修改重點說明 ]
right  : 我希望廣告是放在右邊,所以將它設定在右邊
margin : 後面接的四組數字(0pt 45px 0px 5px),分別代表 上 右 下 左 可以根據個人的版面進行微調
width:280px : 廣告的寬度

[ p 的進階調整 ]
如果各位有研究阿維雜記本的原始碼和CSS的話,
會發現我在p的部份是寫成 <p class="postContent">
然後在CSS中加入
.postContent a:link{
        color: #3300FF;
        border-bottom: dashed 1px;        
        border-bottom-color : #FF3300;
        }
這樣文章中的連結就會以藍色字加上紅色的虛線底線呈現,
大家可以根據自己的喜好再進行調整.

[ 根據不同的瀏覽器使用不同的CSS ]
做完上面的步驟之後,如果發現你想要的呈現位置在IE6和FireFox所呈現出來的位置不同.
這時候我們就要來加工一下,讓不同的瀏覽器跑不同的CSS.
寫法也是相當的簡單,在原本引用CSS的後面加入下面這段
    <!–[if IE 6]>
    <link rel="stylesheet" type="text/css" href="css/ie6_main.css" />
    <![endif]–>

原始的CSS我命名為main.css,然後另外存成ie6_main.css
這個ie6_main.css就是專門讓IE6來執行的.

[ 後記 ]
據可靠消息來源,某位Cx長期臥底私底下告訴我,有來自綠色工廠的哇x來我這借用CSS
上面這幾句是在MSN上搞笑的,希望當事人都不要介意喔.
最後我希望大家都可以順利做出自己想要的文繞圖版面