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

By Frederica
at 2008-08-22T17:27
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;
}
--
勉勉強強把舊的亂掉的版面更新,
但是因為小弟的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;
}
--
Tags:
部落格
All Comments

By Liam
at 2008-08-24T17:00
at 2008-08-24T17:00

By Selena
at 2008-08-29T12:21
at 2008-08-29T12:21

By Kyle
at 2008-09-03T00:53
at 2008-09-03T00:53

By Steve
at 2008-09-06T15:00
at 2008-09-06T15:00

By Charlie
at 2008-09-07T09:24
at 2008-09-07T09:24

By Yuri
at 2008-09-10T13:21
at 2008-09-10T13:21

By Belly
at 2008-09-12T06:30
at 2008-09-12T06:30

By Agnes
at 2008-09-16T02:28
at 2008-09-16T02:28

By Rachel
at 2008-09-17T10:14
at 2008-09-17T10:14

By Andy
at 2008-09-19T12:11
at 2008-09-19T12:11

By Gilbert
at 2008-09-24T05:53
at 2008-09-24T05:53

By Noah
at 2008-09-26T02:01
at 2008-09-26T02:01

By Ida
at 2008-09-30T13:35
at 2008-09-30T13:35

By Dinah
at 2008-10-01T17:37
at 2008-10-01T17:37

By Catherine
at 2008-10-06T04:05
at 2008-10-06T04:05

By Michael
at 2008-10-10T09:17
at 2008-10-10T09:17

By Kristin
at 2008-10-10T17:45
at 2008-10-10T17:45

By Heather
at 2008-10-14T15:13
at 2008-10-14T15:13
Related Posts
統整一下痞客幫改後台之後的BUG吧

By Kama
at 2008-08-22T17:14
at 2008-08-22T17:14
統整一下痞客幫改後台之後的BUG吧

By Isabella
at 2008-08-22T17:02
at 2008-08-22T17:02
統整一下痞客幫改後台之後的BUG吧

By Megan
at 2008-08-22T17:01
at 2008-08-22T17:01
統整一下痞客幫改後台之後的BUG吧

By Catherine
at 2008-08-22T16:39
at 2008-08-22T16:39
統整一下痞客幫改後台之後的BUG吧

By Catherine
at 2008-08-22T14:57
at 2008-08-22T14:57