前幾天學弟問我一個問題，說他 CSS 排版的網頁在大部分瀏覽器都正常，唯獨 IE 怪怪的，網頁中的 DIV 元素怎麼樣都無法置中，困擾了他許久，他的原始碼內容大致長這樣：
<!-- Head area -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<style type="text/css">
<!--
#content {
margin: 0 auto;
width: 500px;
}
-->
</style>
</head>
<body>
<!-- Content Begin -->
<div id="content">Content</div>
<!-- Content End -->
</body>
</html>
嗯，看起來不應該會有什麼問題的，那是什麼原因讓 IE 無法將區塊置中勒？
我突然注意到他網頁開頭的那一行註解，因為自己寫網頁到現在從未在開頭使用過註解…
果然，拿掉以後就一切正常了。IE，還真是搞不懂你啊！
(註：全系列 IE 都有此現象)
網頁設計
css, 排版, 網頁設計
相片如果搭配了合適的邊框，可以讓相片看起來更有味道及特色，而一般相片加框都是使用軟體來達成的，所以電腦裡可能會有這些檔案：
- 原始相片檔
- 裁切、後製的檔案
- 縮圖無加框的檔案
- 縮圖有加框的檔案
但是為了應付各種需求，總不可能所有檔案都上傳到相簿吧？所以我只作前兩項，然後將想要保留的相片上傳到 Flickr，因為 Flickr 支援原始檔下載(升級Pro) 可以當作多一份備份，又會自動產生五種大小的縮圖，而且品質都不錯，所以要在 Blog 或別的地方展示時，只需選擇想要的大小再搭配 CSS 加框即可。
CSS 加框的部份找了很久，最後找到 CSS Decorative Gallery 這篇，他所 Demo 的是簡單也最多樣化的，給大家參考看看。
好書好站, 網頁設計
css, Flickr, 加框, 相片, 網頁設計, 邊框
老實說這個標題不知道要怎麼下比較好理解。我想要滑鼠移過表格某一列時會變色，而且不只超連結的文字可以點，而是整列都有連結效果....囧...先直接看 Demo 吧！
要達到這種效果，很多教學都是使用 JavaScript 裡的 onmouseover、onmouseout 及 onclick 事件來達成，不過現在有純 CSS 的解法，並且通用多數瀏覽器，這個技巧其實在很多國外網站看過，不過昨天向艾德請教之後才真正學起來^^
#tb td a {
display: block;
height: 35px;
line-height: 35px;
background: #FFF9E0;
}
#tb td a:hover {
background: #E2D9B2;
}
關鍵就是使用 display: block 將 a 顯示為區塊元素，然後依照需求設個高度或寬度給它即可，line-height 給予相同高度可以確保文字垂直置中，這樣比使用 JavaScript 方便多囉。
網頁設計
css, Web 2.0, 標準, 網頁, 網頁設計
解決了上一篇的高度不能自動延伸的問題之後，馬上會遇到另一個問題。#container 和 #content 延伸了，旁邊兩個區塊卻仍然維持原本的高度，如果要指定背景就很麻煩了。
解決方法：
加入以下 CSS：
#container {
overflow: hidden;
}
#left, #right {
padding-bottom: 1000px;
margin-bottom: -1000px;
}
利用 padding-bottom 設一個足夠容納所有內容的值
再用 margin-bottom 設相同的負值，將版面拉回來
這樣超過的版面就會被 overflow: hidden 隱藏，達到我們想要的效果。
參考文章
網頁設計
css, Web 2.0, 排版, 網頁設計
最近製作網頁開始試著用純 CSS 來排版了，習慣之後發現真的比表格排版更方便，不過當中也會遇到一些問題，其中一個就是這篇要講的。
現在有個三欄式版面，如圖：
#container {
margin:0 auto;
width: 780px;
height: 100px;
background: #ffc;
border: 1px solid #000;
}
#left {
float: left;
width: 260px;
background: #9cf;
}
#content {
float: left;
width: 260px;;
background: #fcf;
}
#right {
float: right;
width: 260px;
background: #9cf;
}
原本預期當任何區塊內容過多時，外層 container 要能夠自動延伸，包住裡面的子區塊，但實做之後會發現變成這樣：
解決方法：
#container 裡不要指定高度，也就是維持預設的 height:auto; 同時加入 overflow: hidden; 即可。
#container {
margin:0 auto;
width: 780px;
background: #ffc;
border: 1px solid #000;
overflow: hidden;
}
記得不能指定高度，否則溢出的內容會被隱藏。
解決這個問題之後通常會遇到下一個問題...
網頁設計
css, Web 2.0, 排版, 網頁設計
近期迴響