終於調整好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依然有一些小小的詭異問題,不過屋頂飛走的悲慘畫面已經確定不會再出現了.
» 加入書籤
» 目前回應(0) » 發表回應 » 標籤 : CSS W3C Validator
» 引用網址
文繞圖版面的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上搞笑的,希望當事人都不要介意喔.
最後阿維希望大家都可以順利做出自己想要的文繞圖版面 
» 加入書籤
» 目前回應(3) » 發表回應 » 標籤 : 程式相關 文繞圖 CSS 版面配置
» 引用網址
