CSS 教學：相對定位與絕對定位的應用

Manifold

上面圖形的原始碼是：

    <div style="border: 1px solid;
                width: 200px; height: 120px;">
        <div style="color: blue;">Manifold</div>
    </div>

問題來了，我想把 Manifold 移到最右邊，要怎麼做？

Javascript - Behavioral Separation

之前在 組織長列表 一文中有用 Javascript 來達到動態改變網頁內容的目的。以下是當時用到的程式碼。

組織長列表

之前會把每個禮拜的研究進度記錄在 部落格上， 方便自己檢視過去曾經做過的事。 我是用列表 (list) 來做記錄，每個禮拜的進度就是一個項目 (item)， 不過用直式列表來做記錄有很大的缺點：

1. 時間一久，列表就越來越長， 以至於每次我要看前幾個禮拜的結果時，都要將網頁捲到最底端。
2. 我的工作通常是每過幾個禮拜就有一個段落，如果用直式列表做記錄的話， 不易將記錄分段。

所以就有了將這個長列表改寫的念頭， 我的想法是利用 tabs，將每一個段落收在一個 tab 裡面， 這樣我可以將每個段落分得很清楚。 其次是我可以將最近的工作顯示在最前面的 tab，方便檢視最近的進度。

我在 maxdesign 找到一個我覺得不錯的設計： Unraveled CSS Tabs。 不過，使用 CSS tabs 的話會遇到一個問題， 每一個 tab 就是一個 html 檔案，這樣維護起來很麻煩。 我的希望是只要一個 html 的檔案就好，不過如此一來就需要使用 Javascript， 才可以動態設定 html element 的 CSS 屬性 display。 雖然沒有學過 Javascript，但是憑著程式設計的經驗， 在看過 Javascript in Ten Minutes 和查閱過 mozilla 及 MSDN， 總算完成了 我的想法。

七里香 - CSS 直式中文排版

沒看過有人用 CSS 處理直式中文排版， 原因是外國人沒有直式排版， 而且直式中文是由右至左，不是像英文一樣由左至右。

目前我只能排版詩，還不能排版文章， 因為詩是一句一句的，比較容易處理。 我把每一句詩包在 <p> 標籤中， 再把 <p> 的寬度設成 1em 也就是一個字元的寬度， 就可以形成直式排版的效果。

至於靠右的效果，把 <p> 的 float 屬性設成 right 即可。 至於標題，我是用 <h2>，也是類似 <p> 的處理手法， 最後再調整一下 padding 即可。

七里香

溪水急著要流向海洋

浪潮卻渴望重回土地

在綠樹白花的籬前

曾那樣輕易地揮手道別

而滄桑的二十年後

我們的魂魄卻夜夜歸來

微風拂過時

便化作滿園的郁香

怎樣改進英式中文 - 文章排版

排版下面這篇文章的主要目的是練習 CSS 樣式的使用。 文章中提到了中文西化之後的後遺症， 我一邊看一邊冒汗，中文西化的毛病， 我好像都有，希望讀完文章之後病症可以減輕一些。

第一次是在 William 看到這篇文章， 後來在 Jedi, Jserv, Jeff Hung 也有看到。 文章的原文出處是 這裡。如有侵權請 email 通知我，我會將文章移除。

此外練習排版時還遇到了不少問題，以下是遇到的困難及找到的解決方法：

1. indented paragraphs
2. alignment
3. centering or 1 or 2