Menu de navigation couvrant le contenu du site principal

Le menu de navigation de ma page Web couvre le contenu principal/contenu du site (choses à l'intérieur du parent). Lorsque j'ajoute une marge à la barre de navigation ou au parent, la barre de navigation se décale avec l'image/le contenu dans le parent. est sous le code:Menu de navigation couvrant le contenu du site principal

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

S'il vous plaît aider, Merci à l'avance.

Source

2016-07-29 Apurva Nagar

où voulez-vous être votre navigation? Haut fixe? – Luca

ceci est ajouté partical réactif ...

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

Source

2016-07-29 10:40:01

-1

hauteur Supprimer de .parent classe. Vous devez ajouter top: 0 à la classe nav pour le corriger également.

Ceci est l'exemple de travail ici ..

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>

Source

2016-07-29 10:43:49

Est-ce que cela n'a pas fonctionné pour vous? –

Vous devez définir haut, à gauche et à droite de la valeur liquidative, vous pouvez modifier votre parent margin-top (pour se déplacer. bimg DIV je suppose) garder votre NAV fixe-top.

CSS

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

Here a working fiddle

p.s: vous avez une faute de frappe dans la définition CSS .outer

largeur: 100% px;

Source

2016-07-29 10:53:17 Luca

Menu de navigation couvrant le contenu du site principal

Répondre

Questions connexes