2013-06-28 366 views
1

我必须不会彼此相邻的div。左边的菜单继续下面,我无法提出。我曾尝试使用“top:-...”,但它不起作用!请帮忙!DIV拒绝彼此相邻

HTML:

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<title>Design At Ease - Home</title> 
</head> 
<body> 
<div id="header"> 
<div id="logo"><a class="logoclass" href="index.html">DesignAtEase.com</a></div> 
<ul id="headerlinks"> 
<li><a href="index.html">Home</a></li> 
<li><a href="coding.html">Coding</a></li> 
<li><a href="graphics.html">Graphics</a></li> 
<li><a href="database.html">Database</a></li> 
<li><a href="support.html">Support</a></li> 
<li><a href="more.html">More</a></li> 
</ul> 
</div> 
<ul id="quicklinks"> 
<li><a href="quickstart.html">Quick Start</a></li> 
<li><a href="tagsmain.html">Tag Helper</a></li> 
<li><a href="html.html">HTML</a></li> 
<li><a href="css.html">CSS</a></li> 
<li><a href="photoshop.html">Photoshop</a></li> 
</ul> 
<div id="wrapper"> 
<div id="midwrap"></div> 
<a class="Resources">Resources</a> 
<ul id="sidelinksleft"> 
<li><a href="quickstart.html">Quick Start</a></li> 
<li><a href="tagsmain.html">Tag Helper</a></li> 
<li><a href="news.html">News</a></li> 
<li><a href="learn.html">Learn</a></li> 
<li><a href="sites.html">Useful Sites</a></li> 
</ul> 
</div> 
</body> 
</html> 

CSS:

html, body {height: 100%;} 

* { height: 100%; } 

body{ 
position:relative; 
background:#fffffc; 
margin: auto auto; 
height:100%; 
} 

#header{ 
background:#e5e5e5; 
height:35px; 
width:100%; 
border-bottom: 1px #c9c9c9 solid; 
} 

#headerlinks{ 
position:relative; 
display:inline; 
float:right; 
margin-right:5%; 
bottom:44px; 
} 

#headerlinks li{ 
display:inline; 
padding-left:25px; 
} 

#headerlinks li a{ 
color:#777777; 
display:inline; 
font-size:18px; 
font-family: sans-serif; 
text-decoration:none; 
} 

#headerlinks li a:hover{ 
color:#a3a3a3; 
display:inline; 
font-size:18px; 
font-family: sans-serif; 
text-decoration:none; 
} 


#headerlinks li a:active{ 
color:#00B2EE; 
display:inline; 
font-size:18px; 
font-family: sans-serif; 
text-decoration:none; 
} 


#logo{ 
position:relative; 
color:black; 
margin-left:5%; 
top:5px; 
} 

.logoclass{ 
color:#212121; 
display:inline; 
font-size:24px; 
font-family: sans-serif; 
text-decoration:none; 
} 

#quicklinks{ 
width:90%; 
margin-left:auto; 
margin-right:auto;; 
height:25px; 
background:#e5e5e5; 
border-bottom: 1px #c9c9c9 solid; 
border-left: 1px #c9c9c9 solid; 
border-right: 1px #c9c9c9 solid; 
top:-66px; 
position:relative; 
clear: right; 
} 

#quicklinks li{ 
position:relative; 
top:2px; 
display:inline; 
padding-right:20px; 
} 

#quicklinks li a{ 
color:#777777; 
display:inline; 
font-size:13px; 
font-family: sans-serif; 
text-decoration:none; 
} 

#quicklinks li a:hover{ 
color:#a3a3a3; 
display:inline; 
font-size:13px; 
font-family: sans-serif; 
text-decoration:none; 
} 

#quicklinks li a:active{ 
color:#00B2EE; 
display:inline; 
font-size:13px; 
font-family: sans-serif; 
text-decoration:none; 
} 


#wrapper{ 
position:relative; 
top:-82px; 
margin-right:4%; 
margin-left:4%; 
width:92%; 
height:100%; 
background:#fafafa; 
border-left: 1px #c9c9c9 solid; 
border-right: 1px #c9c9c9 solid; 
overflow:hidden; 
} 

#sidelinksleft{ 
margin-left:auto; 
margin-right:auto;; 
height:25px; 
position:relative; 
clear: right; 
float:left; 
margin-left:-25px; 
top:15px; 
} 

#sidelinksleft li{ 
position:relative; 
padding-top:3px; 
list-style-type: none; 
} 

