憂藍夢境‧部落格 » 網頁設計

避免在 HTML 開頭使用註解

lym520 — Sat, 02 May 2009 04:10:14 +0000

前幾天學弟問我一個問題，說他 CSS 排版的網頁在大部分瀏覽器都正常，唯獨 IE 怪怪的，網頁中的 DIV 元素怎麼樣都無法置中，困擾了他許久，他的原始碼內容大致長這樣：







Test Page





Content

嗯，看起來不應該會有什麼問題的，那是什麼原因讓 IE 無法將區塊置中勒？
我突然注意到他網頁開頭的那一行註解，因為自己寫網頁到現在從未在開頭使用過註解…

果然，拿掉以後就一切正常了。~~IE，還真是搞不懂你啊！~~
(註：全系列 IE 都有此現象)

jQuery Drag and Drop Demo

lym520 — Wed, 11 Mar 2009 15:54:47 +0000

Drag & Drop(拖放) 效果若是應用得當可以讓 UI 操作更直覺簡單，目前最常見的大概就是對項目作排序，或是像購物車將物體從某區塊移到另一區塊。

網路上雖然有很多 Drag & Drop 的範例，但有些過於複雜或是不夠完整，前陣子為了交作業嘗試用 jQuery+jQuery UI 做了一個簡單的 Demo，果然快速、簡潔、流暢，不得不再次向大家推薦 jQuery 啊！

Demo 網址：http://blog.linym.net/demo/jquery/jquery_DragDrop.html

利用 CSS 為相片加框

lym520 — Sun, 08 Mar 2009 03:11:31 +0000

相片如果搭配了合適的邊框，可以讓相片看起來更有味道及特色，而一般相片加框都是使用軟體來達成的，所以電腦裡可能會有這些檔案：

原始相片檔
裁切、後製的檔案
縮圖無加框的檔案
縮圖有加框的檔案

但是為了應付各種需求，總不可能所有檔案都上傳到相簿吧？所以我只作前兩項，然後將想要保留的相片上傳到 Flickr，因為 Flickr 支援原始檔下載(升級Pro) 可以當作多一份備份，又會自動產生五種大小的縮圖，而且品質都不錯，所以要在 Blog 或別的地方展示時，只需選擇想要的大小再搭配 CSS 加框即可。

CSS 加框的部份找了很久，最後找到 CSS Decorative Gallery 這篇，他所 Demo 的是簡單也最多樣化的，給大家參考看看。

修改 SyntaxHighlighter 符合 XHTML 驗證

lym520 — Thu, 08 Jan 2009 06:17:04 +0000

本站顯示程式碼是用「SyntaxHighlighter」，有人將它寫成 WP plugin，使用上非常方便，不過 SyntaxHighlighter 預設的呼叫語法是用

name="code" class="html">......

由於 W3C 規範中 pre tag 是沒有 name 屬性的，所以鐵定要跟驗證貼紙說 bye bye，如果真的很在意的話可以這樣修改：

1. 修改 syntaxhighlighter.php

找到
title="code"

2. 修改 files/shCore.js
找到
tags[i].getAttribute('name')
改成
tags[i].getAttribute('title')

以 title 替換 name 屬性，這樣就能通過驗證了。
參考文章：Google SyntaxHighlighter - workaround for XHTML validation issue

[CSS]滑鼠移過表格列變色及附加連結效果

lym520 — Sat, 08 Mar 2008 05:06:43 +0000

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

lym520 — Mon, 07 May 2007 07:21:25 +0000

解決了上一篇的高度不能自動延伸的問題之後，馬上會遇到另一個問題。#container 和 #content 延伸了，旁邊兩個區塊卻仍然維持原本的高度，如果要指定背景就很麻煩了。

解決方法：
加入以下 CSS：


#container {
	overflow: hidden;
}
#left, #right {
	padding-bottom: 1000px;
	margin-bottom: -1000px;
}

利用 padding-bottom 設一個足夠容納所有內容的值
再用 margin-bottom 設相同的負值，將版面拉回來
這樣超過的版面就會被 overflow: hidden 隱藏，達到我們想要的效果。

參考文章

[CSS] 重直多欄式版面自動延伸高度

lym520 — Mon, 07 May 2007 07:06:05 +0000

最近製作網頁開始試著用純 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;
}

記得不能指定高度，否則溢出的內容會被隱藏。

解決這個問題之後通常會遇到下一個問題...

解決版面被撐開的方法

lym520 — Sat, 22 Jul 2006 14:58:53 +0000

