CSSDIV布局求求助,用到float,现在不知道怎么让logo图片浮动后让菜单正常显示
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSSDIV布局求求助,用到float,现在不知道怎么让logo图片浮动后让菜单正常显示相关的知识,希望对你有一定的参考价值。
Logo图片浮动后,其原先占据的空间会被清除,你可以给div加个边框看看其实际位置所占据的空间,估计,你的菜单栏是被图片覆盖看不到了?若想要使其正常显示,就要让他保留空间,或者给菜单栏设置margin。第一种方法,让其保留空间,估计你的是直接加img标签,然后对其进行浮动,这样的话,在div标签内部最后一个标签后面加个<div style="clear:both"><div>,清除浮动,外部div容器就可以包裹住浮动后的图片了,也就是让被因浮动后所占空间被清除的图片恢复空间。这样,菜单栏就不会和图片重合在一起,导致菜单栏看不到或显示不完整。另一种方法很简单,直接给包裹菜单栏的div加个margin-top:300px,就可以看到效果了 参考技术A <!DOCTYPE html><html>
<head>
<title>test</title>
<meta charset=UTF-8 />
<style type="text/css">
*
margin:0;
padding:0;
.menu
width: 100%;
height: 50px;
background: #efefef;
z-index: 999;
.menu .nav
position: relative;
width: 100%;
height: 50px;
.menu .nav li
float: left;
font-size: 18px;
width: 140px;
.menu .nav li a
float: left;
display: block;
height: 50px;
padding: 0 30px;
line-height: 50px;
color: #333;
text-decoration: none;
position: relative;
overflow: hidden;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
.menu .nav li a:hover,.menu .nav li a.current
background: #8ecb8d;
color: #fff;
.menu .nav li .box
width: 100%;
height: 35px;
position: absolute;
top: 50px;
background-color: rgba(0, 0, 0, 0.4) !important;
background-color: rgb(0,0,0);
filter: Alpha(opacity = 40);
display: none;
font-size: 16px;
z-index: 999;
.menu .nav li .box a
display: block;
height: 35px;
color: #fff;
line-height: 35px;
border: none;
background: none;
padding: 0;
width: 114px;
text-align: center;
.menu .nav li .box a:hover
text-decoration: underline;
color: #8ecb8d;
ul
list-style: none;
.logo
width: 200px;
height: 80px;
text-align: center;
line-height: 80px;
font: bolder 10px;
color: #fd3;
background-color:blue;
</style>
</head>
<body>
<div class="logo">北大青鸟</div>
<div class="menu">
<ul class="nav">
<li><a href="#">网站首页</a>
</li>
<li><a href="#">概况介绍</a>
<div class="box"> <a href="#">院系简介</a> <a href="#">机构设置</a> <a href="#">现任领导</a>
</div>
</li>
<li><a href="#">党建工作</a>
<div class="box"> <a href="#">支部设置</a> <a href="#">党员教育</a> <a href="#">书记信箱</a> <a href="#">荣誉奖励</a>
</div>
</li>
<li><a href="#">教学工作</a>
<div class="box"> <a href="#">专业设置</a> <a href="#">师资队伍</a> <a href="#">实习基地</a> <a href="#">教学成果</a>
</div>
</li>
<li><a href="#">教学资源</a>
<div class="box"> <a href="#">教材专著</a> <a href="#">重点课程</a> <a href="#">主干课程</a>
</div>
</li>
<li><a href="#">科研工作</a>
<div class="box"> <a href="#">科研课题</a> <a href="#">科研论文</a> <a href="#">科研条件</a>
</div>
<li><a href="#">招生就业</a>
<div class="box"> <a href="#">招生情况</a> <a href="#">就业概况</a> <a href="#">就业信息</a>
</div>
<li><a href="#">联系交流</a>
<div class="box"> <a href="#">合作交流</a> <a href="#">系友通讯</a> <a href="#">对外服务</a>
</div>
</li>
</ul>
</div>
</body>
</html>
div+css 我是一个div里带了两个div,两个并列的。但是现在的左边是正常的,右边就是不上去不知道为啥?
宽度没有超过最外面的div的宽度。想知道都有什么情况会出现这种状况?请教各位。。
代码:
#middle
float:left;
width:100%;
padding-top:10px;
min-height:680px;
#left
float: left;
width: 209px;
border:#cccccc 1px solid;
#right
width:750px;
float:right;
border:#000000 1px solid;
如果小于的话,right就会被挤下来,如果你用%来定义宽度的话应该就没问题了
可以加个属性:overflow:hidden
在#middle容器里 #left,#right 下边 清楚下样式<div style="clear:both;height:0px;font-size:0px;"></div> 参考技术B 把#right样式改成这个
#right
width:750px;
float:left;
border:#000000 1px solid;
让左右两个div的浮动都设为float:left 参考技术C IE6有双边距BUG.还有border也要算进去.你盒子模型还不是很明白.多钻研一下.~追问
我没用ie6,用的火狐做看的也这样。。border算进去了
追答你是左右还是左中右啊.我看上面CSS里是三个层.你图片上是两个层. 适当的把那层宽缩小试试.不行加上背景色看一下.IE6下出这种的话加上display:inline
追问左右。三个一个是最外面的两个是里面并列的。。层宽远小于最外面的
追答细心一点.检查一下代码.
我写的与你的差不多的.没错的
sfsfsfsf
sasdffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffsfsfsf
html
overflow: -moz-scrollbars-vertical;
margin: 0;
padding: 0;
.....我是说页面html 代码啊、、看看是怎么布局的、、、、你把页面所有代码都贴出来吧、、如果你就一个div里面嵌套这左右两个div的话是不能出现那样的情况的
追问
显示的是在里面的,但是就是上不去,我想应该不是CSS的问题,右边的好像和左边的还是没放到一个里面去。。但是显示是在里面的。。找不到要放到哪里。。
搞不懂你那是什么情况、、、如果就这段代码:
加上你上面贴的样式的话、是不可能上不去的、除非浏览器窗口小于左右两个div宽度的总和
我那是左边有导航栏,右边是商品栏,但是这两个的div不是在一个里面的。。是分开的文件。我也知道要是这段代码没有理由上不去。。就是想问问,还有没有什么情况是可以上不去的。。
追答什么情况我就不知道了、、不过只要看了代码就能解决、、
第5个回答 2011-12-23 #right{float:left;}追问嗯,不好使
以上是关于CSSDIV布局求求助,用到float,现在不知道怎么让logo图片浮动后让菜单正常显示的主要内容,如果未能解决你的问题,请参考以下文章
div+css 我是一个div里带了两个div,两个并列的。但是现在的左边是正常的,右边就是不上去不知道为啥?
css 怎样让div中的html标签向左浮动,因标签很多不像每个子标签都设左浮动?