靠右的sidebar

要用CSS製造一個sidebar靠在右邊,不是什麼困難的事,而且方法很多,這裡的右邊的sidebar就是用CSS弄出來的,不過雖然方法很多,卻因為我的一些小龜毛,加上IE的bug,害我花了不少時間才弄到滿意。

首先要解釋一下何謂我的龜毛。分為兩點,一是我希望HTML原始碼中,sidebar的資訊在主要內容之後,這樣不支援CSS的瀏覽器就可以不必理會sidebar而可以先看到主要內容。二是我不希望對主要內容的位置或是float做設定,也就是保持預設的狀態,因為怕對CSS支援不完整或不正確的瀏覽器會把主要內容搞不見。這兩點其實單獨存在都還好,不過一起出現就殺掉了許多種可以用的方法,例如把sidebar內容放在主要內容前,然後讓sidebar的float屬性是right,這樣就可以做出靠右的sidebar,而且後面要提的IE的bug也不會出現。

一開始我是參考stopdesign的做法,把sidebar的position設成absolute,top和right設成0,本來一切OK的,直到用IE看了之後,發現到sidebar最右邊多了1px的空隙,這是不正確的,應該是IE的bug。我做了很多試驗後,發現問題在「right: 0;」上,如果是靠左「left: 0;」的話不會有這問題,又如果是用float來讓它靠右也不會有這問題,不過因為上面提過的原因,所以我不打算用float來處理,而且IE處理float似乎有問題,雖然我還不清楚是怎樣的bug。

為了處理這個問題,我測試了好久,最後終於成功了,不過不是真正的靠右,而是讓margin-left和width的值加起來是100%,當然margin-right和padding都是0,這種做法有個缺點是只能用百分比值來設定sidebar的寬度,其他像是em,px等等都不能用了,就算用了也只能對一種解析度做到真的是靠右的sidebar。下面是我的sidebar部分的css

#sidebar
{
	position: absolute;
	top: 3em;
	width: 32%;
	margin-left: 68%;
	padding: 0.5em 0;
	background-color: #933;
}

position: absolute;還是必要的,top: 3em是爲了保留最上面banner的空間,其實也可以設成0,然後用一個position: relative;的div標籤包起來,不過因為我不想要那麼多層div,就用現在這種方法了。在來就是主角,width和margin-left加起來剛好是100%。padding這樣設定是表示上下0.5em,左右0的意思,最後一行就是背景色了。再來是主要內容部份的css。

#content
{
	margin-right: 32%;
	padding: 0.5em;
}

要說明的只有第一行,margin-right: 32%;,這是爲了保留sidebar的空間,因為我的sidebar不是用float指派,所以必須要幫它保留好空間,不然會造成重疊的狀況,而這裡的margin-right的值和sidebar的width的一樣,當然也可以自己做調整,故意造成重疊的狀況,或是留些空白。

補充:發表完這篇過沒多久,我就在mezzoblue看到他最新的文章Friday Challenge,剛好就是討論同樣的問題,後面也有人提供了很有趣的處理方法,不過迴響部分我還沒看完。

comments powered by Disqus