#sidelinksleft li a{ 
color:#000000; 
font-size:13px; 
font-family: sans-serif; 
text-decoration:none; 
background-color:#82CFFD; 
height:17px; 
position:relative; 
border:1px solid black; 
width:150px; 
padding-left:3px; 
padding-top:2px; 
padding-bottom:2px; 
display:block; 
margin-bottom:2px; 

} 

#sidelinksleft li a:hover{ 
color:#000000; 
font-size:13px; 
font-family: sans-serif; 
text-decoration:none; 
background-color:#B0E2FF; 
height:17px; 
position:relative; 
border:1px solid black; 
width:150px; 
padding-left:3px; 
padding-top:2px; 
padding-bottom:2px; 
display:block; 
margin-bottom:2px; 

} 

#sidelinksleft li a:active{ 
color:#000000; 
font-size:13px; 
font-family: sans-serif; 
text-decoration:none; 
background-color:#82CFFD; 
height:17px; 
position:relative; 
border:1px solid black; 
width:150px; 
padding-left:3px; 
padding-top:2px; 
padding-bottom:2px; 
display:block; 
margin-bottom:2px; 

} 

.Resources{ 
color:#000000;; 
font-size:16px; 
font-family: sans-serif; 
position:relative; 
margin-left:-156px; 
} 

#midwrap{ 
width:70%; 
height:90%; 
border-left: 1px solid black; 
border-right: 1px solid black; 
margin-left:300px; 
background:black; 
top:10px; 
position:relative; 
overflow: hidden; 
} 

而且我没有更多细节,但它说我需要更多的,所以我打字这个随机段进行,所以我可以张贴我的问题。

+0

这两个div,我们谈论的吗?我从代码中创建了[jsfiddle](http://jsfiddle.net/JZ9t7/)。 –

+0

所以你想要标题链接和快速链接并排? – stackErr

+0

侧边菜单和黑框“midwrap”“sidelinksleft” –

回答

0

您的左边距(300px)和div的宽度(70%)对您的左侧导航保留的位置太多了。 默认情况下,div是一个块元素,在你的情况下,它占据了容器的整个空间,所以浮动你的div,当你浮动你的左侧导航,并删除从左侧导航清除,让它坐在浮动,因为它出现之前div。并在div上给clear:right

所以修改样式:

#midwrap { 
    width:70%; 
    height:90%; 
    border-left: 1px solid black; 
    border-right: 1px solid black; 
    margin-left:100px; /*Reducing this to 100px*/ 
    background:black; 
    top:10px; 
    position:relative; 
    overflow: hidden; 
    float:right; /*float right*/ 
    clear: right; /*add this here*/ 
} 

#sidelinksleft { 
    margin-left:auto; 
    margin-right:auto; 
    float:left; 
    height:25px; 
    position:relative; 
    /*removed clear from here*/ 
    float:left; 
    margin-left:-25px; 
    top:15px; 
} 

Demo

+0

我得到它的工作,谢谢你! –

0

请参见下面的HTML代码:

<body> 
<div id="header"> 
<div id="logo"><a class="logoclass" href="index.html">DesignAtEase.com</a></div> 
<ul id="headerlinks"> 
<li><a href="index.html">Home</a></li> 
<li><a href="coding.html">Coding</a></li> 
<li><a href="graphics.html">Graphics</a></li> 
<li><a href="database.html">Database</a></li> 
<li><a href="support.html">Support</a></li> 
<li><a href="more.html">More</a></li> 
</ul> 
</div> 
<ul id="quicklinks"> 
<li><a href="quickstart.html">Quick Start</a></li> 
<li><a href="tagsmain.html">Tag Helper</a></li> 
<li><a href="html.html">HTML</a></li> 
<li><a href="css.html">CSS</a></li> 
<li><a href="photoshop.html">Photoshop</a></li> 
</ul> 
<div id="wrapper"> 
<div style="float:left;"> 
<a class="Resources">Resources</a> 
<ul id="sidelinksleft"> 
<li><a href="quickstart.html">Quick Start</a></li> 
<li><a href="tagsmain.html">Tag Helper</a></li> 
<li><a href="news.html">News</a></li> 
<li><a href="learn.html">Learn</a></li> 
<li><a href="sites.html">Useful Sites</a></li> 
</ul> 
</div> 
<div id="midwrap"></div> 
<div style="clear: both;"></div> 
</body> 

我创建一个div拿着菜单和使用的浮动:左属性。