2017-05-08 31 views
1

私はその中にロゴ付きのnavbarを作成しようとしています。私は基本的には、navbarが動作しているが、ページコンテンツのヘッダーもnavbarに強制されています。ここでenter image description hereヘッダーと干渉するNavbar HTML/CSS

は、ここに私のHTMLと完全なソースのための私のウェブサイトへのリンクと閲覧(http://frankkreutzer.com/

 <header class="section"> 
     <a id="logo" href="http://frankkreutzer.com"><img src="images/logo.png" width="75" height="75"></a> 
     <nav> 
      <ul> 
       <li><a href="http://frankkreutzer.com" id="current">Home</a></li> 
       <li><a href="http://frankkreutzer.com/it-130/assignment-3/assignment3.html" target="_blank">IT 130</a></li> 
       <li><a href="http://frankkreutzer.com/csgo/csgo-home.html" target="_blank">CS:GO Project</a></li> 
       <li><a href="http://frankkreutzer.com/cth-247/index.html" target="_blank">CTH Final Project</a></li> 
       <li><a href="http://frankkreutzer.com/contact.html">Contact Me</a></li> 
      </ul> 
     </nav> 
    </header> 

である私のCSSのいくつかされています

header { 
top: 0; 
right: 0; 
left: 0; 
border-bottom: 1px solid #e3e3e8; 
} 

#logo { 
    float: left; 
    font-size: 3em; 
    margin: 0; 
    padding: .4em; 
    text-decoration: none; 
    color: #222222; 
    transition: .5s all; 
} 

nav { 
    float: right; 
} 

nav ul { 
    margin: 0; 
    padding: 2.8em 2em; 
} 

nav ul li { 
    display: inline; 
    padding: 0 .4em; 
} 

nav ul li a { 
    color: #222222; 
    text-decoration: none; 
    font-size: 20px; 
    padding-bottom: .5em; 
    transition: .5s color; 
} 

nav ul li a:hover { 
    border-bottom: 3px solid #222222; 
} 

#current { 
    color: #ff4629; 
    border-bottom: 3px solid #222222; 
} 
+2

'.content {クリア:両方;}' - よりここに:https://css-tricks.com/all-about-floats/#article-header-id-2 – sol

+1

使用しているので、 divのfloatプロパティ.content {clear:both}またはheader {width:100%;}を使用できます。 float:left;} –

+0

@ovokuro uhhh、どうしたらうまくいったのですか? – Frank

答えて

1

はヘッダにoverflowプロパティを追加します。

header{overflow: hidden;} 
関連する問題