請教css達人 關於blog放800px大圖 - 部落格

Frederica avatar
By Frederica
at 2008-08-22T17:27

Table of Contents

經過一整天的奮戰,
勉勉強強把舊的亂掉的版面更新,
但是因為小弟的blog放的圖都是800px*600px
所以得自行將寬度增加

但最後碰到一個問題始終不知道怎解
只好來請教各位css專家

這是小弟的blog
http://fluckie.pixnet.net/blog/

首頁看起來無問題
但是一旦點進入文章內
右邊的側欄會擠壓到下面去

http://fluckie.pixnet.net/blog/post/21488665

像這樣

可是明明跟首頁的寬度都一樣
小弟不知該從何修改
希望大家幫幫忙 >_<
不求花俏只要整齊
沒想到整個pixnet竟然找不到什麼模版支援800大圖
真是囧阿

下面是我的css
套用的是樂多模版
從現有模版更改width得來
謝謝大家,打擾了真抱歉 <(_ _)>



/**************整體部份*******************/
html{
scrollbar-arrow-color:#666;
scrollbar-face-color:#fff;
scrollbar-track-color:#fff;
scrollbar-3dlight-color:#fff;
scrollbar-darkshadow-color:#fff;
scrollbar-shadow-color: #ccc;
scrollbar-highlight-color: #ccc;
}

body/*網頁整體*/
{
font-family:verdana;
text-align:center;
padding:0px;
margin:0px;
background:none
}

a/*超連結*/
{
color:#3E513E;
font-family:verdana;
text-decoration:none;
}
a:hover/*游標在連結上方*/
{
color:#898989;
text-decoration:none;
}

input/*按鈕與單行文字方塊*/
{
color:#172F17;
font-size:11px;
background:none;
border: 1px solid #EEE;
}

/*下拉式選單*/
select{
color:#172F17;
font-size:11px;
background:none;
border:#eee 1px solid;
width:150px;
}

/*內容區塊*/
#container{
background:transparent;
width:1100px;
margin:10px 50px 10px 0px;
}
/***********************版頭**************************/




/*版頭*/
#banner{
text-align:left;
font-size:13px;
width:1100px;
height:100px;
border-bottom: 1px dotted #D1D3D4;
margin-bottom:20px;

}

/*BLOG標題*/
.blogtitle{
font-size:15pt;
text-align:left;
font-weight:bold;
}

/*blog標題連結*/
#banner a
{
color:#000;
font-size:13px;
width:200px;
position:relative;
top:25px;
}

/*BLOG敘述*/
.description{
font-size:13px;
color:#939598;
text-align:left;
position:relative;
top:15px;
left:70px;

}

/***********************連結區塊**********************/

/*大區塊*/
#links{
float:right;
width:220px;
text-align:center;
padding:0px;
margin-left:5px;
overflow-x:hidden;
}

/*連結標題*/
.sidetitle{
text-align:center;
color:#464646;
font-size:12px;
font-weight:normal;
line-height:150%;
padding:5px;
margin:10px;
border-bottom: 1px dotted #D1D3D4;
}
/*各小區塊*/
.side{
font-size:12px;
margin-left:10px;
line-height:150%;
padding:5px;
text-align:center;
color:#999999;
}
a.aside{
color:#999999;
text-decoration:none;
}
a.aside:hover{
color:#172F17;
text-decoration:none
}


/*日曆*/
.calendarhead{
width:90%;
font-size:11px;
padding-bottom:5px;
color:#172F17;
text-align:left;
font-family:arial,helvetica,sans-serif;
height:14px;
line-height:110%;
}
.calendartable{
height:100px;
width:90%;
margin-bottom:30px;
}
.calendarweek{
font-size:10px;
color:#172F17

}
.calendarwd{
border-top-color:#172F17;
border-top-style:solid;
border-top-width:1px;
}
.calendard{
empty-cells:show;
}
.calendardbg{
}
.calendar{
font-size:11px;
color:#37C3D2;
line-height:110%;
}

