DIV+CSS的奇怪问题。

zwl327 2008-02-20 10:54:32
小弟新学DIV+CSS,改了一个东西,发现出现非常奇怪的问题,请大虾赐教:
DIV:
<DIV id=HeadTop>
<DIV id=Logo><a href="{$Hope_SitUrl$}" target=_top><img src="{$Hope_SitUrl$}{$Hope_Skin$}IMAGE/Logo.jpg"/></a></DIV>
<DIV id=HeadBar>
<DIV id=HeadNavBar>
<UL>
<LI class=NoSep><A href="../ProClass_list.aspx"
target=_parent>我要买</A> </LI>
<LI><A href="/vipuser/YX_sell.aspx"
target=_parent>我要卖</A> </LI>
<LI><A id=MyTaoBao
href="/vipuser/default_vip.aspx"
target=_top>会员中心</A> </LI>
<LI><A href="/bbs" target=_top>购物社区</A> </LI>
<LI><A href="/help" target=_top>帮助中心</A> </LI>
<LI id=AdvanceBox>

</LI></UL></DIV>
<DIV id=QuickLinks>
adsfsalkdfjsa
<UL>
<LI><iframe src="{$Hope_SitUrl$}Login_Stat.aspx" frameborder="0" width="300" height="25" scrolling="no" ></iframe>
<!-- <script language="javascript" src="{$Hope_SitUrl$}Login_Stat.aspx" charset="utf-8" ></script>--></LI>
<LI><A href="Shop.aspx" target=_parent>品牌商城</A> </LI>
<LI><A href="News/" target=_parent>购物资讯</A> </LI>
<LI><A href="HighlevelSearch.aspx" target=_parent>高级搜索</A> </LI></UL></DIV></DIV></DIV>

CSS:
#Head #HeadTop{
position:relative;
margin:10px auto 0;
text-align:left;
height: 62px;
overflow: hidden;
}
#Head #Logo{
width: 240px;
height: 62px;
float: left;
margin-left: 2px;
}
#Head #HeadBar{
height: 62px
float: right;
margin: 0 3px 0 240px;
}
#Head #HeadNavBar{
height:30px;
float: top;
margin-left: 350px;
}

#Head #HeadNavBar li {
float:left;
height:21px;
display:inline;
margin: 0 3px;
background: url(../IMAGE/top_menu_r.png) no-repeat right top;
}

#Head #HeadNavBar li a{
display:block;
padding: 0 6px 0 7px;
float:left;
height:21px;
line-height:21px;
color: #111;
font-size: 12px;
background: url(../IMAGE/top_menu_l.png) no-repeat left top;
}
#Head #HeadNavBar a#MyTaoBao {
padding-left: 18px!important;
background: url(../IMAGE/top_menu_mytb_l.png) no-repeat left top;
}
#Head #HeadNavBar li a:hover{
color: #e60;
}

#Head #HeadNavBar li#AdvanceBox {
background: none;
margin-right: 2px;
}

#Head #HeadNavBar li#AdvanceBox form {
margin:0;
padding:0;
}
#Head #HeadNavBar li#AdvanceBox .HeaderSearchBox {
margin-right: 2px;
width: 8em;
border: 1px solid #bbb;
padding: 2px 2px 2px;
color: #000;
}
#Head #HeadNavBar li#AdvanceBox input.DC {
color: #888 !important;
}
#Head #HeadNavBar li#AdvanceBox .HeaderSearchBtn {
margin: 0;
width: 40px;
}
#Head #HeadNavBar li#AdvanceBox li {
background: none!important;
}

#Head #QuickLinks{
height:30px;
float:bottom;
overflow: hidden;
margin-left: 50px;
}
#Head #QuickLinks ul {
float: right;
}
#Head #QuickLinks ul li{
float: left;
margin-left:10px;
line-height: 21px;
}
#Head #QuickLinks li a:link, #Head #QuickLinks li a:visited {
font-style:normal;
font-weight:normal;
font-size: 12px;
color:#04d;
}
#Head #QuickLinks li a:hover, #Head #QuickLinks li a:active {
color:#e60;
}
#Head #QuickLinks li.HasMsgWW, #Head #QuickLinks li.HasMsgMail {
background:url() left center no-repeat;
padding-left:18px;
color:#390;
font:bold 9px Arial;
padding-top: 0px;
}
最大的问题:
QuickLinks不显示。只有HeadNavBar显示正常。
在改的过程中发现一个很怪的现象:
#Head #HeadBar{
height: 62px
float: right;
margin: 0 3px 0 240px;
}
这里,我发现height: 62px后少了一个分号,随手加上后,HeadNavBar 也不显示了。
请赐教!!
...全文
221 12 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
UltraBejing 2008-05-01
  • 打赏
  • 举报
