Navigationsmenü, das den Inhalt der Hauptseite abdeckt

Das Navigationsmenü meiner Webseite deckt den Hauptinhalt/Inhalt der Seite ab (Zeug im Elternteil). Wenn ich der Navigationsleiste oder dem übergeordneten Element einen Rand hinzufüge, wird die Navigationsleiste zusammen mit dem Bild/Inhalt im übergeordneten Element nach unten verschoben. Unten ist der Code:Navigationsmenü, das den Inhalt der Hauptseite abdeckt

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

Bitte helfen, Vielen Dank im Voraus.

Quelle

2016-07-29 Apurva Nagar

wo würden Sie Ihr nav sein? Feste Oberseite? – Luca

Dazu wird partical ansprechbar ...

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

Quelle

2016-07-29 10:40:01

-1

Remove Höhe von .parent Klasse. Sie müssen top: 0 zur nav-Klasse hinzufügen, um es auch oben zu beheben.

Dieses Arbeitsbeispiel ist hier ..

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>

Quelle

2016-07-29 10:43:49

Hat das nicht für Sie funktioniert? –

Sie sollten oben gesetzt, links und rechts des NAV, dann können Sie Ihre Eltern margin-top ändern (zu bewegen. bimg DIV Ich nehme an, dass du deinen NAV festhältst.

CSS

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

Here a working fiddle

P. S: Sie haben einen Tippfehler in Ihrem CSS .outer Definition

Breite: 100% px;

Quelle

2016-07-29 10:53:17 Luca

Navigationsmenü, das den Inhalt der Hauptseite abdeckt

Antwort

Verwandte Themen