a.acalendar/*日期的超連結*/
{
color:#172F17;
text-decoration:none;/*刪除連結線*/
}
a.acalendar:link{
color:#172F17;
text-decoration:none;/*刪除連結線*/
}
a.acalendar:visited{
text-decoration:none;/*刪除連結線*/;
color:#898989;
}
a.acalendar:hover{
color:#898989;
text-decoration:none
}

/*rss聯播*/
a.arss{
color:#898989;
text-decoration:none;/*刪除連結線*/
}
a.arss:hover{
color:#bababa;
text-decoration:none
}


/************************文章區塊***********************/

/*文章日期*/

.date{
margin:20px 0px -35px 430px;
font-size:8pt;
color:#bbbbbb;
font-weight:normal;
padding:0px;
text-align:right;
width:370px;
}

/*文章標題*/
.title{
font-size:16pt;
color:#172F17;
font-weight:bold;
width:800px;
padding-left:20px;
border-bottom: 1px dotted #D1D3D4;
}

/*首頁文章內容*/
#content{
float:left;
color:#363636;
font-size:16px;
text-align:left;
line-height:150%;
width:800px;
}

/*文章內容*/

.blog{
float:left;
width:800px;

}

/*整篇文章*/
.blogbody{
margin:5px;
padding:5px;
width:90%;
}
.main{
font-size:16px;
margin:5px;
padding:5px;
color:#000;
line-height:150%;
padding-left:10px;
}

/*資訊*/
.posted{
font-size:11px;
color:#999999;
text-align:right;
padding-bottom:20px;
}

a.aposted{
color:#999999;
text-decoration:none;
}
a.aposted:hover{
color:#172F17;
text-decoration:none;
}

/*引用*/
.trackback-url{
font-size:11pt;
margin:10px;
color:#172F17;
}

.trackback-body{
font-size:10px;
margin:10px;
line-height:150%;
color:#172F17;
padding:10px;
}

.trackback-post
{
font-size:12px;
margin:10px;
color:#172F17;
text-align:right
}

a.atrackback-post{
color:#999999;
text-decoration:none;
}
a.atrackback-post:hover{
color:#172F17;
text-decoration:none
}


/********************回應****************/

/*迴響列表*/
.comments-head{
font-size:13px;
color:#3E513E;
width:500px;
padding:10px;
}

/*留言內容*/
.comments-body{
font-size:12px;
margin:10px 10px 10px 30px;
line-height:150%;
color:#0A7A9AC;
padding:10px;
width:80%;
border: 3px double #D1D3D4;
}
/*留言者資訊*/
.comments-post{
font-size:12px;
width:550px;
margin:0px 0px 25px 10px;
color:#DCDDDE;
text-align:right;
}


/********************其他****************/
.menu{
font-size:12px;
color:#666666;
text-align:right
}


.pict{margin:5px5px5px5px;}
.photo{
text-align:center;
}
.nickname{
font-size:12px;
margin:10px0px;
color:#996600;
text-align:left;
}
.message{
font-size:12px;
color:#999999;
text-align:left;
}
.quote{
padding-right:1px;
padding-left:1px;
font-size:12px;
padding-bottom:1px;
color:#ffffcc;
padding-top:1px
}
.blogtimes{
margin:0px0px15px;
text-align:center
}
.powered{
margin:0px0px10px;
text-align:left
}
.syndicate{
margin:5px0px5px0px;
text-align:left
}
.checkers{
margin-top:10px;
font-size:12px;
}

--

All Comments

