2013-06-28 670 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拿着菜單和使用的浮動:左屬性。