画面の解像度に適応

-1

何らかの理由で私のウェブページがメイン画面に正しく表示されますが、それは2番目のモニタに表示されます。メインスクリーン解像度：1440x900、2番目の画面解像度：1280x800画面の解像度に適応

EDIT：どうすればサイドクロールが消えますか？

EDIT：固定SIDESCROLL

スクリーン：

メイン画面：

main screen

二次スクリーニング：

secondary screen

html{   
 
} 
 
body {width:90%;margin:auto;min-width:600px;max-width:2000px}  
 

 
#left, #right, #middle { 
 
    position: fixed; 
 
    width: 50%; 
 
    height: 100%; 
 
    top: 0 
 
      margin-left:auto; 
 
margin-right:auto; 
 
} 
 

 
#middle { 
 
    background-color: red; 
 
right: 500px; 
 
    left: 400px; 
 
    width: 45%; 
 
margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
#left { 
 
    background-color: black; 
 
    right: 880px; 
 
    margin-left:auto; 
 
margin-right:auto; 
 
    width: 80%; 
 
} 
 
#right { 
 
    background-color: black; 
 
    left: 880px; 
 
    margin-left:auto; 
 
margin-right:auto; 
 
    width: 80%; 
 
} 
 
#container { 
 
    background: #fff; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    position: relative 
 
     margin-left:auto; 
 
margin-right:auto; 
 
    width: 80%; 
 
    } 
 

 
body { 
 
    font-family: "Comic Sans MS"; 
 
} 
 

 
h4{ 
 
    font-size: 20pt; 
 
} 
 
em{ 
 
    font-weight: bold; 
 
    color:darkslategrey; 
 
} 
 

 
em1{ 
 
    font-weight: bold; 
 
    color:darkslategrey; 
 
} 
 

 
#mijngegevens { 
 
    
 
    top: 50px; 
 
     left: 420px; 
 
     width: 700px; 
 
     height: 400px; 
 
     position: absolute; 
 
    margin-left:auto; 
 
margin-right:auto; 
 
width:80%; 
 
} 
 

 
#joeyvideo { 
 
top: 350px; 
 
    left: 420px; 
 
    height: auto; 
 
    position: absolute; 
 
    
 
    border-style: double; 
 
    border-width: thick; 
 
    border-color: black; 
 
    margin-left:auto; 
 
margin-right:auto;  
 
} 
 

 
#gmaps { 
 
    top: 700px; 
 
    left: 420px; 
 
    position: absolute; 
 
    margin-left:auto; 
 
margin-right:auto; 
 
    width: 80%;   
 
}

<!DOCTYPE html> 
 

 
<html> 
 
    <head> 
 
     <link rel="stylesheet" href="style.css"> 
 
    <title>Joey Salads</title> 
 
    </head> 
 
    
 
    <body> 
 
     <div id="left"></div> 
 
     <div id="right"></div> 
 
     <div id="middle"></div> 
 
     <div id="container"></div> 
 
     <div id="mijngegevens"> 
 
     <h4>The best prankster on, youtube!</h4> 
 
     <p><a href="https://www.youtube.com/user/JoeySalads"><b><u><i>Subscribe</i></u></b></a></p> 
 
     <p><em>Name:</em>Sick prankster Afghanistan</p> 
 
     <p><em1>Adress:</em1><a href="https://www.google.nl/maps/place/Peachy+In+The+Secret+Hideout/@1.3041018,103.8581836,17z/data=!4m12!1m6!3m5!1s0x31da19b6c17eb7d1:0x2d021381dbf79a7b!2sPeachy+In+The+Secret+Hideout!8m2!3d1.3040964!4d103.8603723!3m4!1s0x31da19b6c17eb7d1:0x2d021381dbf79a7b!8m2!3d1.3040964!4d103.8603723?hl=nl" </a> Secret hideout</p> 
 
     
 
     </div>   
 
     
 
     <div id="gmaps"> 
 
     <iframe width="420" height="350" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyC8YwGwvlNWXGcf92JTE6ymhCMNHp5n4MI &q=Secret+Hide+Out+ng+Mga+Gadon,Angeles II, Valenzuela, National Capital Region, Philippines" allowfullscreen></iframe> 
 
     </div>   
 
     
 
     <div id="joeyvideo"><iframe width="420" height="315" src="https://www.youtube.com/embed/CHt7EBCgJnI" frameborder="0" allowfullscreen></iframe></div>    
 
    </body>  
 

 
</body1> 
 
</html>

編集：写真2

出典

2016-10-03 Karmalegend

あなたの問題は、あなたの中段右にオーバー行くためにどのように多くのピクセルにそれを言っているということです。コーディング方法は、あなたのウェブサイトを使用しているすべての人がメインモニターと同じ画面解像度を使用していない限り、正しく表示されることはありません。あなたの代わりに何をすべき

はrelative positioning、flexboxを使用するか、おそらく最も簡単ですし、フレンドリーほとんどのブラウザは、あなたが望むように物事を築くのに役立ちますbootstrapのようなフレームワークを使用することです。

も - 水平スクロールを削除すると、私はそれが完全に。消える相対的に位置決めしている場合、あなたの側のスクロール

出典

2016-10-03 16:52:47

を引き起こしている身体または何か他のCSSプロパティとしてoverflow-x: hiddenを言うのと同じくらい簡単ですか！ – Karmalegend

そうです...ここで述べたように（https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/）、これはすべての位置決め属性の中で最も混乱するオプションです。私はあなたが使用できるオプションなので、答えに入れます。個人的には、彼らが持っているブートストラップ・グリッド・システムを使うか、flexboxのアイデアを使用します。 –

敬意を表して私はそれをさらに理解します。私は、このコーディングのすべてに比較的新しいので、私の質問に心を打つ努力に感謝します。しかし、私は先生にブートストラップの考え方についての説明を求めます。 – Karmalegend

画面の解像度に適応

答えて

関連する問題