|
- UID
- 443
- 帖子
- 52
- 精华
- 0
- 积分
- 83
- 威望
- 109
- 金豆
- 227
- 阅读权限
- 10
- 在线时间
- 26 小时
- 注册时间
- 2008-8-29
|
楼主
发表于 2008-9-5 10:06
| 只看该作者
解决页面边栏错位的问题
相信用过wordpress的朋友都遇到边栏位置出错的问题。
有时候写了一篇blog，发布。结果在主页上发现边栏跑到了最下面。
我也因为这个问题郁闷了很久。不过仔细研究一下，发现还是好解决的。
首先，我们需要有网页编辑器。推荐frontpage而不是dreamweaver。因为，fp对css定义显示比较人性化。
我们把问题页面存一下，记住不要“保存全部”而是“网页，仅仅HTML”。这样，frontpage才能正常从网络加载你的页面。
好了，在连接网络的情况下用fp打开你的页面。
这时候我们发现症结所在
就是这篇文章把框架“顶宽”了，把边栏“挤”到了下面。
所以，我们的思路就是，只要限制了这个边框，那么问题就解决了。
我们在这个问题界面用鼠标点一下，确定一下位置。
我们在网页上方的css栏，发现。鼠标放在.post_body的时候，blog的文字部分就会被着重标记出来。
也就是说，这个不稳定的框架定义是.post_body。
我们来到wordpress的控制台。进入主题编辑器。进入css样式表。
找到.post_body
我们发现是这样的定义：
.post_body {background: #F5F5F5 url('img/post/body.gif') repeat-x left top;padding: 10px 10px 1px;}
css只定义了背景和边距。那么我们只要定义其内部文字在框架内自动换行，那么边框就不会被撑大了。
我们在其中插入这样的定义：word-break:break-all;word-wrap:break-word (我就不解释了，大家去baidu上找找定义说明。实现了自动换行)
也就是
.post_body {background: #F5F5F5 url('img/post/body.gif') repeat-x left top;padding: 10px 10px 1px;word-break:break-all;word-wrap:break-word;}
保存一下，进入你的主页看看。是不是边栏恢复成正常状态了？
当然，这里说明一下。并不是每个人的文章定义都是.post_body。
所以你要在fp中分析一下。才能找到准确的定义。
如果问题还是不能解决。那么你也可以用同样的方式在css中定义这个部分的宽度，使得它不至于过宽。这里就不赘述了。
{转载请著名作者}
欢迎访问我的blog
www.fishtimes.cn |
附件: 您所在的用户组无法下载或查看附件
-
1
评分次数
-
欢迎访问：www.fishtimes.cn
一步一步脚踏实地向wordpress达人进阶
|
|
发表于 2008-9-5 10:15
| 
发表于 2008-9-7 21:53
| 
