2017-12-12 24 views
1

コード:https://hastebin.com/otemiveduh.xmlHTMLとCSSのナビゲーション画像ホバリングとメインコンテンツ

問題の説明:されている2つの問題があることなどのpタグなどの他の要素は、セクションの下に追加されたときナビゲーションバーのそれはナビゲーションバーの下に隠されます。さらに、2番目のエラーは、イメージ全体をハイライト表示しても全体の高さの背景色が変わらないことと、別のセクションの他のコードを変更した場合、イメージの垂直方向の配置が失われることです。私はしばらくの間、このエラーを抱えていて、援助のためにコミュニティに向かわなければなりません。

<HTML> 
 

 
<Head> 
 
    <style> 
 
    body { 
 
     margin: 0; 
 
    } 
 
    
 
    div.Header {} 
 
    
 
    div.Navigation { 
 
     padding: 0; 
 
     margin: 0; 
 
     list-style: none; 
 
     line-height: 50px; 
 
     height: 50px; 
 
     width: 100%; 
 
     background-color: #001a33; 
 
     position: absolute; 
 
     overflow: hidden; 
 
     z-index: 2; 
 
     flex-direction: row; 
 
     display: flex; 
 
     align-items: center; 
 
     justify-content: space-around; 
 
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); 
 
    } 
 
    
 
    div.Navigation>a { 
 
     display: block; 
 
     flex-grow: 1; 
 
     text-align: center; 
 
    } 
 
    
 
    div.Navigation a img { 
 
     height: 22.1; 
 
     width: 44; 
 
     vertical-align: middle; 
 
    } 
 
    
 
    div.Navigation a:visited, 
 
    div.Navigation a:active, 
 
    div.Navigation a:link { 
 
     color: white; 
 
     text-decoration: none; 
 
    } 
 
    
 
    div.separator { 
 
     margin-left: 60%; 
 
    } 
 
    
 
    div.Navigation a:hover { 
 
     background-color: #000d1a; 
 
    } 
 
    </style> 
 
</Head> 
 

 
<Body> 
 
    <div class="Header"> 
 
    <div class="Navigation"> 
 
     <a href="#"><img src="icons/home-button.png" /></a> 
 
     <a href="#">Ongoing Projects</a> 
 
     <a href="#">Purchase Service</a> 
 

 
     <div class="separator"></div> 
 

 
     <a href="#">Employment</a> 
 
     <a href="#">Portfolio</a> 
 
     <a href="#">About</a> 
 

 
    </div> 
 
    </div> 
 

 
    <div class="Main"> 
 

 
    </div> 
 

 
    <div class="Footer"> 
 

 
    </div> 
 
</Body> 
 

 
</HTML>

答えて

0

あなたはナビゲーションの下に行くことなく、コンテンツを追加できるようにするために、メインのコンテンツにパディングを追加する必要があるので、あなたは、ナビゲーション上の絶対位置を使用しています。また、ナビゲーションの両方の部分を分離するための無駄な要素があります。代わりにmargin-left:autoをそのまま使用することができます。また、画像の高さ/幅で単位が不足している

body { 
 
    margin: 0; 
 
} 
 

 
div.Navigation { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    line-height: 50px; 
 
    height: 50px; 
 
    width: 100%; 
 
    background-color: #001a33; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    z-index: 2; 
 
    flex-direction: row; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-around; 
 
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); 
 
} 
 

 
div.Navigation>a { 
 
    display: block; 
 
    text-align: center; 
 
    padding:0 10px; 
 
} 
 

 
div.Navigation>a:nth-child(4) { 
 
    margin-left: auto; 
 
} 
 

 
div.Navigation a img { 
 
    height: 22.1px; 
 
    width: 44px; 
 
    vertical-align: middle; 
 
} 
 

 
div.Navigation a:visited, 
 
div.Navigation a:active, 
 
div.Navigation a:link { 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 

 
div.Navigation a:hover { 
 
    background-color: #000d1a; 
 
} 
 

 
.Main { 
 
    padding-top:55px; 
 
}
<div class="Header"> 
 
    <div class="Navigation"> 
 
    <a href="#"><img src="https://lorempixel.com/100/100/" /></a> 
 
    <a href="#">Ongoing Projects</a> 
 
    <a href="#">Purchase Service</a> 
 
    <a href="#">Employment</a> 
 
    <a href="#">Portfolio</a> 
 
    <a href="#">About</a> 
 

 
    </div> 
 
</div> 
 

 
<div class="Main"> 
 
    <p>Content</p> 
 
</div> 
 

 
<div class="Footer"> 
 

 
</div>

+0

は、DOMを固定の面でご協力いただきありがとうございます。私が行っているように私は学んでいるが、あなたがホームアイコン/画像の上にいつホバーするかという問題。それは50全体をカバーするのではなく、アイコンの高さの背景色を変更するだけです(22.1) –

+0

@IsaacOdeyale私はあなたを得ていませんでした。 –

+0

ナビゲーションバーの各項目の上にマウスを置くと、拡大/縮小することはできません。それは完全に高められますが、マウスではそれはしません。 –

関連する問題