這次是改變內文和側欄的寬度,這也是很多人問過的問題!:)

 

首先呢,要先知道寬度的英文叫做「width」。
若我要設定某區塊為100px,就這樣打width: 100px;

以最常問的內文來說,就是 #content{width: 100px; }當然不可能只設為100px啦…XD)
側欄呢,就是 #links{width: 100px; }

在改寬度有個重點要注意,就是…其實我不知道怎麼說… =  ="
意思就是,例如今天要改內文和側欄的寬度的話,兩者的寬度加起來不能超過 #container 的寬度。

因為 #content 和 #links 都是包含在 #container 下面的,
所以如果 #content 和 #links 的寬度超過 #container 的寬度,#container 包不住這兩樣,就會造成側欄往下掉的悲劇(?)。

*注意:如果 #content 和 #links 有使用 margin-left 或 margin-right 的話,也要把 margin 的數值算進去,不然也會跑版。

再來說說三欄式要注意的,
三欄式的側欄會多兩個設定:#links#links-row-1(三欄式第一欄)、#links-row-2(三欄式第二欄)。
所以改的時候也要注意 #links-row-1 和 #links-row-2 的寬度加起來不可以超過 #links 的寬度噢。(也要記得把margin的值算進去)

 

補充:由於做樣式的慣性,在改的時候或許會遇到一個問題:底圖不變,看起來很奇怪。

因為做樣式時常常會需要製圖美化每個區塊,而背景就是基本上一定會另外做的,所以看到的背景並不是用色碼指定區塊(側欄或是內文)的背景色,而是圖片。既然是圖片,想當然爾光改CSS是不能變動它的囉。 

要改的話只能再做一張新的圖,把原本的圖取代掉。 

 

 

 

本文引用自yingmei75 - 教學|調整內文和側欄寬度

創作者介紹
創作者 yuki 的頭像
yuki

清心小站

yuki 發表在 痞客邦 留言(1) 人氣()