« 1 2» Pages: ( 1/2 total )
本页主题: 添加论坛顶部图片和Logo的方法 打印 | 加为IE收藏 | 复制链接 | 收藏主题 | 上一主题 | 下一主题

大群
方便别人 提高自己
终身成就奖 金点子奖
级别: 管理员


精华: 24
发帖: 1593
威望: 1776 点
金钱: 12130 RMB
贡献值: 500 点
注册时间:2006-02-22
最后登录:2008-08-19

 添加论坛顶部图片和Logo的方法

管理提醒:
本帖被 大群 执行加亮操作(2007-12-03)
关于添加论坛顶部图片的探讨



在论坛中有一些介绍更换论坛顶部图片的帖子,发现一些问题,在.imglogo { }更换链接地址以达到更换论坛顶部图片的目的,在浏览网友的论坛时看到大部分都是如此,当显示器在 1024x768 情况下一切正常,但是显示器在 800x600 情况下会造成论坛上下宽度的不一致。所以我认为这样的操作是不完全的。


实际是在顶部的表格中 class 属性为 banner 的单元格中建立了一个层 class 属性定义为 imglogo 用于插入论坛 Logo 那么为了在显示器像素发生变化的情况下使得论坛宽度保持上下一致应该在.banner{   }中定义论坛顶部背景图片并根据实际定义其位置,在.imglogo { }中定义论坛 Logo 如果没有论坛 Logo 只是在论坛顶部显示一张图片或Gif动画,背景图片的链接地址相同只有在 .banner{   }和.imglogo { }同时定义就可以保持论坛宽度上下一致,不受显示器像素变化的影响,反之如果顶部分别显示论坛 Logo 和 Banner 则需要分别定义,如下为CSS定义说明:



.banner{
background: #8D5757;/* 单元格背景色 */
background-image:url(顶部背景图片地址);/* 顶部背景图片地址必须上传论坛后提取 */
}
.imglogo {
MARGIN: 0px;/* 边界的设置 */
padding: 0px;/* 检索或设置对象顶边的补丁边距 */
TEXT-ALIGN: center;/* 居中 */
background-color:#8D5757;/* 单元格背景色 */
background-image:url(顶部背景图片地址);/* 顶部背景图片地址同banner中定义的地址相同(如果Logo和背景图片相同) */
WIDTH: 195px;/* 宽度定义应小于760px */
HEIGHT:110px;/* 高度定义与顶部背景图片高度相同 */
}
千百度工作室网站      汽车报废服务 
Posted: 2006-07-01 20:37 | [楼 主]
萍水相逢
级别: 新手上路


精华: 0
发帖: 6
威望: 7 点
金钱: 60 RMB
贡献值: 0 点
注册时间:2006-07-10
最后登录:2006-07-11

 

我的风格是hsfy 为什么不行呢? 如果LOGO用宽740的 800X600显示正常,1024X768右面就显示左面的图片了。所以现在还在用宽969的LOGO

.banner{
background: #8D5757;/* 单元格背景色 */
background-image:url(:../../attachment/m112/14/54/14544/Mon_0607/22134_10994_11450f0a5ec96.gif);/* 顶部背景图片地址必须上传论坛后提取 */
}
.imglogo {
MARGIN: 0px;/* 边界的设置 */
padding: 0px;/* 检索或设置对象顶边的补丁边距 */
TEXT-ALIGN: center;/* 居中 */
background-color:#8D5757;/* 单元格背景色 */
background-image:url(:../../attachment/m112/14/54/14544/Mon_0607/22134_10994_11450f0a5b396.gif);/* 顶部背景图片地址同banner中定义的地址相同(如果Logo和背景图片相同) */
WIDTH: 969px;/* 宽度定义应小于760px */
HEIGHT:150px;/* 高度定义与顶部背景图片高度相同 */
}
Posted: 2006-07-10 22:37 | 1 楼
大群
方便别人 提高自己
终身成就奖 金点子奖
级别: 管理员


精华: 24
发帖: 1593
威望: 1776 点
金钱: 12130 RMB
贡献值: 500 点
注册时间:2006-02-22
最后登录:2008-08-19

 

.imglogo {
WIDTH: 969px;/* 宽度定义应小于760px */
}

你这里定义的宽度太大了,这定义的是单元格的宽度不是你的图片宽度
千百度工作室网站      汽车报废服务 
Posted: 2006-07-11 08:18 | 2 楼
萍水相逢
级别: 新手上路


精华: 0
发帖: 6
威望: 7 点
金钱: 60 RMB
贡献值: 0 点
注册时间:2006-07-10
最后登录:2006-07-11

 

