2016-08-14 10 views
-2

私のタイトルコンテナの幅は960pxに設定されていますが、ナビゲーションバーのdivを妨害しています。上。私のタイトルコンテナdivの幅がナビゲーションdivと干渉しています

body, 
 
html { 
 
    height: 0 auto; 
 
    height: 100%; 
 
    margin: 0; 
 
    width: ; 
 
    padding: 0; 
 
    font-family: 'Ubuntu', sans-serif; 
 
    background-color: #34495e; 
 
} 
 
.container { 
 
    padding: 5px 5px 5px 5px; 
 
    position: relative; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    max-width: 2000px; 
 
    text-align: center; 
 
    background-color: #ecf0f1; 
 
} 
 
.h1 { 
 
    font-size: 30px; 
 
    text-align: center; 
 
} 
 
.sidebar { 
 
    overflow: hidden; 
 
    height: 100%; 
 
    display: inline-block; 
 
    position: fixed, 0px 0 0px 0px; 
 
    width: 200px; 
 
    padding: 5px; 
 
    background: #333; 
 
    z-index: 0; 
 
    text-decoration: none; 
 
} 
 
.sidebar li { 
 
    cursor: pointer; 
 
    padding-bottom: 5px; 
 
    text-decoration: none; 
 
    color: white; 
 
    list-style-type: none; 
 
}
<div class="container"> 
 
    <div class="content"> 
 
    <h1 class="h1">Nicholas Peppas</h1> 
 
    <hr color="black" width="260px"> 
 
    </div> 
 
</div> 
 

 
<div class="sidebar"> 
 
    <ul> 
 
    <li>Home</li> 
 
    <li>About Nick!</li> 
 
    <li>Services</li> 
 
    <li>Contact Nick!</li> 
 
    </ul> 
 
</div>

CodePen

+0

を必要とするものであることができますか? –

+0

'top:0;で' absolute'または 'fixed'を適用できます。左:0'をナビゲーションコンテナに追加します。 – Aziz

答えて

0

これはあなたが "タイルコンテナ" である何

.sidebar { 
 
    position: absolute; 
 
    top:0; 
 
    left:0; 
 
}

関連する問題