郁闷的CSS~!求救!

xxmhl 2008-03-12 09:36:09
样式:
.nav1{ width:100%;background-image:url(01.gif); height:31px;}
.nav1 ul{ padding:0px; margin:0px;}
.nav1 li{ float:left;display:block; height:21px; text-align: center; width:14%; padding-top:10px;background-image:url(01-1.gif);font-size:12px;}
.nav1 a{color:#ffffff; text-decoration:none; font-weight:bold;}
.nav1 a:visited{color:#ffffff;text-decoration:none;font-weight:bold;}
.nav1 a:hover{color:#ffffff; text-decoration:underline;font-weight:bold;}
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="nav1">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品产品产品产品</a></li>
<li><a href="#">商机</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">分类</a></li>
<li><a href="#">bbs</a></li>
<li><a href="#">产品产品产品产品</a></li>
<li><a href="#">商机</a></li>
<li><a href="#">资讯资讯资讯资讯资讯</a></li>
<li><a href="#">分类</a></li>
<li><a href="#">bbs</a></li>
<li><a href="#">产品产品产品产品</a></li>
<li><a href="#">商机</a></li>
<li><a href="#">资讯资讯资讯资讯</a></li>
<li><a href="#">分类</a></li>
<li><a href="#">bbs</a></li>
</ul>
</div>
<div class="main">
<div class="left-col">
<div class="CommonModule">
<div class="top5">
<div class="left float image-zuo">
</div>
<div class="middle fB float">
用户留言</div>
<div class="right float image-you">
</div>
</div>
<div class="TLContent5">
<ul>
<li><a href="#">大家好……我是丁贝莉。</a></li>
<li><a href="#">打造贝莉相册第一图贴册第一图贴第一图贴</a></li>
<li><a href="#">也许是最全的丁丁照片</a></li>
</ul>
</div>
<div class="ImgContent6">
<div class="TxtUnderImg">

<div class="picdiv">
<img src="images/pic3.gif" width="90" height="90" alt="" />
<div class="txtdiv">
<a href="#">
<ul>
<li>不锈钢热工清洗</li></ul>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="rowblank">
 </div>
</div>
</body>
下面的东西压住了导航(.nav),在IE6下可以换行,问:在IE7下如何和IE6一样正常显示.
...全文
83 点赞 收藏 19
写回复
19 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
yayayou103 2008-03-12
把你完整的DEMO发来看下!~!包括 <link href="css.css" rel="stylesheet" type="text/css" />
回复
xxmhl 2008-03-12
.nav1{ width:100%;background-image:url(01.gif); height:31px;}
这个高度去掉就可以啦!~!

我去掉高度了,可以用了,但是有个问题就是
.nav1 li{ float:left;display:block; height:21px; text-align: center; width:14%; padding-top:10px;background-image:url(01-1.gif);font-size:12px;} 句,没有上面的高度,这个条就
乱了.条就挤到一块了.要是带着这个高度换行的那条就个错位????请指教.
回复
xxmhl 2008-03-12

发表于:2008-03-12 11:17:538楼 得分:0
.nav1{ width:100%;background-image:url(01.gif); height:31px;}
这个高度去掉就可以啦!~!


这个高度是01.gif图片的高度.31PX;好像不能去掉吧.
回复
yayayou103 2008-03-12
IE6.0会跟据实际内容变化宽度和高度
但是7.0和FF,会严格执行你定义的属性!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
你用的过度协议就是起这个作用的
回复
xxmhl 2008-03-12
晕,还是不起作用啊,我在每个层里都设置了z-index.

.nav1{ width:100%;background-image:url(01.gif); height:31px;clear:both}
也是一样.
回复
yayayou103 2008-03-12
.nav1{ width:100%;background-image:url(01.gif); height:31px;}
这个高度去掉就可以啦!~!
回复
myvicy 2008-03-12
.nav1{ width:100%;background-image:url(01.gif); height:31px;clear:both}
回复
晕,你几个层的z-index都要设置下
数字越大越在上面
回复
xxmhl 2008-03-12
定义的z-index样式已经起作用了,只是又把下面的内容盖住了,请指教.
回复
xxmhl 2008-03-12
刚试了,好像不起作用哦,是不是我的z-index值要设大一点.
回复
myvicy 2008-03-12
.nav1{ width:100%;background-image:url(01.gif); height:31px;z-index:100}
回复
xxmhl 2008-03-12
设置样式的z-index?
麻烦您说清楚点,有点不明白.
我的问题是如果.nav换行,下面的内容就压住了.nav,
在IE6下是正常的,换行也不会压住,
在IE7下如何写才能实现一样的效果.
回复
myvicy 2008-03-12
设置样式的z-index
回复
xxmhl 2008-03-12
呵呵,已经解决了,谢谢大家了!
回复
myvicy 2008-03-12
呵呵,浏览器兼容问题一直都捆饶着大家.
如果你想做一个兼容较多浏览器的应用,在最开始的时候就在多个浏览器里一点点测试,而不是在一个里做出来然后到别的上面去测试.除非你自己掌握了多个浏览器的不同,否则到时候只有傻眼的份了。
回复
xxmhl 2008-03-12
谢谢各位的回复,真的很感谢,

在IE7下,问题已解决.

只是在FF下全乱了,真是让人头疼.
回复
晕,你几个层的z-index都要设置下
数字越大越在上面

你这个问题也一样的是位置和z-index的问题
回复
xxmhl 2008-03-12
top和TLContent的样式:
.CommonModule .top8{ width:100%;background-image:url(tit9-middle.gif); height:28px;}
.CommonModule .top8 .left{ background-image:url(tit9-left.gif); width:6%;height:28px; }
.CommonModule .top8 .middle{ background-image:url(tit9-middle.gif); width:63%; height:20px; padding-top:8px;}
.CommonModule .top8 .right{ background-image:url(tit9-right.gif);width:30%;height:20px; padding-top:8px;}
.CommonModule .TLContent8{border:1px solid #d8d8d8;}
.CommonModule .TLContent8 ul {line-height:200%;list-style: none;background-color:White; text-align:left;}
.CommonModule .TLContent8 ul li {text-align:left;height: 22px;overflow:hidden;padding-left:7px;}
回复
xxmhl 2008-03-12
这是我写的一个按纽文件,就是这些内容.
CSS:
.nav{ width:100%;background-image:url(04.gif); border-bottom:1px solid #A2A2A2; height:31px;}
.nav ul{ padding:0px; margin:0px;}
.nav li{ float:left;display:block; height:21px; text-align: center; width:14%; padding-top:10px;background-image:url(04-1.gif);font-size:12px;}
.nav a{color:#000; text-decoration:none; font-weight:bold;}
.nav a:visited{color:#000;text-decoration:none;font-weight:bold;}
.nav a:hover{color:#000; text-decoration:underline;font-weight:bold;}
index:
<div class="nav4">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品产品产品产品</a></li>
<li><a href="#">商机</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">分类</a></li>
<li><a href="#">bbs</a></li>
</ul>
</div>
<div class="main">
<div class="left-col">
<div class="CommonModule">
<div class="top8">
<div class="left float image-zuo">
</div>
<div class="middle fB float">
用户留言</div>
<div class="right float image-you">
</div>
</div>
<div class="TLContent8">
<ul>
<li><a href="#">大家好……我是丁贝莉。</a></li>
<li><a href="#">打造贝莉相册第一图贴册第一图贴第一图贴</a></li>
<li><a href="#">也许是最全的丁丁照片</a></li>
</ul>
</div>
</div>
</div>
<div class="rowblank">
 </div>
</div>
在这些东西了.
回复
相关推荐
发帖
CSS
创建于2007-09-28

6.0w+

社区成员

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
申请成为版主
帖子事件
创建了帖子
2008-03-12 09:36
社区公告
暂无公告