作者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