憂藍夢境‧部落格 » 排版 http://blog.linym.net 我的學習心得、筆記 Fri, 09 Dec 2011 12:33:34 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 避免在 HTML 開頭使用註解 http://blog.linym.net/archives/474 http://blog.linym.net/archives/474#comments Sat, 02 May 2009 04:10:14 +0000 lym520 http://blog.linym.net/?p=474 前幾天學弟問我一個問題，說他 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 都有此現象)

]]> http://blog.linym.net/archives/474/feed 8 [CSS] 使多欄式版面高度等高 http://blog.linym.net/archives/134 http://blog.linym.net/archives/134#comments Mon, 07 May 2007 07:21:25 +0000 lym520 http://lym.fyman.idv.tw/blog/archives/134 解決了上一篇的高度不能自動延伸的問題之後，馬上會遇到另一個問題。#container 和 #content 延伸了，旁邊兩個區塊卻仍然維持原本的高度，如果要指定背景就很麻煩了。

01.png

解決方法：
加入以下 CSS：


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

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

參考文章

]]> http://blog.linym.net/archives/134/feed 0 [CSS] 重直多欄式版面自動延伸高度 http://blog.linym.net/archives/129 http://blog.linym.net/archives/129#comments Mon, 07 May 2007 07:06:05 +0000 lym520 http://lym.fyman.idv.tw/blog/archives/129 最近製作網頁開始試著用純 CSS 來排版了，習慣之後發現真的比表格排版更方便，不過當中也會遇到一些問題，其中一個就是這篇要講的。
現在有個三欄式版面，如圖：

01.png


#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 要能夠自動延伸，包住裡面的子區塊，但實做之後會發現變成這樣：
02.png
解決方法：
#container 裡不要指定高度，也就是維持預設的 height:auto; 同時加入 overflow: hidden; 即可。


#container {
	margin:0 auto;
	width: 780px;
	background: #ffc;
	border: 1px solid #000;
    overflow: hidden;
}

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

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

]]> http://blog.linym.net/archives/129/feed 13