部落格寬度調整問題請益 - 部落格
![Kama avatar](/img/cat5.jpg)
By Kama
at 2014-06-10T12:14
at 2014-06-10T12:14
Table of Contents
※進行一下動作之前,請務必將範本CSS做好備份,以備不時之需
┌─#container3 ────────────┐簡單了解版面結構(只將會影響的區塊
│┌#header ─────────────┐│粗畫出來)
││ ││第一步:找出最上層寬度有設限者,
│└─────────────────┘│找到了 #container3{……}
│┌#main ──────────────┐│其中width被設定為950px,修大寬度
││┌#content──────┐┌#links┐││來個1100px好了(根據原po給的範例XDDD)
│││┌.article-content┐││ │││
│││└────────┘││ │││第二步:了解main、content 、links
││└──────────┘└───┘││現的寬度
│└─────────────────┘│main=
│┌#footer ─────────────┐│1100px-25px*2=1050px
│└─────────────────┘│#content{ width: 670px;}
└───────────────────┘#links{ width: 200px;}
670+200=870,嗯,寬的扣打還有180px
第三步:將扣打加入#content裡,將#content{ width: 670px;}
改成#content{ width: 850px;}
ρ(-ω-〃) 呃,這樣文章和側欄黏TT的,太密個人不喜歡,
所以將850px縮小為840px,習慣留點空間呼吸~~(呼)
第四步:.article-content{ width: 670px;}改成#content{ width: 830px;}
基本上寬度加寬到此算一個結束,以下是細部美化部份
首先,我的banner圖怎麼怪怪的Σ(-`ω′-;)
這是因為原背景圖寬度只有960,寬度拉成1100它就不夠寬,重覆的部份就跑出來
解決辦法(1)重新將背景圖加寬上傳,更新#banner{ background:url("圖片位置")}
(2)我圖不改,右邊還是維持白色,背景圖不要重覆就可了
#banner {
background: url("圖片位置") repeat scroll 0 0 rgba(0, 0, 0, 0)
}中的repeat改成no-repeat 完工
接下來,我的文章標題怎麼怪怪的Σ(-`ω′-;)
加寬的關係,文章標題也要加大了.title{ width: 535px;}
840-10-115= 715
#content寬度-.article-head的padding-發文日期寬度
所以請修改成.title{ width:715px; }
疑~~我文章寬度增加了被什麼我的圖沒一起變大!!!!!
請將 .article-content-inner img[src$=".jpg"] { height: auto; width:100%;}
加入到CSS中,應該就看得到所有文章圖變大了
--
Tags:
部落格
All Comments
![Kumar avatar](/img/girl.jpg)
By Kumar
at 2014-06-11T01:49
at 2014-06-11T01:49
![Genevieve avatar](/img/girl1.jpg)
By Genevieve
at 2014-06-14T10:06
at 2014-06-14T10:06
![Hedda avatar](/img/girl2.jpg)
By Hedda
at 2014-06-16T17:20
at 2014-06-16T17:20
![Sierra Rose avatar](/img/girl3.jpg)
By Sierra Rose
at 2014-06-16T20:23
at 2014-06-16T20:23
![John avatar](/img/boy1.jpg)
By John
at 2014-06-18T11:35
at 2014-06-18T11:35
![Catherine avatar](/img/girl4.jpg)
By Catherine
at 2014-06-20T17:15
at 2014-06-20T17:15
![Oliver avatar](/img/boy2.jpg)
By Oliver
at 2014-06-24T02:24
at 2014-06-24T02:24
![Hedda avatar](/img/girl5.jpg)
By Hedda
at 2014-06-27T15:27
at 2014-06-27T15:27
![Valerie avatar](/img/woman.jpg)
By Valerie
at 2014-06-27T21:53
at 2014-06-27T21:53
![Odelette avatar](/img/cat1.jpg)
By Odelette
at 2014-06-30T11:25
at 2014-06-30T11:25
Related Posts
佈景主題無法預覽
![Bennie avatar](/img/woman-ring.jpg)
By Bennie
at 2014-06-04T14:24
at 2014-06-04T14:24
固定網址調整後出現404
![Olive avatar](/img/cat2.jpg)
By Olive
at 2014-06-03T13:09
at 2014-06-03T13:09
痞客邦掛了??
![Puput avatar](/img/dog2.jpg)
By Puput
at 2014-06-01T23:46
at 2014-06-01T23:46
你可能感興趣的文章
![Carol avatar](/img/cat3.jpg)
By Carol
at 2014-06-01T11:51
at 2014-06-01T11:51
舊密碼忘記 卻要我用舊密碼認證才登能入
![Joe avatar](/img/dog2.jpg)
By Joe
at 2014-05-31T11:43
at 2014-05-31T11:43