WordPress 主題教程 #11：寬度和佈局

寬度和規劃是從零開端創立 WordPress 主題系列教程的第十一篇，這篇將引見如何設定每個 DIV 的寬度和規劃排版，並且也會展現如何讓主題顯現正確，並同時在 Firefox 和 IE 下相容，顯現分歧。

在我們開端之前，翻開 Xampp Control，主題資料夾，Firefox 閱讀器，IE 閱讀器，index.php 和 style.css 這兩個檔案。

第 1 步：設定頁面總體寬度
如今我們首先要肯定的是主題的總體寬度。我們運用 750px；主題的大小取決於部落格絕大多數訪問者的螢幕解析度。需求防止的是運用過大寬度的的主題，假如部落格的讀者都大多數運用 800px × 600px 的螢幕，這樣的話，假如是運用 900px 寬的主題將會有 100 多畫素超出他們的螢幕，顯然這是對使用者很不友好的。

不論怎樣，我們怎樣樣把主題的總體寬度設定為 750px 呢？

我們需求把如今主題中的一切的東西（header，container，sidebar 和 footer）放入一個 750px 的 DIV 標籤中。

在 <body> 之後增加：<div id=」wrapper」>

在 </body> 之前增加：</div>

在 style.css 檔案中輸入以下程式碼：
#wrapper{
margin: 0 auto 0 auto;
width: 750px;
text-align: left;
}

在 CSS，# 號是透過 id 來定位頁面中的元素，而點號是透過 class 來定位頁面中的元素，如果你的程式碼是 <div class=」wrapper」>，那麼就應該用 .wrapper 來替代 #wrapper 去定位 wrapper 這個 DIV 標籤。

同時儲存 index.php 和 style.css 檔案。重新整理 Firefox 和 IE 瀏覽器（按 F5）檢視所做的改動。

詳細解釋：

margin: 0 auto 0 auto; 意思是（注意順序）：0 上頁邊空白，自動右頁面空白，0 下頁邊空白和自動左頁面空白。從現在開始，記得設定左右頁邊空白為自動將使得居中對齊。
width: 750px; 顯而易見是 750 畫素。
text-align: left; 是讓 wrapper DIV 中的文字向左對齊因為我們等下要要將 body{ text-align: left;} 改成 text-align: center;

第 2 步：自動頁面居中

把 body{} 中的 text-align: left; 改成 text-align: center; 。

為什麼？（我假設你使用的是 Firefox 和 Internet Explorer 6）。你的佈局可能你看起來是正確的，但對於使用早前版本的 IE 使用者可能不正確。還記得設定左邊和右邊的頁邊空白為自動是居中嗎？但是這並不是對所有的 IE 都適用，所以 body{ text-align: center; } 是讓 wrapper DIV 居中在舊版本 IE 的一種解決方案。

（隨便說一下，在 Firefox 和 IE 中文字大小是不同的，我們稍後解決。）

第 3 步：設定 header 寬度和佈局

讓 Header 浮到左邊並且設定它的寬度為 750px：

#header{
float: left;
width: 750px;
}

第 4 步：設定 Container 寬度和佈局

讓 Container 浮到左邊並且寬度為 500px：

#container{
float: left;
width: 500px;
}

第 5 步：設定 Sidebar 寬度和佈局

讓 Sidebar 浮到左邊，寬度為 240px，並且給它灰色的背景：

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
}

#ffffff 是白色而 background: #eeeeee; 是非常淺的灰色。我們給側邊欄增加一個背景顏色只是去檢視當增加剩下的 10 畫素之後的不同之處。

第 6 步：設定 Footer 的寬度和佈局

讓 Footer 浮到左邊，左右兩邊都沒有東西，並且寬度為：750px：

#footer{
clear: both;
float: left;
width: 750px;
}

Header 和 Footer 的樣式有什麼區別呢？答案是 footer{} 中有 clear: both; 。它在那兒使得 Footer 不能和它上面的東西（如 Sidebar 或者 Container）連線起來。

儲存並重新整理瀏覽器。

第 7 步：給側邊欄增加其餘的 10 畫素

給側邊欄增加其餘的 10 畫素的頁邊空白。現在側邊欄的 CSS 應該是：

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
}

儲存並重新整理瀏覽器去檢視 10 畫素的空白增加到側邊欄的左邊了。

margin: 0 0 0 10px; 具體的意思是：上邊空白為 0，右邊空白為 0，底部空白為 0，左邊空白為 10 畫素。當大小為 0 的時候，px 單位不是必需的。

第 8 步（額外的步驟）：修正 IE 的雙倍頁邊距 bug

Internet Explorer 有個雙倍頁邊距的 bug，這樣在 IE 下，我們的頁面距就是 20 畫素，20 畫素的頁邊距可能會破壞佈局並把側邊欄擠到頁面的底部，因為一個 20 畫素的頁邊距使得 Container 和 Sidebar 的寬度之和為 760px 而不是 750px 。為瞭解決這個問題，增加 display: inline; 到側邊欄。現在你的側邊欄應該是：

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
display: inline;
}

這裡是現在的 index 和 style 檔案的內容。

WordPress 主題教程 #11：寬度和佈局