2016-07-29 203 views
0

我網頁的導航菜單覆蓋了網站的主要內容/內容(父母內部的東西)。 當我將邊距添加到導航欄或父級時,導航欄會隨父級圖像/內容一起向下移動。 下面是代碼:導航菜單覆蓋主要網站內容

<html> 
<head> 
    <title>Digital Ethics</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body bgcolor="white"> 
    <div class="outer"> 
     <div class="nav"> 
      <div class="pic"><img src="logo.png" /><br><p><p></div> 
      <div class="nav-bar"> 
       <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">About Us</a></li> 
        <li><a href="#">Contact Us</a></li> 
        <li><a href="#">Services</a></li> 
       </ul> 
      </div> 
     </div> 
     <div class="parent"> 
      <div class="bimg"></div> 
      <div> 
      <div></div> 
      <div></div> 
      </div> 
     </div> 
    </div> 
</body> 
</html> 

CSS

body { 
    background-image: url("background.jpg");   
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    margin: 0px; 
} 

.outer { 
    width:100%px; 
    height: auto; 
    margin: 0px; 
} 

.nav { 
    width: 100%; 
    height: 180px; 
    display: inline-block; 
    background-color: white; 
    position: fixed; 
    margin-top: -30px; 

} 
.nav .pic{ 
    width: 40% 
    float: left; 
    display: inline-block; 
    margin-left: 60px 
} 
.nav .pic p{ 
    color: a5a5a5; 
    margin-left: 10px; 
} 
.nav-bar{ 
    width: 60%; 
    float: right; 
    margin-top: 45px; 
} 
.nav-bar ul{ 
    list-style-type: none; 
} 
.nav-bar li{ 
    background-color: transparent; 
    display: inline-block; 
    padding: 10px; 
    width: 150px; 
    text-align: center; 
    text-transform: uppercase; 
    font-weight: bold; 
} 
.nav-bar a{ 
    color: #4f4946; 
    text-decoration: none; 
} 

.nav-bar a:hover{ 
    color: #eb4934; 
    transition: 0.75s ease-out; 
} 

.nav-bar a:active{ 
    color: #eb4934; 
    transition: 0.75s ease-out; 
} 


.parent { 
    height: auto; 
    width: 80%; 
    background-color: white; 
    margin-top: 180px; 
} 

.bimg { 
    background-image: url("img.jpg"); 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    height: 200px; 
    width: 100%; 
} 

請幫幫忙, 在此先感謝。

+0

你會在哪裏做你的導航?固定頂部? – Luca

回答

0

此加入響應疑問語氣...

ul { 
    display: flex; 
    width: none; 
    white-space: nowrap; 
} 
-1

刪除高度從.parent類。 您必須將top: 0添加到導航類才能將其固定到頂部。

這是這裏的工作示例..

body { 
 
    background-image: url("http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg");   
 
    background-attachment: fixed; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: center; 
 
    margin: 0px; 
 
} 
 

 
.outer { 
 
    width:100%; 
 
    height: auto; 
 
    margin: 0px; 
 
} 
 

 
.nav { 
 
    width: 100%; 
 
    height: 180px; 
 
    display: inline-block; 
 
    background-color: white; 
 
    position: fixed; 
 
    top: 0; 
 
} 
 
.nav .pic{ 
 
    width: 40% 
 
    float: left; 
 
    display: inline-block; 
 
    margin-left: 60px 
 
} 
 
.nav .pic p{ 
 
    color: a5a5a5; 
 
    margin-left: 10px; 
 
} 
 
.nav-bar{ 
 
    width: 60%; 
 
    float: right; 
 
} 
 
.nav-bar ul{ 
 
    list-style-type: none; 
 
} 
 
.nav-bar li{ 
 
    background-color: transparent; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    width: 150px; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
} 
 
.nav-bar a{ 
 
    color: #4f4946; 
 
    text-decoration: none; 
 
} 
 

 
.nav-bar a:hover{ 
 
    color: #eb4934; 
 
    transition: 0.75s ease-out; 
 
} 
 

 
.nav-bar a:active{ 
 
    color: #eb4934; 
 
    transition: 0.75s ease-out; 
 
} 
 

 

 
.parent { 
 
    width: 80%; 
 
    background-color: white; 
 
    margin-top: 200px; 
 
    
 
} 
 

 
.bimg { 
 
    background-image: url("https://support.files.wordpress.com/2009/07/pigeony.jpg?w=688"); 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    height: 200px; 
 
    width: 100%; 
 
}
<html> 
 
<head> 
 
    <title>Digital Ethics</title> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 
<body bgcolor="white"> 
 
    <div class="outer"> 
 
     <div class="nav"> 
 
      <div class="pic"><img src="logo.png" /><br><p><p></div> 
 
      <div class="nav-bar"> 
 
       <ul> 
 
        <li><a href="#">Home</a></li> 
 
        <li><a href="#">About Us</a></li> 
 
        <li><a href="#">Contact Us</a></li> 
 
        <li><a href="#">Services</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
     <div class="parent"> 
 
      <div class="bimg"></div> 
 
      <div> 
 
      <div></div> 
 
      <div></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

+0

這不適合你嗎? –

0

你應該機頂盒,左右你的資產淨值的,那麼你就可以改變你的父母的margin-top(移動。 bimg DIV我想)保持你的NAV固定頂部。

CSS

.nav { 
    height: 180px; 
    display: inline-block; 
    background-color: white; 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
} 

Here a working fiddle

P.S:你有一個錯字在你的CSS定義.outer

寬度:100%像素;