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

避免在 HTML 開頭使用註解

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

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







Test Page





Content

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

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

利用 CSS 為相片加框

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

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

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

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

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

[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

利用 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; 即是允許框線重疊。

跨平台網頁設計：使用 Web 標準技術

lym520 — Mon, 06 Feb 2006 15:12:09 +0000

如果還不知道什麼是 WEB 標準、什麼是 W3C，或者你的網頁只能在 IE 正常瀏覽，換到其他瀏覽器就完全走樣，那就更應該看這本書。從不符合標準網頁所產生的問題開始，完整的帶領我們進入 WEB 標準的世界，並且以專題形式撰寫符合標準的網頁，是一本觀念很完整的書。

CSS 網頁設計師手札

lym520 — Mon, 06 Feb 2006 15:02:25 +0000

想要寫出符合 Web Standards 又美觀的網頁，CSS 的運用一定是少不了的，所以幾個月前買了幾本 CSS 的書籍，這本書列出了 101 個將 CSS 運用在網頁上常會遇到的問題和技巧。尤其是後面的『CSS 定位與版型』，對設計 Web Standards 網頁有非常大的幫助。