寫網頁程式經常會遇到版面被撐開的情形，例如有人輸入一長串的網址，或是沒有空格的英文+數字，這些都會造成瀏覽器無法自動斷行導致版面被撐開，而解決方法除了用程式強制斷行之外，IE 中可以用 word-break:break-all 的 CSS 來解決，但是比較好的方式可以參考 jon 所寫的這篇，利用 wbr tag 來處理‧

文章：PHP: 文字過長加入 WBR tag function

Lightbox 收集

lym520 — Sat, 10 Jun 2006 17:00:02 +0000

最近很容易可以看到這個效果，也就是當您點選網頁中的圖片或連結時，背景會立即變暗並且出現 Loading... 然後跳出一個美美的方框顯示圖片或網頁，這種效果就叫做 Lightbox，底下收集了一些許多人開發或修改的 Lightbox，通常都會有 Demo，看個人喜好選擇囉。

‧Lightbox JS
典型也是最常見的一個，目前也出了 2.0 版，不過似乎只能顯示圖片而已。

‧ThickBox
這個也是很常見，可以顯示圖片、網頁，並且可指定方框的大小，推薦。

‧Greased Lightbox
提供裝在瀏覽器的擴充套件，平常看圖片時就會有 Lightbox 效果。

．GreyBox
這個就厲害了，除了可以用於圖片和網頁外、連 flash、影片都可以顯示在 Lightbox 彈出的方框裡面。

‧Lightbox Gone Wild!
也是可以顯示網頁、圖片，效果還不錯。

‧Lightbox plus
增加圖片縮放功能，對於圖片尺寸大於螢幕解析度時可以點選放大的圖示，觀看圖片完整尺寸。(由 RB 補充)

‧Lightbox Jojo
在顯示圖片前可以先瀏覽一張圖片，圖片開啟後可以在圖片的上個圖層再放一張圖片。(由 RB 補充)

利用 CSS 做簡單的導覽列(選單)

lym520 — Fri, 19 May 2006 08:34:55 +0000

做出來感覺還滿不錯的，簡潔有力，稍微懂一點 CSS 的應該都會，只是經常弄出來的 CSS 都要「特別」針對 IE6 去調整，不然 Firefox 看起來 OK，在 IE 則是完全走樣，不過試用了 IE7 beta2，對 CSS 支援度有比較好了，往後設計 CSS 應該可以比較輕鬆點。
另外這個範例用了 Mozilla 的圓角屬性，所以在 IE 只會看到很普通的方形哦。

CSS 導覽列

[CSS] 製作表格細框線

lym520 — Tue, 07 Feb 2006 13:12:58 +0000

一般表格的框線即使設為 1px 還是感覺很粗，為什麼呢？因為預設表格框線是不重疊的，而每個儲存格都有著 1px 的框線，所以框線就會變成1+1=2px。因此要利用 CSS 允許表格框線重疊，才能顯示出 1px 的細框線。


table {
  border: 1px solid #00;
  border-collapse: collapse;
}
tr, td {
  border: 1px solid #00;
}

border-collapse: collapse; 即是允許框線重疊。

IE 網頁編碼判斷錯誤

lym520 — Sat, 14 Jan 2006 12:43:35 +0000

當網頁寫出來用 IE 瀏覽時，卻發現網頁沒辦法自動選擇正確的編碼，都要重新整理或手動選擇編碼才會正常。
請檢查您的 HTML 原始碼，看 TITLE 是否在指定編碼的 MATA 之上，如果是的話，請把 MATA 移到 TITLE 之前，這樣就可以解決 IE 誤判的情形了，正確應該如下：



網站標題

Firefox 無法顯示圖片替代文字(ALT)

lym520 — Sun, 30 Jan 2005 17:39:15 +0000

把滑鼠指標移到網頁圖片上，會出現一個小方框的工具提示，這叫做圖片替代顯示。語法為 alt。這個語法原本的作用是在圖片無法顯示時，用來取代圖片的文字，但卻越來越多人把它當成工具提示，文字和圖片毫無關係，這樣一來，當圖片無法顯示時，替代的文字便不足以表達圖片的含意。因此 Mozilla 的開發團隊便決定不支援 alt 屬性(只有圖片顯示不出來時顯示 alt)，變相避免網頁作者的誤用。

不過如果真要在 Mozilla 系列瀏覽器要顯示工具的話，有另外一個屬性可以使用：「title」。

雖然 title 屬性不見得所有瀏覽器都支援，如有些會將其顯示在狀態列上，但使用 title 不論在 Firefox 或者 IE 上都可以正常顯示，相容性是比 alt 來的高，所以建議以後寫網頁時不妨再多增加一個 title 屬性試試！

參考網址