导航菜单覆盖主要网站内容

我网页的导航菜单覆盖了网站的主要内容/内容（父母内部的东西）。当我将边距添加到导航栏或父级时，导航栏会随父级图像/内容一起向下移动。下面是代码：导航菜单覆盖主要网站内容

<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

导航菜单覆盖主要网站内容

回答

相关问题