2016-09-17 20 views
0
<body> 
    <div class="sts-viewport-fill"> 
     <nav role="navigation" class="nav navbar-default"> 
      <div class="container-fluid"> 
       <div class="navbar-header"> 
        <button data-toggle="collapse" data-target=".navbar-collapse" type="button" class="navbar-toggle"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <span class="navbar-brand">Knonet</span> 
       </div> 
       <div class="collapse navbar-collapse"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li><a href=#>Log In</a></li> 
         <li><a href=#>Sign Up</a></li> 
         <li><a href=#>Help</a></li> 
        </ul> 
       </div> 
      </div> 
     </nav> 
     <div class="container-fluid"> 
      <h1 class="text-center">CONNECT WITH EVERYONE.<br> 
       <small>Knonet aims to connect the whole world with the Internet.</small> 
      </h1> 
     </div> 
    </div> 
    <div class="container sts-second-slide"> 
     Salut, et Bonjour! 
    </div> 
</body> 

私のHTMLがあります。私はそうのようなCSSルールの束を適用した:テキストが表示されない

body { 
    font-family: 'Source Sans Pro', 'Segoe UI Light', sans-serif; 
    font-weight: initial; 
    font-weight: 100; 
} 

.sts-viewport-fill { 
    position: absolute; 
    top:0;right:0;bottom:0;left:0; 
    background-color: #000000; 
    color: #ffffff; 
} 

.sts-viewport-fill .container-fluid h1 { 
    margin: 250px auto 100px auto; 
    font-weight: 900; 
} 

.navbar-collapse, nav [type="button"] { 
    border: none !important; 
    border-radius: 0%; 
} 

.sts-second-slide { 
    margin-top: 100px; 
} 

は私に関する限り、これはdiv.sts-viewport-fillは、画面のビューポート全体に合うようになり、またはそれを残って、少なくとも何。

問題がありますか?そこにフランス語をみんな? Salut、et Bonjour!? ブラウザに表示されません。お守り:

enter image description here

誰かがここで1を何が起こっているのかを教えてもらえますか?私は本当に強い気持ちを持っています。これは、position: absolute;top:0;bottom:0;のルールと関係があります。

Merci d'Avance!

PS:color: #fff;属性を.sts-second-slideセレクタに適用しても、結果はまだ得られません。

+0

を試してみてください。 Tyに '.sts-second-slide {color:#ffffff; z-インデックス:1000; } 'それを前面に持ってきて白くする。 – C14L

答えて

2

あなたはその要素にpositionを追加する必要があります。

は、たぶん、その最初のdiv、またはその単なるテキストの色の後ろ

.sts-second-slide { 
    margin-top: 100px; 
    position: relative; 
} 
+0

ありがとう! * Merci * !!それは働いた... –

+0

あなたは大歓迎です:) – jakob

関連する問題