12.16.2008
11.05.2008
CSS 圓角框製作
如果大家都用Firefox自然就沒有這篇教學啦，"-moz-border-radius" 就可以搞定一切，不過很可惜，目前 IE 仍舊是佔有率最高的瀏覽器，所以只好想辦法用多數倍的手續來達到圓角的效果。
利用背景圖做圓角有很多方法，在未知高度、寬度確定的情況下，最簡易的方案是 Sliding Doors，也就是將原圖切成上下兩張，一張給<div>，一張給DIV底下的<bd>。這裡教的方式是在寬度未知，或是同樣背景可能會應用在多種寬度的情況下，這時不可能再切多種寬度的背景，太麻煩了，改用現在的“定位”方案將可大量減少圖片量以及CSS Code。
首先畫出要的圓角圖，並將該圖整個切出。圖片大小可自己掌握，只切出一個圓都可以，只要到時處理 CSS 時能抓到圓的半徑寬度即可。
Html 按照一般方式給標籤與內容，特別的地方是要再多給四個div來處理四個圓角：
<div class="tab">
<h5>IE6 1px gap on absolute elements</h5>
<p class="content">I get a number of requests for help with rounded corners each week and the common problem is that ie is one pixel out on the bottom corners and on the right corners.</p>
<div class="round top-left"></div>
<div class="round top-right"></div>
<div class="round bottom-left"></div>
<div class="round bottom-right"></div>
</div>
CSS 部分最外層的 div 給相對位置，將四個角相同屬性的部份拉出來(.round)給寬、高、背景圖以及絕對位置，然後再針對四個角給背景圖的位置：
.tab {position: relative;padding: 40px;width: 600px;background: #333;color: #fff;}
.tab .round {width: 12px;height: 12px;background: url(round-bg.gif) no-repeat;position: absolute;}
.tab .top-left {top: 0px;left: 0px;background-position: top left;}
.tab .top-right {top: 0px;right: 0px;background-position: top right;}
.tab .bottom-left {bottom: 0px;left: 0px;background-position: bottom left;_margin-bottom: -1px;}
.tab .bottom-right {bottom: 0px;right: 0px;background-position: bottom right;_margin-bottom: -1px;}
至於 _margin-bottom: -1px 這東西是針對 IE6 的 Hack，原因是 IE6 對於寬、高單位為單數時會自作聰明的自行多加 1pix，詳情請參考 IE 1px discrepancy。
完整範例請參考這裡。
筆者還在皮毛階段，針對這方法可延伸出更多進階技巧，另一個基本方案是將背景圖片放大(例如：1000 x 4000)，這種方式就可以使用邊框，也可避免 IE6 多出來的那 1px 問題。
10.31.2008
IE7-JS
看來似乎是個針對 IE 瀏覽器種種問題一勞永逸的方案。IE7-JS 是個 JavaScript library，主要功能是修正 IE (主要針對IE5+) 行為，讓 IE 看起來就像個支援網頁標準的瀏覽器，其中幾個重點是讓 IE6 支援 PNG、支援 max-(width、height), min-(width、height)、支援:hover..等等，詳細列表可參考官方文件。
使用方法只需將js載入即可
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
或是針對IE5-7
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->
當然也可以下載至本地使用。
比較美中不足的地方，是要使用 PNG 效果的話，圖檔名稱後方必須加 *-trans.png，另外在頁面載入時仍會出現短暫的"原始面貌"。
9.22.2008
和多繽紛樂
服務公司和多參加了Yahoo 2008 Open Hack Day，昨天在台北市青少年育樂中心順利結束。敝舍的和多繽紛樂在一優勝、二佳作三個總獎項之中取得佳作，算不算好成績搞視覺的實在難以進入狀況，不過就第一次參加這類活動的我來說，雖然沒能全程在現場參與過程，不過第一天在現場的感覺是不錯的，飲料、啤酒、零食、無名美少女(沒看到Orz)，那種氣氛還挺特別的。
關於和多繽紛樂的介紹請參考同事 Xdite 所寫的 這裡，與 Boss hlb 所寫的 這裡，畫面展示在 這裡，完成品在 這裡，有興趣找敝舍接案子、談合作的請點 這裡。
在視覺設計方面，這次比較特別的經驗是因為完全不用考慮ie6，所以圖檔幾乎全使用PNG，PNG圖檔的透明特性輕易的實現了許多視覺效果，套句hlb的話
寫 CSS 完全不考慮 IE，真是一件愉快無比的事情。
8.21.2008
CSS技巧 欄位自動互相適應高度
網頁設計版面中的欄位當有運用到背景圖時，為了整體視覺效果，常會遇到需要能夠互相適應高度（視覺上）的問題，而這對於 CSS 的確是個麻煩，當然這可以利用 JavaScript 去處理，但若不想靠程式時，只好利用一些小技巧去達到這個目的。
不同的需求通常有不同的解決方案，在這筆者以最近設計的 Opmsg 為例子（參考畫面），在這三欄的設計中，需求是中間欄位能夠自動適應左欄的高度，當中間欄位內容高度少於左欄時，其背景仍能高於左欄（參考畫面）。
首先把中、左兩欄合併定義成為一個欄位取名 #column-1 並 "float: left"，最右欄取名 #column-2 並 "float: right"，右欄由於打算讓它完全依內容決定高度，因此接下來依一般方式處理即可。
回過頭來，剛剛的 #column-1 先放置中間欄位的背景圖上半部，並將圖片靠上靠右，#column-1 底下再放置一個 div 取名 #bd，然後將中間欄位下半部的背景圖切大張（高度）一點，放置在 #column-1 #bd 靠下靠右，這時中間欄位雖然還沒切，但背景已經出來。
#column-1 #bd 底下再切出兩個欄位分別為 #left（float: left） 與 #right（float: right），而這裡的 #right 其實就等於擁有背景圖的中間欄位了。#left 左欄依前面 #column-1 的方式將背景圖放上基本上就大功告成。
在這個案例中，中間欄位的背景圖片放在最外層，因此在裡頭的左欄可以實際控制著中間欄位在視覺上的最小高度，雖然並非真的讓欄位互相適應高度，但還是可以滿足實際的視覺需求，有點像是在變把戲（trick）XD。
當然 opmsg 的 CSS 實際上要複雜一些，不過基本上就是這個原理。
7.24.2008
Stylish, Gmail themes
IE, input button double padding
IE 下的又一個 bug。padding double 是IE著名的bug，一般針對這個問題的解決方案是將上層 box 設為 display: inline-block，不過這個方法在 input 中不適用，在 hlb 的協助下，經過一番折騰，終於找到針對 input 中的解決方案：
input button {
width: auto;
overflow: visible;
}
6.15.2008
表格變色問題
Mouseover這個小技巧以前當然用過，不過這兩天因新案子需要，出現IE上不管怎麼試就是沒有背景的怪事，Firefox上想當然耳的完全正常，在想破腦袋兩天後，突然想起最近開始使用的reset.css:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
拿掉果然問題解決。
什麼原因已經無力深究，有興趣的先進們可以查查。
6.13.2008
CSS 背景透明效果
看了幾篇教學發現都被誤導了，一般網站教學的寫法是：
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* Moz + FF */
opacity:0.5; /* CSS3 */
反覆測試發現都無法在IE底下正常顯示，另外這些教學還針對table用了另外一種寫法：
filter:Alpha(Opacity=80, FinishOpacity=80, Style=2);
結果用來套在div或span果然都可以正常出現半透明效果，因此正確的用法應該是：
filter:Alpha(Opacity=80, FinishOpacity=80, Style=2); /* IE */
-moz-opacity:0.5; /* Moz + FF */
opacity:0.5; /* CSS3 */
2.08.2008
XHTML & CSS
使用CSS製作網站也一段時間了，但是所有相關知識完全來自於網路世界，而網站教學往往是重點式，前因後果並不會有太多著墨，雖然這種學習法讓我在運用上並不會產生太大問題，但對於某些理論與觀念仍是一知半解，而這種不求甚解的感覺也實在讓我很不自在。
嘗試買了這本XHTML & CSS，希望能將所有基礎真正打好，並將平時遇到的一些小問題給一次解決。花了一個小時細讀完第一章，的確解了不少疑惑與觀念的導正，相信應該會是一本不錯的學習工具書，唯一可惜的是翻譯方面小有瑕疵。
嘗試買了這本XHTML & CSS，希望能將所有基礎真正打好，並將平時遇到的一些小問題給一次解決。花了一個小時細讀完第一章，的確解了不少疑惑與觀念的導正，相信應該會是一本不錯的學習工具書，唯一可惜的是翻譯方面小有瑕疵。
11.15.2007
CSS and Table
運用CSS設計版面也有一段時間了，喜歡的是CSS乾淨的設計空間，對於CSS能夠大量套用不同頁面的這個優點當然更是愛不釋手，通常在能夠使用CSS處理版面構造與排版時都不會有所遲疑，但是CSS是否真的可以完全取代Table？
CSS畢竟還是有存在著一些問題，否則就不會有那麼多的CSS Hack出現了。除了各家瀏覽器以及其版本支援問題，巢狀容器也是很麻煩的一個傢伙，在某些複雜的排版上需要兼具美觀時，就曾遇過CSS難以克服的時候，這真是一個很頭痛的問題。
記得一個國外遊戲資訊網站AMPED GAMING NEWS，當初剛改這個版面時看它的原始碼全部是以Div構成，後來隔沒一段時間再看時就發現已經加入了許多Table，顯而易見的是為了版面美觀而改。在簡單版型的網站，容器(container)差個1、2pix無傷大雅，也看不太出來，但面對網頁結構複雜的版型時，那1、2pix往往就扼殺了整個網站的質感與美感。
CSS有它的妙處與優點，Table也還是有它存在的意義，希望它們能合諧攜手一起邁向美好的未來..。
11.13.2007
隱藏Blogger Bar
隱藏的方式應該很多種，這裡用的是之前教過的“margin-top”。
透過原始碼知道Blogger Bar的id是navbar，因此只要在管理功能 "修改HTML" 之處，增加新的CSS來定義navbar往上即可，例如：#navbar {margin-top: -40px;}很簡單吧 =P
11.12.2007
CSS 解決li裡浮動span無法正常排列問題
當初是希望透過ul來簡單呈現文章標題列表，但要在li裡再插入浮動span來放置日期時，span會被擠到li底下。解決方式就是使用margin-top: -xxpx來調整，簡單好用。
CSS Lightbox效果
不透過JS即可做到Lightbox的效果。
CSS 程式碼部分：
body{font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif;}
a{color:#000; text-decoration:none;}
.img{border:0px;}
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 15%;
left: 25%;
width: 632px;
height: 445px;
border: 16px solid #FFF;
border-bottom:none;
background-color: white;
z-index:1002;
overflow: auto;
}
HTML 程式碼部分：
<p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
<div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
CSS 內容超過容器寬度顯示省略符號
利用CSS簡單控制，在文字超出容器寬度時避免換行而只顯示省略符號。li {
width:50px;
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
}
7.20.2007
CSS 17條小技巧整理
（轉）
1、ul標籤在Mozilla中默認是有padding值的，而在IE中只有margin有值。
2、同一個的class選擇符可以在一個文檔中重複出現，而id選擇符卻只能出現一次；對一個標籤同時使用class和id進行CSS定義，如果定義有重複，id選擇符做的定義有效，是因為ID的權值要比CLASS大。
3、一個兼容性調整(IE和Mozilla)的笨辦法：
初學可能會碰到這樣一個情況：同樣一個標籤的屬性在IE設置成A顯示是正常的，而在Mozilla裡必須要設成B才能正常顯示，或者兩個倒過來。
臨時解決方法：選擇符{屬性名:B !important;屬性名:A}
4、如果一組要嵌套的標籤之間需要些間距的話，那就留給位於裡面的標籤的margin屬性吧，而不要去定義位於外面的標籤的padding
5、li 標籤前面的圖標推薦使用background-image，而不是list-style-image。
6、IE分不清繼承關係和父子關係的差別，全部都是繼承關係。
7、在給你的標籤瘋狂加選擇符的時候，別忘了在CSS裡給選擇符加上註釋。 等你以後修改你的CSS的時候就知道為什麼要這麼做了。
8、如果你給一個標籤設置了一個深色調的背景圖片和亮色調的文字效果。建議這個時候給你的標籤再設置一個深色調的背景顏色。
9、定義鏈接的四種狀態要注意先後順序: Link Visited Hover Active
10、與內容無關的圖片請使用background
11、定義顏色可以縮寫#8899FF=#89F
12、table在某些方面比其它標籤表現的要好的多。請在需要列對齊的地方用它。
13、margin取負值可以在標籤使用絕對定位的時候起到相對定位的作用，在頁面居中顯示時，使用絕對定位的層不適合使用left:XXpx這個屬性。把這個層放到一個要相對定位的標籤旁，然後使用margin的負值是個好方法。
14、絕對定位時使用margin值定位可以達到相對於本身所在位置的定，這與top，left等屬性相對與窗口邊緣的定位不同。絕對定位的優勢在於可以讓其它元素忽略它的存在。
15、如何讓一個表單中的文本框中的文字垂直居中？
16、定義A標籤要注意的小問題：
當我們定義a{color:red;}時，它代表了A的四種狀態的樣式，如果此時要定義一個鼠標放上的狀態只要定義a:hover就可以了，其它三種狀態就是A中所定義的樣式。
只定義了一個a:link時，一定要記得把其它三種狀態定義出來！
如果用行高與高度的組在FF中是沒有效果的，辦法就是定義上下補白就可以實現想想的效果了。
17、網站越大，CSS樣式越多，開始做前，請做好充分的準備和策劃，包括命名規則。頁面區塊劃分，內部樣式分類等。
訂閱：
文章 (Atom)
