Titre continue de passer dans la barre de navigation (Bootstrap)

J'ai une barre de navigation, et j'ai du texte va devant l'image directement au-dessous de la barre de navigation au-dessus.Cette image est sensible, donc elle varie en fonction de la taille de l'écran. Cependant, quand j'ajuste l'écran à sa plus petite taille (c'est-à-dire à la taille qu'il aurait si c'était sur un appareil mobile), l'image reste à un endroit, mais le texte qui serait normalement fixé devant l'image pousse vers le haut, derrière la barre de navigation. Pouvez-vous s'il vous plaît aider à expliquer pourquoi c'est? Voici mon code.Titre continue de passer dans la barre de navigation (Bootstrap)

HTML

<header> 
    <!--Navigation Secton--> 
    <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="#"> Anna's Portfolio</a> 
      </div> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="active"><a href="#"> About</a></li>  
       <li><a href="#">Works</a></li> 
       <li><a href="#">Talk To Me</a></li>   
      </ul> 
     </div> 
    </nav> 
</header> 
<body> 
    <!-- Top Image, Title Text--> 
    <div class="container-fluid"> 
     <div class="row"> 
      <img class="image img img-responsive" src="http://www.qerja.com/journal/wp-content/uploads/CODING.jpg"> 
      <div class="text"> 
       <h1>Anna's Portfolio</h1> 
      <h2>Come Inside.</h2> 
      </div> 
     </div> 
    </div> 

    <!--About, Mission--> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="about"> 
       <h2>About Me</h2> 
       <p>My name is Anna Gibson and I'm a web developer<br> who seeks to tell the stories of the marginalized.<br> I'm a staunch advocate for those who struggle with<br> their mental health and I hope that I can create apps<br> that will help people with their mental health as apps<br> have helped me. </p> 
      </div> 
     </div> 
    </div> 
</body> 
<footer></footer> 
</html>

CSS

.navbar-brand { 
    position:relative; 
    bottom:70px; 
    text-align:right; 
} 

.image { 
    position:relative; 
    width:100%; 
    padding-top:0; 
    height:200px; 
} 

.text { 
    text-align:center; 
    position:relative; 
    bottom:400px; 
    color:white; 
    font-family:; 
    font-size:24px;  
}

Merci beaucoup, si quelque chose ne sait pas, laissez-moi savoir.

Source

2017-07-18 Anna Gibson

Le texte appuie derrière la barre de navigation à cause du fond: 400px; question sur .text classe

vous avez besoin HTML et CSS Corrections

HTML

<header> 
<!--Navigation Secton--> 
    <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#">Anna Portfolio</a> 
      </div> 
      <div class="collapse navbar-collapse" id="myNavbar"> 
       <ul class="nav navbar-nav navbar-right"> 
       <li class="active"><a href="#"> About</a></li>  
       <li><a href="#">Works</a></li> 
       <li><a href="#">Talk To Me</a></li>   
       </ul> 
      </div> 
     </div> 
    </nav> 
</header> 
<body> 
    <!-- Top Image, Title Text--> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="main-section"> 
       <img class="image img img-responsive" src="http://www.qerja.com/journal/wp-content/uploads/CODING.jpg"> 
       <div class="text"> 
        <h1>Anna's Portfolio</h1> 
        <h2>Come Inside.</h2> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!--About, Mission--> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="about"> 
       <h2>About Me</h2> 
       <p>My name is Anna Gibson and I'm a web developer<br> who seeks to tell the stories of the marginalized.<br> I'm a staunch advocate for those who struggle with<br> their mental health and I hope that I can create apps<br> that will help people with their mental health as apps<br> have helped me. </p> 
      </div> 
     </div> 
    </div> 
</body>

CSS

.navbar-brand { 
position:relative; 
bottom:70px; 
text-align:right; 
} 

.main-section{ 
    position: relative; 
} 

.image { 
    position:relative; 
    width:100%; 
    padding-top:0; 
    height:200px; 
} 

.text { 
text-align:center; 
position:absolute; 
color:white; 
font-family:; 
font-size:24px; 
left:0; 
right:0; 
top: 0; 
bottom: 0; 
margin:auto; 
}

Link for reference

Hope this helps ..

Source

2017-07-18 03:55:45

Titre continue de passer dans la barre de navigation (Bootstrap)

Répondre

Questions connexes