css - ウィンドウのサイズ変更での Div のオーバーラップ

Question

ページのサイズが変更されたときに、ナビゲーション バーのリンクとヘッダーが動かないようにすることができません。すべてをラッパー div に入れようとしましたが、うまくいかないようです。どんな助けでも大歓迎です。

ページへのリンクは次のとおりです: http://www.public.asu.edu/~rmtorren/broadway.html

Answer 1

問題は、ナビゲーション リンクに絶対的な幅を与えていることです。したがって、ウィンドウが小さくなると、リンクは比例して縮小されません。パーセンテージを使用するか、メディア クエリを使用して異なる幅を設定することを検討してください。

問題の原因となっているスタイルは次のとおりです。

#navigation ul a:link {
padding: 5px 5px 15px;
margin-bottom: 2px;
display: block;
width: 100px;         /* CHANGE THIS */
text-decoration: none;
background-color: maroon;
color: #FFF;
}

メディア クエリの例は次のとおりです。

@media(max-width: 768px){
    #navigation ul a:link {
        width: 60px;
    }
}

上記は60 pixels、画面が下に縮小した場合にのみリンクを変更します768px