作者fluckie (心光)
看板Blog
標題[問題] 請教css達人 關於blog放800px大圖
時間Fri Aug 22 17:27:42 2008
經過一整天的奮戰，
勉勉強強把舊的亂掉的版面更新，
但是因為小弟的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;
}
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 211.74.220.70
1F：推 ayu91035:你在.main裡加上overflow-x:auto;試試，不過不建議在這時 08/22 17:35
2F：→ ayu91035:候修改css啦，畢竟後台現在還挺不穩的 08/22 17:36
3F：→ fluckie:感謝您＠＠ 剛剛試了不行 但還是謝謝 <(_ _)> 08/22 17:42
4F：→ ayu91035:這樣嗎? 不然你在裡面再加上width:90%試試 08/22 17:51
5F：→ fluckie:不行 >_< 感謝你 08/22 17:55
6F：→ ayu91035:不~~我真是太失敗了，知道原因卻修不好，再換成 08/22 17:57
7F：→ ayu91035:overflow-x:hidden;試試 width不變 08/22 17:58
8F：→ fluckie:不..不行 對不起 >_< 08/22 18:02
9F：→ ayu91035:怪怪...不然在.blogbody裡加上overflow:auto;和 08/22 18:22
10F：→ ayu91035:overflow-x:hidden; 圖應該會被切掉才是 08/22 18:23
11F：→ ayu91035:因為你這個問題很明顯是圖太大把旁邊link列擠掉，除了把 08/22 18:24
12F：→ ayu91035:圖縮小、body加寬就是讓你的圖不超過你的blogbody了 08/22 18:25
13F：→ fluckie:嗯 加上後blogbody的圖就切掉且隱藏了 但是側欄還是在下 08/22 18:27
14F：→ fluckie:面ㄟ @@ 08/22 18:27
15F：→ ayu91035:你的文章日期.date裡的margin後那個430調小點試試 08/22 18:36
16F：→ fluckie:調小也不行 不過我猜問題可能出在引用跟迴響那邊 @@ 08/22 18:42
17F：→ fluckie:我猜是引用列表下方那條線太長 @@ 08/22 18:44
18F：→ fluckie:但是找不到在哪裡 >_< 08/22 18:44
19F：→ fluckie:也不是 XD 但還是感謝幫忙@@ 真的很麻煩你 08/22 18:46
20F：→ fluckie:先改用基本模版 非常感謝您的幫忙 <(_ _)> 08/22 19:09