Re: [痞客] 部落格寬度調整問題請益

[likangrace (沊沊)]

※進行一下動作之前，請務必將範本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中，應該就看得到所有文章圖變大了

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 114.45.158.183
※ 文章網址: http://www.ptt.cc/bbs/Blog/M.1402373703.A.D2D.html
※ 編輯: likangrace (114.45.158.183), 06/10/2014 12:19:57
推 TongWang:大人～你太棒了（叩拜）按照你的方法，我弄了好久終於搞
→ TongWang:定！但是banner圖還是無法...我土法煉鋼好久還是不行@@
→ TongWang:而且有些細節好像怪怪的，說不上來的怪@@
→ TongWang:banner的部份，我全部改成no-repeat還是不行（已哭）
推 TongWang:而且我所有文章中的直圖全部變好大大大@@
1)Banner圖  搜尋 #banner{ 
應該有以下的搜尋結果

#banner {
height:318px;
background:url(https……….jpg) no-repeat;
}

請在background:的後面新增綠色的部份
完工

2)嗯，最後的寫法的確會連直圖也變大，
若要使用還需搭配其他script才可，
所以我將它低調暗化它了(欲看者請自行開燈哦)，
就請原po省略它吧(＠△＠；)
<(＿ ＿)>抱歉了
※ 編輯: likangrace (114.45.159.206), 06/11/2014 10:04:51
推 corehs:推教學
推 TongWang:大人~~~你太棒了，我搞定了（歡呼），請接受我的叩拜OTZ
→ likangrace:(v￣ω￣(v￣ω￣(v￣ω￣) ya~~~~
推 hirorei:推
推 suching128: 太棒了！多虧有神人，我的網誌也搞定了！感謝！
→ suching128: 順便請問一下，banner的圖片設定不重覆後，
→ suching128: 是否能設定圖片置中呢？拜求神人解析！