憂藍夢境‧部落格

老實說這個標題不知道要怎麼下比較好理解。我想要滑鼠移過表格某一列時會變色，而且不只超連結的文字可以點，而是整列都有連結效果....囧...先直接看 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, 標準, 網頁, 網頁設計

UrMap 和 Google Map 都是很不錯的線上圖資系統，不過由於 UrMap 是由國人開發維護的，所以目前還是比較適合台灣人使用，尤其在查詢街道方面比 Google 精確。

而這兩套系統也都有釋出各自的 API，讓我們可以做許多的應用，這次幫同學的專題作一個簡單的 Demo，功能是假設有個程式會透過 GPS 接收器取得座標，然後將座標寫入檔案，Web Server 網頁則會定時讀取及更新地圖，標示出目標現在的位置，算是一個基本應用囉！

首先不管是 UrMap API 還是 Google Map API，使用之前都要先申請授權碼(Key)，並且將它加入您的網頁裡面，所以只能在您登錄的網址顯示地圖。

接下來顯示地圖部份請參考 Demo 網頁原始碼，其他功能在 API 說明文件都寫得很詳盡。

Ajax, Other, 程式筆記 Google, UrMap, Web 2.0

jQuery 是個不錯的 JavaScript library，可以省略不少繁瑣的細節，且檔案大小又不大，最近都用它來開發網頁。同時也注意到了一些好用的 Plugin，主要是應用在 Ajax 上，有現成又好用的就不用再自己寫囉！

1. Validation
   可用來做即時欄位驗證
2. History
   無法回上一頁算是 Ajax 的一項缺點，用這個 plugin 可以做出回上頁的效果
3. jEditable
   提供就地編輯(Edit In Place)的功能
4. ajaxFileUpload
   利用隱藏 iframe 達到不換頁上傳檔案
5. Ajax File Manager
   加強 tinymce 這個線上編輯器，可瀏覽檔案及上傳檔案
6. Interface
   提供非常大量的動態效果，必試。
7. Form
   使用 Ajax 送出表單資料

Ajax, 程式筆記 Ajax, JavaScript, jQuery, 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, 排版, 網頁設計