導航菜單覆蓋主要網站內容

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

<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%; 
}

請幫幫忙，在此先感謝。

來源

2016-07-29 Apurva Nagar

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

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

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

來源

2016-07-29 10:40:01

-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>

來源

2016-07-29 10:43:49

這不適合你嗎？ –

你應該機頂盒，左右你的資產淨值的，那麼你就可以改變你的父母的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％像素;

來源

2016-07-29 10:53:17 Luca

導航菜單覆蓋主要網站內容

回答

相關問題