Liam avatar
By Liam
at 2008-08-24T17:00
你在.main裡加上overflow-x:auto;試試,不過不建議在這時
Selena avatar
By Selena
at 2008-08-29T12:21
候修改css啦,畢竟後台現在還挺不穩的
Kyle avatar
By Kyle
at 2008-09-03T00:53
感謝您@@ 剛剛試了不行 但還是謝謝 <(_ _)>
Steve avatar
By Steve
at 2008-09-06T15:00
這樣嗎? 不然你在裡面再加上width:90%試試
Charlie avatar
By Charlie
at 2008-09-07T09:24
不行 >_< 感謝你
Yuri avatar
By Yuri
at 2008-09-10T13:21
不~~我真是太失敗了,知道原因卻修不好,再換成
Belly avatar
By Belly
at 2008-09-12T06:30
overflow-x:hidden;試試 width不變
Agnes avatar
By Agnes
at 2008-09-16T02:28
不..不行 對不起 >_<
Rachel avatar
By Rachel
at 2008-09-17T10:14
怪怪...不然在.blogbody裡加上overflow:auto;和
Andy avatar
By Andy
at 2008-09-19T12:11
overflow-x:hidden; 圖應該會被切掉才是
Gilbert avatar
By Gilbert
at 2008-09-24T05:53
因為你這個問題很明顯是圖太大把旁邊link列擠掉,除了把
Noah avatar
By Noah
at 2008-09-26T02:01
圖縮小、body加寬就是讓你的圖不超過你的blogbody了
Ida avatar
By Ida
at 2008-09-30T13:35
嗯 加上後blogbody的圖就切掉且隱藏了 但是側欄還是在下
面ㄟ @@
Dinah avatar
By Dinah
at 2008-10-01T17:37
你的文章日期.date裡的margin後那個430調小點試試
Catherine avatar
By Catherine
at 2008-10-06T04:05
調小也不行 不過我猜問題可能出在引用跟迴響那邊 @@
Michael avatar
By Michael
at 2008-10-10T09:17
我猜是引用列表下方那條線太長 @@
但是找不到在哪裡 >_<
Kristin avatar
By Kristin
at 2008-10-10T17:45
也不是 XD 但還是感謝幫忙@@ 真的很麻煩你
Heather avatar
By Heather
at 2008-10-14T15:13
先改用基本模版 非常感謝您的幫忙 <(_ _)>

統整一下痞客幫改後台之後的BUG吧

Kama avatar
By Kama
at 2008-08-22T17:14
※ 引述《upyours2 (好多好多要學)》之銘言: ※ 引述《asagi (雪落之聲)》之銘言: ※ 引述《leafwind (有葉子的玉米)》之銘言: ※ 引述《jew (啾兒)》之銘言: 剛剛去服務區看了一下討論,整個還挺亂的, 不知道能不能在這邊發這篇文,大家用repost的方式寫進去、 如果 ...

統整一下痞客幫改後台之後的BUG吧

Isabella avatar
By Isabella
at 2008-08-22T17:02
※ 引述《asagi (雪落之聲)》之銘言: ※ 引述《leafwind (有葉子的玉米)》之銘言: ※ 引述《jew (啾兒)》之銘言: 剛剛去服務區看了一下討論,整個還挺亂的, 不知道能不能在這邊發這篇文,大家用repost的方式寫進去、 如果前面的人寫過的就不用在寫一次, 這樣也不會像Pixne ...

統整一下痞客幫改後台之後的BUG吧

Megan avatar
By Megan
at 2008-08-22T17:01
※ 引述《leafwind (有葉子的玉米)》之銘言: ※ 引述《jew (啾兒)》之銘言: 剛剛去服務區看了一下討論,整個還挺亂的, 不知道能不能在這邊發這篇文,大家用repost的方式寫進去、 如果前面的人寫過的就不用在寫一次, 這樣也不會像Pixnet討論區一樣一個主題底下堆了五頁可是大家各說各 ...

統整一下痞客幫改後台之後的BUG吧

Catherine avatar
By Catherine
at 2008-08-22T16:39
※ 引述《jew (啾兒)》之銘言: 剛剛去服務區看了一下討論,整個還挺亂的, 不知道能不能在這邊發這篇文,大家用repost的方式寫進去、 如果前面的人寫過的就不用在寫一次, 這樣也不會像Pixnet討論區一樣一個主題底下堆了五頁可是大家各說各的情形。 希望我們把這篇統計出來之後,寄給痞客幫, ...

統整一下痞客幫改後台之後的BUG吧

Catherine avatar
By Catherine
at 2008-08-22T14:57
※ 引述《xination (XINATION)》之銘言: 剛剛去服務區看了一下討論,整個還挺亂的, 不知道能不能在這邊發這篇文,大家用repost的方式寫進去、 如果前面的人寫過的就不用在寫一次, 這樣也不會像Pixnet討論區一樣一個主題底下堆了五頁可是大家各說各的情形。 希望我們把這篇統計出來 ...