帝国论坛帝国网站管理系统交流区模板/标签/插件共享交流[已解决]封面模板循环子栏目一行两列DIV+CSS成功实现 【本版专题贴子】  
 1/7     1 2 3 4 5 6 7 ›› ›|
主题:[已解决]封面模板循环子栏目一行两列DIV+CSS成功实现 [加入收藏夹]   

残阳如血
用户头衔:进士

精华贴   :0
发贴数   :399
经验值   :2000
注册时间:2006-06-08
信息 搜索 好友 发送悄悄话 精益求精-帝国网站管理系统7.5正式版开源发布】   [第 1 楼]
[已解决]封面模板循环子栏目一行两列DIV+CSS成功实现
效果在下边,大致思路是:主体部分(总宽度980)分左右浮动(.vmain_l和 .vmain_r),
右侧宽250,左侧自然是980-250=730了。右侧不管它了,可以添加版块内容。
左侧宽730分配,上边的“当前位置”720宽,与右侧边距10。
下边的循环部分是,每个子栏目设为左浮动,355宽,右边距10,这样两列宽度就是355*2+10+10=730,正好。
如果循环子栏目部分在总页面右侧,那就设置左边距为10即可,还是左浮动。

这样完美解决了循环栏目与“当前位置”上下照不齐的问题和子栏目间间距问题。
经测试,在IE8,FF,TT浏览器下正常!!!

举一反三,一行N列都是这个方法!


注意:[listsonclass]'selfinfo',5,40,0,0,13,0,0,0[/listsonclass]里边的13,是我复制系统循环子栏目标签模板后,新建立的循环子栏目标签模板ID,不是系统自带的7!

封面模板

<div class="vmain">
  <div class="vmain_l">
    <div class="position">当前位置:[!--newsnav--]</div>
    [listsonclass]'selfinfo',5,40,0,0,13,0,0,0[/listsonclass]
  </div>
  <div class="vmain_r">右侧宽度250不管它了</div>
</div>

CSS:

.vmain_l {
        float: left;
       width: 730px;
}
.vmain_r {
        float: right;
        width: 250px;
}
.position {
        line-height: 28px;
        background: url(/skin/default/images/title_bg1.jpg) repeat-x;
        height: 28px;
        width: 698px;
        margin-bottom: 10px;
        padding: 0px 10px;
        border: 1px solid #DEDEDE;
}
.vxh {
        width:355px;
        float: left;
        margin-right: 10px;
}
.vxh_title {
        line-height: 28px;
        background: url(/skin/default/images/title_bg1.jpg) repeat-x;
        height: 28px;
        width:343px;
        float:right;
        text-align:right;
        padding-right:10px;
        border: 1px solid #DEDEDE;
}
.vxh_title span {
        float:left;
        font-weight:bold;
        width:70px;
        height:28px;
        display:block;
        text-align:center;
        padding-left:10px;
}
.box {系统自定义}


循环子栏目标签模板:

页面模板内容(*)
<div class="vxh">
<div class="vxh_title"><span>[!--the.classname--]</span><a href="[!--the.classurl--]">更多&gt;&gt;</a></div>
<div class="box">
<ul>
[!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]
</ul>
</div>
</div>

列表内容模板(list.var) (*)——没有改变
<li><a href="[!--titleurl--]" title="[!--oldtitle--]">[!--title--]</a> <span>[!--newstime--]</span></li>


上传以下图片:


[该贴被修改 13 次,最后修改时间 2009-10-07 18:07:36 ]



2009-10-07 10:10:46 已设置保密 顶部 回复 引用 报告 编辑 删除

chunle
用户头衔:进士

精华贴   :0
发贴数   :1365
经验值   :4336
注册时间:2007-01-09
信息 搜索 好友 发送悄悄话 免费开源-EBMA系统:更安全的MYSQL管理和备份系统】   [第 2 楼]

支持,强烈支持。



顺安途科技
2009-10-07 11:09:05 已设置保密 顶部 回复 引用 报告 编辑 删除

chunle
用户头衔:进士

精华贴   :0
发贴数   :1365
经验值   :4336
注册时间:2007-01-09
信息 搜索 好友 发送悄悄话 精益求精-帝国网站管理系统7.5正式版开源发布】   [第 3 楼]

好东西呀。再支持一个。



顺安途科技
2009-10-07 11:09:41 已设置保密 顶部 回复 引用 报告 编辑 删除

job888
用户头衔:进士

