兩行式 CSS 固定寬度 side bar

Posted by tjwei on 星期二, 3月 20, 2007 with No comments
這是一個簡單的筆記,簡述兩行式版面,右邊 side bar 固定寬度,左邊主要欄位浮動寬度的作法。

我個人不喜歡在 blog 使用那種限定像素寬度的版面,因為每個人選擇螢幕和視窗大小的自由。
一個原則是資料類型的網頁(如 blog 或者資料查詢),比較類似設計應用程式介面的思維,所以使用可調整寬度的設計會比較好,想想,如果你的 word 固定 800x600大小,會不會很難用?在 1600x1200 的螢幕下面,會不會很小?
所以說,用那種 70%:30% 或者 80%/20% 比較好了嗎?也不會,因為 side bar 的常常放一些小元件和圖片,這些都是固定寬度的,如果照比例放大縮小,對於有些螢幕太大的人,或者習慣用小視窗瀏覽的人,可能會造成 sidebar 太大太小的問題。
所以理想的版型應該是 side bar 固定寬度,主欄位變動寬度。那這樣怎麼弄呢?以 blogger 為例,原來通常是在 #content-wrapper 裡面包含一個 #sidebar-wrapper 和 #main-wrapper。如果我們要讓 #sidebar-wrapper 固定寬度,我們可以這樣改,先增加一個 #main-wrapper2 這個 style,這個將要放到 #main-wrapper 裡面。接下來的原理是,我們要讓 #main-wrapper 向左對齊佔據全部的空間,然後 #sidebar 也向左對齊,不過重點是我們把 sidebar 向左對齊的邊緣設成的,這樣原本會緊鄰在 main 右邊的 sidebar,會往左移,只要把寬度調整好, sidebar 就會和 main-wrapper 重疊。
但是這樣,因為重疊的原因,我們不能直接把文章放進 #main-wrapper,這樣文章會有一部分被遮住,這也就是我們為什麼要 #main-wrapper2 的原因,我們把他放入 #mainwrapper 中,並且調整右邊界 ,讓他不會和 sidebar 重疊,這樣就行了。
了解原理之後就比較容易自己修改了。
一個示範的 css 2.0 代碼如下:
#content-wrapper {
width: 90%;
}
#main-wrapper {
margin-left: 14px;
width: 100%;
float: left;
}
#main-wrapper2 {
margin-right: 310px;
}
#sidebar-wrapper {
width: 280px;
margin-left: -294px;
float: left;
}
這個代碼我只留下關鍵的部份,顏色等等其他的部份,保留原來的設定即可。 310 > 294 >280 是因為我要留下一些空白,這三個數字是相關的。content-wrapper 的寬度 90% 是看你兩邊的留白而定。#main-wrapper2 的樣式設定基本上可以 copy #main-wrapper,因為他其實是真正的 #main-wrapper。
最後,要修改一點 html 把 #main-wrapper2 放進 #main-wrapper。在不打開小裝置的情形下,其實大致上是如同下面的 html code
<div id="main-wrapper">$lt;div id="main-wrapper2">
<b:section class="main" id='main "showaddelement="'no"'>
<b:widget id="'Blog1'" locked="'true'" title="'blog" type="Blog" />
</b:section>
</div></div>
也就是原先包一層,現在變成包兩層了。這樣就能達到理想的效果。

Categories: