ブラウザのサイズ変更時にテキストが画面に表示されない

ブラウザのサイズが変更されたときにメニュー項目（黒いバーが上に表示される）を縮小して画面に表示する方法を教えてもらえますか？ブラウザのサイズ変更時にテキストが画面に表示されない

this pictureからわかるように、画像とメニューバーは画面が小さくなる代わりに切り取られますが、簡単に修正できますか？

CSS：

@import url('https://fonts.googleapis.com/css?family=Bree+Serif'); 

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    background-color: white; 
} 

.navigation { 
    width: 1280px; 
    height: 60px; 
    background-color: black; 
    position: absolute; 

} 

.menu { 
    display: inline-block; 
    color: white; 
    float: right; 
} 


#Rosa { 
    color: White; 
    font-family: Arial Black; 
    width: 100px; 
    height: 25px; 
    min-height: 5px; 
    padding: 2px; 
    border-bottom: 1px solid white; 
    border-top: 1px solid white; 
    overflow: hidden; 
    margin: 14px 1165px; 
    position: absolute; 

} 

#Martin { 
    color: White; 
    font-family: Arial Black; 
    width: 147px; 
    height: 25px; 
    padding: 2px; 
    border-bottom: 1px solid white; 
    border-top: 1px solid white; 
    overflow: hidden; 
    margin: 14px 995px; 
    position: absolute; 



} 

#Malcom { 
    color: white; 
    font-family: Arial Black; 
    width: 87px; 
    height: 25px; 
    padding: 2px; 
    border-bottom: 1px solid white; 
    border-top: 1px solid white; 
    overflow: hidden; 
    margin: 14px 885px; 
    position: absolute; 
} 

#Design { 
    color: white; 
    font-family: Arial Black; 
    width: 60px; 
    height: 25px; 
    padding: 2px; 
    border-bottom: 1px solid white; 
    border-top: 1px solid white; 
    overflow: hidden; 
    margin: 14px 800px; 
    position: absolute; 
} 

#BlackTitle { 
    color: white; 
    font-family: "Bree Serif", "serif"; 
    width: 380px; 
    height: 50px; 
    float: right; 
    font-size: 40px; 
    padding: 10px; 
    overflow: hidden; 
    margin: -8px 250px; 
    letter-spacing: 2px; 
    position: absolute; 
} 


.navigation a { 
    text-decoration: none; 
    color: black; 
} 

#Fist { 
    max-height: 3.77em; 
    float: left; 
    margin-right: 5px; 
    position:absolute; 
} 

#MPic { 
    width: 1280px; 
    height: 91%; 
    margin-top: 60px; 
    position: absolute; 
}

HTML：

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head> 
     <link href="stylesheet.css" type="text/css" rel="stylesheet"/> 

     <title>Black People in American</title> 

     <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

<meta name="viewport" content="width=device-width; initial-scale=1.0" /> 

    </head> 

    <body> 

     <div class="navigation"> 
      <a href="../Page2/Page2.HTML"><div class="menu" id="Rosa"> Rosa Parks </div></a> 
      <a href="../Page3/Page3.HTML"><div class="menu" id="Martin">Martin Luther Jr.</div></a> 
      <a href="../page4/Page4.html"><div class="menu" id="Malcom">Maclom X</div></a> 
      <div class="menu" id="Design">Design</div> 
      <div class="menu" id="BlackTitle"> Black History Site</div> 

      <a href="Website.html"> <img id="Fist" src="../Assets/Fist.png" alt="White Fist"/></a> 

     </div> 

     <img id="MPic" src="../Assets/Luther.jpg" alt="Martin Speaking to Crowd"/> 



    </body> 
</html>

すべてのヘルプは高く評価されて、ありがとうございました:)

出典

2017-04-16 ImperfectLion

あなたのコード[https://www.w3schools.com/howto/howto_js_topnav.asp]の主な問題は、マージンと配置の問題です。この例を試してみると、navbarについての知識が向上します –

問題は、あなたのCSSです。あなたはCodepen example with width in %

出典

2017-04-16 20:30:06

は私がやりたいことにすべての私のコンテンツをラップすることです... ..ピクセル単位ですべてのdivの幅を定義.navigation width:100%など...このような何かを与えるよう％に変更していdivを指定し、幅を画面サイズのパーセンテージとして設定します。あなたが背景の中、すべての周りのdivを作成し、呼び出した場合

だから、「ボックスにする必要がありますので、

#all-content { 
    width:90%; 
    margin:auto; 
}

その後、

すべてのコンテンツと同じように、スタイル次に<div id = "all-content"></div>

を言います"それは縮小し、画面サイズで拡大するので、画面の90％を占めます。それは私が少なくともそれをやる方法です。

出典

2017-04-16 20:35:14 rustinpeace91

ブラウザのサイズ変更時にテキストが画面に表示されない

答えて

関連する問題