精华贴   :0
发贴数   :624
经验值   :1903
注册时间:2008-07-13
信息 搜索 好友 发送悄悄话 免费开源-EBMA系统:更安全的MYSQL管理和备份系统】   [第 4 楼]

好东西呀。再支持一个。



比价网www.bijia.net
返现宝www.fanxianbao.cn

2009-10-07 14:04:17 已设置保密 顶部 回复 引用 报告 编辑 删除

job888
用户头衔:进士

精华贴   :0
发贴数   :624
经验值   :1903
注册时间:2008-07-13
信息 搜索 好友 发送悄悄话 精益求精-帝国网站管理系统7.5正式版开源发布】   [第 5 楼]

[listsonclass]'selfinfo',5,40,0,0,13,0,0,0[/listsonclass]

在默认的时候不行



比价网www.bijia.net
返现宝www.fanxianbao.cn

2009-10-07 14:15:39 已设置保密 顶部 回复 引用 报告 编辑 删除

残阳如血
用户头衔:进士

精华贴   :0
发贴数   :399
经验值   :2000
注册时间:2006-06-08
信息 搜索 好友 发送悄悄话 免费开源-EBMA系统:更安全的MYSQL管理和备份系统】   [第 6 楼]
[已解决]
在IE浏览器和TT浏览器下正常,但是在火狐FF浏览器下,右侧浮动被挤下去了,还是上不来!

这个问题将继续关注修改!!!

原来是vmain左浮动没有定义宽度所致。一楼已经修改好了,现在在IE8,FF,TT浏览器下都正常了!

上传以下图片:


[该贴被修改 2 次,最后修改时间 2009-10-07 14:58:34 ]



2009-10-07 14:48:15 已设置保密 顶部 回复 引用 报告 编辑 删除

残阳如血
用户头衔:进士

精华贴   :0
发贴数   :399
经验值   :2000
注册时间:2006-06-08
信息 搜索 好友 发送悄悄话 精益求精-帝国网站管理系统7.5正式版开源发布】   [第 7 楼]

原帖由 job888 于 2009-10-07 14:15:39 发表
[listsonclass]'selfinfo',5,40,0,0,13,0,0,0[/listsonclass]

在默认的时候不行



默认是什么意思?默认内容是什么?继续交流!

注意:[listsonclass]'selfinfo',5,40,0,0,13,0,0,0[/listsonclass]里边的13,是我复制系统循环子栏目模板后新建立的循环子栏目标签模板ID,不是系统自带的!

[该贴被修改 1 次,最后修改时间 2009-10-07 15:08:07 ]



2009-10-07 15:03:27 已设置保密 顶部 回复 引用 报告 编辑 删除

myleslin
用户头衔:举人

精华贴   :0
发贴数   :306
经验值   :1173
注册时间:2008-08-08
信息 搜索 好友 发送悄悄话 免费开源-EBMA系统:更安全的MYSQL管理和备份系统】   [第 8 楼]

收藏了,找了很久啊!



房产网站大全:(http://www.91home.com)免费收录各类房产网站!
2009-11-09 10:08:28 已设置保密 顶部 回复 引用 报告 编辑 删除

libaiping
用户头衔:探花

精华贴   :0
发贴数   :1548
经验值   :6502
注册时间:2006-05-25
信息 搜索 好友 发送悄悄话 精益求精-帝国网站管理系统7.5正式版开源发布】   [第 9 楼]

也是找了很久了

请问用表格做这个,并且自适应屏宽的如何修改?
这是固定了宽度的
谢谢了!



http://www.cnmidi.org

中国MIDI网站 打谱 汉化 Finale Sibelius 乐谱制作
2009-11-09 14:58:07 已设置保密 顶部 回复 引用 报告 编辑 删除

renfu
用户头衔:书生

精华贴   :0
发贴数   :51
经验值   :155
注册时间:2009-10-31
信息 搜索 好友 发送悄悄话 免费开源-EBMA系统:更安全的MYSQL管理和备份系统】   [第 10 楼]

好东西



移动式破碎机复合肥设备皮带输送机
2009-11-10 14:29:28 已设置保密 顶部 回复 引用 报告 编辑 删除
 1/7     1 2 3 4 5 6 7 ›› ›|

快速回复
内容

表情
使用EBB代码 使用smile代码 显示签名 自动分析url 自动分析img
     【进入高级模式】   (按 Ctrl+Enter 直接提交)
    顶部  加入收藏夹
关于帝国 | 广告服务 | 联系我们 | 法律声明 | 隐私条款 | 许可协议
Powered by: EBB Version 2.2.1