min問道:如何將網誌版面置中，且不受螢幕解析設定的影響?
將版面置中做法很多種，基本上分為table法及css法，css作法影響因素較多，css的相容性受到各廠牌瀏覽器、IE版本、甚至mac下也會有不同的結果，這邊教學文件以解決問題文主，不做詳細論述。
做法請參考內文。
- table法：是小弟比較偏愛的做法，簡單且容易了解，只是在所有網頁內容包進一個表格，並將之設定為置中即可，不容易受到其他外在條件的影響，缺點則是必須逐頁修改。
請注意，Table 法不適合與position:absolute一起用，會產生內容相疊的現象。
請在MT模版中尋找<body>標籤，在之後加上：
<table width="A" align="center">
<tr>
<td>A = 請設計者自訂，可為百分比及固定px，例如：width="760px" or width="70%"
並在</body>之前加上
</td>
</tr>
</table>
- css法 [一]：
將網誌內容以另一個"大"容器包起來，並將其屬性設定為左右自動及寬度即可，此寬度依內容寬度總合而定，並請注意，若內容中有設定margin請記得算進去並留個10px左右緩衝以免版面被擠亂掉。
#container
{
width:700px;
margin:0px auto;
text-align:left;
padding:15px;
}
並請於html的部分裡用<div class="container"></div>包起所有內容即可。
詳細作法及範例請參考以下網頁 -- Centering: Auto-width Margins
註：此法不適用於IE5及更舊的版本。
- css法 [二]：若想要上下左右皆置中，可以參考以下網頁說明及Demo - Dead Centre
其中關鍵css語法為：
#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #f00;
text-align: center;
margin-top: -35px;
margin-left: -125px;
position: absolute;
top: 50%;
left: 50%;
width: 250px;
height: 70px;
visibility: visible
}
希望對有需要的讀者有幫助，若有任何錯誤還請不吝指正。
-->
Licensed under
哈囉， Quawn,
我試了您的方法，但都無法使網誌版面置中，且不受螢幕解析設定的影響，請問我該怎麼辦？
Lina
Dear quawn：
我用table法(並選70%)設定版面置中，可是重建之後沒有任何變化耶，改成60%也是看不到變化，不知道我的語法哪裡有誤？你可以幫我看看嗎？
寄出去囉
謝謝你
>>14 / Dear 葛蘿 :
可以阿....把code寄給我..我幫你看看..
To quawn
不好意思,我是生手不會做網頁
全靠網路上看前輩們怎麼改跟著改的
你說的方法我實在是不太懂耶
真的不好意思
還是我可以把我的碼寄給你看嗎?
先謝謝你的回覆喔
>>12 / Dear 葛蘿 :
你的網誌應該是用靠右靠左的方式排版，所以當畫面縮小時，sidebar會"騎"上主要文章的部分，改法有很多，但這全看你的喜好...
你可以下百分比，也可以用float的方法，讓右欄向左靠著左欄，至於我的做法是用table框住一個寬度，這樣不關畫面怎樣縮，編排不會改變，只有下面的捲軸會跑出來...
希望對你有幫助!
你好..
也可以幫我看看我的網頁嗎?
解析度不一樣的螢幕看了畫面都會亂掉
我試了上面的方法好像都不能奏效..
請幫幫我好嗎
看了一下你的stylesheet
加上
#link {
float:right;
}
還不行的話再加
#content {
float:left;
}
或是你要左右對調的話
float right的應該是優先設定
tryseesee
我終於將banner / content / link 至於框架內
可sidebar就老是沒法往上提
請問有哪裡出了問題嗎......
少打了好多東西，真不好意思
謝謝 lancetw 補充
Dear min:
請到 Stylesheet 模板裡修改 css元素 :D
例如：
#container {
‧‧‧‧
width:800px ;
‧‧‧‧
}
其他類推。
--
補充一下HTML，怕有朋友會誤解 kwei 的意。
<body>
<div id="container">
內容
</div>
</body>
謝謝quawn幫我修正版面
也謝謝kwei提供解決方式
我能了解你說的意思
只是我不太清楚應該把語法在在哪裡
我曾在main index下過
<body>
<container>
內容
</container>
</body>
但關於把content跟sidebar都設定width
例如: container=800px; content=595px; sidebar=195px;
我似乎找不出該在哪裡下這語法
能請再說明清楚些嗎
耽誤大家太多時間
請見諒....
>>5 / Dear kwei :
多謝補充...
我是在這邊學到的
http://css.maxdesign.com.au/floatutorial/tutorial0801.htm
其中在把整個網頁內容設定在container下
<body>
<container>
內容
</container>
</body>
把auto margin設在container 框住全部內容比較不會互相干擾
另外把content跟sidebar都設定width
例如: container=800px; content=595px; sidebar=195px;
留個10px緩衝
就不會被擠到下面了
>>3 / Dear min :
無論是上述哪種方法，css與html都要相互配合，我大致看了一下的模板，你說的banner無法與下方貼合的問題，是因為多了一行你不需要的語法所致，我已經替你拿掉....如果banner的上方也要貼合上緣的話，必須將body屬性改為margin:0px 0px;。
至於sidebar被擠到下面，可能原因很多，多數是因為css設定問題及在模板中<div>標籤沒對應好所致，你可以先在紙上畫一張簡圖標示各css的標籤，讓自己清楚知道自己網站的版面架構，這樣可以節省很多寶貴時間。
DEAR quawn
先謝謝你們詳盡的解說
我試過table方法
在1024*768底下仍有出現一點點橫向拉把/也就是不完全居中
在800*600則仍無法居中
於是我嘗試Demo -- Centering: Auto-width Margins
結果如下
在1024*768拉把消失/但來右半邊的選項全擠到螢幕下方
如何將它提到主內文旁邊
在800*600則仍無法居中
此外
banner的高度是否可調整 因為下方背景底色總是出現
無法直接與下面內文貼合
是否只能修改我banner圖案的高度來對應
還是還有其他方式
我的問題很多
請大家不吝指教.....
之前，我是看這兩篇學會置中對齊技術的。
http://bluerobot.com/web/css/center1.html
http://bluerobot.com/web/css/center2.html
另外，jeph也寫了”如何製作彈性招牌?”
針對非限定”所有網頁內容包進一個表格，並將之設定為置中即可”的方法。
http://blog.bluecircus.net/archives/001563.html
你們真是好樣呀~