2017-05-03 2 views
0

navbarとページの残りの部分にはギャップがあるようです。私はそれを取り除こうと努力していますが、無駄です。マージンなどを調整しようとしました。この質問を投稿するために詳細を記入することを依頼し続けています。私はすでに持っているよりも詳細を与える方法はわかりません。navbarとindexとの間にギャップがあると思われます。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Josh Adams</title> 
    <%= csrf_meta_tags %> 

    <%= stylesheet_link_tag 'application', media: 'all', 'data- turbolinks-track': 'reload' %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track':  'reload' %> 
    </head> 

    <body> 

    <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
     </button> 
     <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> 
     <a class="navbar-brand" href="#">Josh Adams</a> 
     <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> 
      <li class="nav-item active"> 
      <a class="nav-link" href="#">Resume <span class="sr-only">(current)</span></a> 
      </li> 
      <li class="nav-item"> 
      <a class="nav-link" href="#">Links</a> 
      </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="nav-item"> 
      <a class="nav-link" href="#">Contact</a> 
      </li> 
     </ul> 
     </div> 
    </nav> 
    <div class="index" id="index-page"> 
    <div class="headline">About me</div> 
    <hr> 

    <div class="media col-8 offset-2"> 
     <span class="media-left"> 
     <%= image_tag("profilephoto.jpg") %> 
     </span> 
     <div class="media-body"> 
     <h2 class="media-heading">Joshua Adams:</h2> 
     <h3 class=about-body> 

     </h3> 
     </div> 
    </div> 
    </div> 
    </body> 
</html> 

@import "bootstrap"; 

#index-page { 
    background: image_url('indexbackground.jpg'); 
    margin-top: 0px; 
} 
h1 { 
    color: white; 
} 

.media { 
    margin-top: 50px; 
} 

.headline { 
    font-size: 80pt; 
    text-align: center; 
    color: white; 
    margin-top: 50px; 
    font-family: 'chunkfiveroman'; 
} 

hr { 
    width: 75%; 
    color: black; 
    height: 2px; 
    background-color: white; 
    margin-top: 0px; 
    padding-top: 0px; 
} 
.media-heading { 
    margin-left: 25px; 
    color: white; 

} 
.navbar { 
    margin-bottom: 0; 
} 
#index-page { 
    margin-top: 0px; 
} 
.index { 
    margin-top: 0px; 
    height: 800px; 
} 
+0

罰金になります、それは[、最小限の完全かつ検証可能な例]を意味します(https://stackoverflow.com/help/mcve)ので、人々があなたを助けることができます。あなたはマージン等を調整したと言いましたが、ヘッドラインのマージンはまだそこにあるはずですか? – ash

答えて

0

それはあなたの.headlineクラスである:margin-top: 50px;それを削除し、それをより詳細

+0

ありがとう、私はそれを取得して終了しました。 Webデザインのコーディングには使用されません – ender554

関連する問題