樂多新版面上的 toolsの視覺微調方案

online
本文原發表於舊站,以程式匯入於此,尚待修整。

改版後的樂多網誌多了一排 tools,其中包括「工具:加入樂多書籤│編輯本文」等連結。垂直分隔線(|)只有出現在這兩項功能之間。其他部分則由於缺乏分隔線,擁擠地排在一起。

關於這部分的超連結,有些部落格使用底線或著色方式來標示。這種方式多少有助於分辨超連結之有無,雖然擁擠依舊。

對於既不想加上底線,而且超連結的著色政策傾向於低對比者如我,這多少是個傷腦筋的問題。也許因此,有人乾脆讓這部分從網頁上消失(嘿嘿嘿,我在等某人出來自首^^)。但若想保留呢?

這 兩天調整版面,順手解決這個問題。首先想到的是,運用javascript的方式,按照上一排的「Posted by…」格式,在各項目之間加上垂直分隔線。但這樣作,太麻煩。而且,若哪天樂多系統在這上面作更動,難免又得再麻煩一次。另,這樣做,在視覺上也未 必好看(當初樂多在增添這一排文字時,未放進垂直分隔線,也許也是基於同樣考量)。

以簡御繁吧。在CSS上增加這一行:

.tools{word-spacing: 12px}

簡單歸簡單,竟還是花了一段時間才想到該如此作。由於自己的部落格以漢字為主,所以差不多把這個漢字用不到的設定給忘了,淨往margin與padding 方面去思考。直到在面對 Firefox 與 IE 在空格寬度處理上的差異時,突然發現,可以把這個原本成為「盲腸級」的設定廢物利用。於是。

by 慕容理深
update: 2007.05.06 19:09
歡迎轉載轉寄(姓名標示-非商業性-禁止改作

Technorati : CSS, 樂多, 網頁設計
Del.icio.us : , ,

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料