阿維的朋友剛剛請阿維幫他解決文繞圖的顯示問題,
阿維一直以為這個功能應該不難,
不過透過那位朋友口中得知還蠻多人遇到這樣的困擾.
因此阿維為了節省大家下載阿維的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上搞笑的,希望當事人都不要介意喔.
最後阿維希望大家都可以順利做出自己想要的文繞圖版面