.imglogo {
WIDTH: 969px;/* 宽度定义应小于760px */
}
这个如果定义成745,LOGO宽用969的,800X600模式下,LOGO表格和下方的表格大小是相同了(1024X768也正常),不过LOGO在800X600下右面有部份看不到了

如果LOGO我换成宽745的,WIDTH: 745px,800X600正常显示,1024X768在右方就显示LOGO左方的图片了

现在我设成的是WIDTH: 745px   LOGO宽度969
Posted: 2006-07-11 08:49 | 3 楼
萍水相逢
级别: 新手上路


精华: 0
发帖: 6
威望: 7 点
金钱: 60 RMB
贡献值: 0 点
注册时间:2006-07-10
最后登录:2006-07-11

 

能不能锁住外表格,就是让外表格固定大小,不让它随显示器变化
Posted: 2006-07-11 09:02 | 4 楼
大群
方便别人 提高自己
终身成就奖 金点子奖
级别: 管理员


精华: 24
发帖: 1593
威望: 1776 点
金钱: 12130 RMB
贡献值: 500 点
注册时间:2006-02-22
最后登录:2008-08-19

 

官方提供的4种风格中好像只有 hsly 把全部放在一个层内,只要定义定义层的宽度所有的内容都回在其设置的范围内
千百度工作室网站      汽车报废服务 
Posted: 2006-07-11 10:01 | 5 楼
jungli
级别: 新手上路


精华: 0
发帖: 20
威望: 21 点
金钱: 200 RMB
贡献值: 0 点
注册时间:2006-07-11
最后登录:2007-01-23

 

我想添加个banner在右边!跟你顶部一样,LOGO跟banner分开
但实现不了,却是显示在LOGO的底部重叠在一起了
.banner{color:#ffffff;background: url(/image/ck_lsky/ck_top.gif)}(另一张图片地址做为banner)
.imglogo {
  MARGIN: 0px;
  padding: 0px;
  TEXT-ALIGN: center;
  background-color:#11C7F7;
  background-image:url(:../../attachment/m121/22/50/22508/Mon_0606/14754_4326_172585c4c9c78ba.gif);(LOGO地址)
  WIDTH: 230px;
  HEIGHT:67px;
}
http://jungli.b.lunqun.com
Posted: 2006-07-11 11:16 | 6 楼
大群
方便别人 提高自己
终身成就奖 金点子奖
级别: 管理员


精华: 24
发帖: 1593
威望: 1776 点
金钱: 12130 RMB
贡献值: 500 点
注册时间:2006-02-22
最后登录:2008-08-19

 

在 .banner{         }中设定背景图片的位置就可以实现,

BACKGROUND-POSITION: 250px 10px;(这个是我论坛风格中的设置值,其中250位横坐标,10位纵坐标)
千百度工作室网站      汽车报废服务 
Posted: 2006-07-11 11:41 | 7 楼
jungli
级别: 新手上路


精华: 0
发帖: 20
威望: 21 点
金钱: 200 RMB
贡献值: 0 点
注册时间:2006-07-11
最后登录:2007-01-23

 

还是不行咯
.banner{color:#ffffff;BACKGROUND-POSITION: 250px 10px;background: url(/attachment/m121/22/50/22508/Mon_0607/14754_4326_7d64be8f1a46ee2.gif)前面跟这里后面都不行}
加下面这个也不行
BACKGROUND-POSITION: right top;
你在加在那里呢
图片:468*60
http://jungli.b.lunqun.com
Posted: 2006-07-11 12:29 | 8 楼
大群
方便别人 提高自己
终身成就奖 金点子奖
级别: 管理员


精华: 24
发帖: 1593
威望: 1776 点
金钱: 12130 RMB
贡献值: 500 点
注册时间:2006-02-22
最后登录:2008-08-19

 

看来你的论坛不知道你要达到什么效果,如果像我的论坛这样,下面的是我的论坛顶部定义代码并加了说明:

.banner {
BACKGROUND-POSITION: 250px 10px; BACKGROUND-IMAGE: url(背景图片banner地址); BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: #ebdeba
}

定义内容:背景图片位置横坐标250px ;纵坐标10px;使用背景图片banner;背景图片不重复;单元格背景色#ebdeba

.imglogo {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND-IMAGE: url(背景图片logo地址); PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 200px; PADDING-TOP: 0px; HEIGHT: 80px; BACKGROUND-COLOR: transparent
}

定义内容:补丁边距0;使用背景图片logo;单元格宽度200px;高度80px;背景色透明
千百度工作室网站      汽车报废服务 
Posted: 2006-07-11 13:41 | 9 楼
« 1 2» Pages: ( 1/2 total )
帖子浏览记录 版块浏览记录
千百度工作室 » 论坛风格 Style