回复
没遇到过这种情况.
xcs5180088 2008-02-25
  • 打赏
  • 举报
回复
很乱 很复杂
  • 打赏
  • 举报
回复
QuickLinks不显示。只有HeadNavBar显示正常。
在改的过程中发现一个很怪的现象:
#Head #HeadBar{
height: 62px
float: right;
margin: 0 3px 0 240px;
}
这里,我发现height: 62px后少了一个分号,随手加上后,HeadNavBar 也不显示了。

你加上分号是对的

至于你不显示了
是这么一个回事
<DIV id=HeadTop>
<DIV id=Logo> 为了说明清楚我省略了</DIV>
<DIV id=HeadBar>
<DIV id=HeadNavBar>
为了说明清楚我省略了</DIV>
<DIV id=QuickLinks>
为了说明清楚我省略了</DIV> </DIV> </DIV>

再来看看CSS
#Head #HeadTop{
position:relative;
margin:10px auto 0;
text-align:left;
height: 62px;
overflow: hidden;
}
#Head #Logo{
width: 240px;
height: 62px;
float: left;
margin-left: 2px;
}
#Head #HeadBar{
height: 62px
float: right;
margin: 0 3px 0 240px;
}
看看红色部分,再看看你的DIV结构
lele1990 2008-02-23
  • 打赏
  • 举报
回复
代码忒长啦...
quanxianjin 2008-02-21
  • 打赏
  • 举报
回复
貌似楼上的并不懂CSS
hebopolo 2008-02-20
  • 打赏
  • 举报
回复
#Head #HeadBar{
height: 62px
float: right;
margin: 0 3px 0 240px;
}
#Head #HeadNavBar{
height:30px;
float: top;
margin-left: 350px; }

62px后当然要加分号,为什么不显示的原因应该是在控制id=HeadNavBar的层的位置时出了问题,而问题的原因在于楼主没有弄清楚Margin的设置的前提是什么,解释如下:

首先层HeadBar设置的margin: 0 3px 0 240px;虽然没有设置层HeadTop的具体宽度,但还可以判断层HeadBar在Logo层的右端距HeadTop层左端240px,然而对于层HeadNavBar来说,它包含在层HeadBar里,并且层HeadNavBar的margin-left: 350px;问题就出现在这里,层HeadNavBar的左边距是相对于层HeadBar的,而层HeadNavBar的左边距设置为350px,可楼主也没有设置层HeadBar的宽度,如此一来,就不能确认层HeadBar与层HeadNavBar之间的相对位置,因为Margin的设置是基于它的父层的宽度及位置的,如果它的父层的宽度未指出,那么Margin的设置就很容易出问题,不能较好的控制子层的位置
一品梅 2008-02-20
  • 打赏
  • 举报
回复
#Head   #QuickLinks{ 
height:30px;
float:bottom;
overflow: hidden; //此行去掉试试.
margin-left: 50px;
}
zwl327 2008-02-20
  • 打赏
  • 举报
回复
不好意思,那这里有高手能帮帮忙吗?
ydlchina 2008-02-20
  • 打赏
  • 举报
回复
up
zyug 2008-02-20
  • 打赏
  • 举报
回复
发错版了吧...这种问题我从来都是交给美工搞定的..
quanxianjin 2008-02-20
  • 打赏
  • 举报
回复
#Head #HeadBar{
height: 62px;
float: right;
margin: 0 3px 0 240px;
}
这个是一种继承问题,首先你加了那个分号是正确的,至于为什么不显示,因为你的那个ID为HeadBar的div没有在它的父级ID为Head的这个div里,所以,页面上就找不到这个ID为HeadBar的div,当然也就不会显示了,解决的方法是:
<div id="Head">
<div id="HeadBar">aaaa</div>
</div>
这样就显示出来了!
cloudgamer 2008-02-20
  • 打赏
  • 举报
回复
说清楚什么不显示拉

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