-2

デフォルトの解像度ではすべて正常に動作しています。ただし、別の解像度で Web サイトを実行すると、すべてが中央ではなく右に移動します。どうしてこれなの？オーバーフローを 0% に設定してみました。

HTML ファイルは次のとおりです。

<html>
    <head>
        <script type="text/javascript">
        </script>
        <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen"/>   
    <body>
        <div id="banner">
        <h2 id="bannertext"> Websites4u </h2>
        </div>

        <div id="buttonbar">
            <a id="homeb" href="webpageone.html">Home</a>
            <a id="aboutb" href="fake.html">About</a>
            <a id="contactb" href="webpage2.html">Contact Us!</a>

        </div>

        <div id="mainbody">

        <p id="radio">
        3gb:   <input type="radio" name="age" value ="<3gb"> <br> <br>
        4gb:   <input type="radio" name="age" value ="4gb"> <br> <br>
        8gb:   <input type="radio" name="age" value ="8gb"> <br> <br>
        16gb: <input type="radio" name="age" value ="16gb"> <br>
        </p>

        <h4 id="bodytext"> Please Select Your Hardware </h4>

        <h3 id="Ram"> Ram </h3>

        </div>
    </body>
</html>

CSSは次のとおりです。

  *{
        margin:0;
        padding:0;
    }

    h1 {
        color:blue;
    }
    body{
        width:1280px;
        height:720px;
        background-image:url("background colour.jpg");
        overflow:hidden;
    }
    #banner{
        position: relative;
        height: 50px;
        width: 148%;
        border: medium solid BFBDBA;
        background-color:F1C43E;
        margin:0 auto;
    }

    #bannertext{
        color:white;
        text-align:center;
        font-family:Comic Sans MS, cursive, sans-serif;
        margin:0 auto;
    }

    #buttonbar {
        position: relative;
        height: 30px;
        width: 148% ;
        border: medium solid BFBDBA;
        background-color:lightgrey;
        color:white;
        margin:0 auto;
        font-family:Comic Sans MS, cursive, sans-serif;
        font-style:bold;
    }
    #homeb {
        position: relative;
        left: 450px;
    }

    #aboutb{
        position: relative;
        left: 500px;
    }

    #contactb{
        position: relative;
        left: 550px;
    }

    a { 
        color: white; 
        font-weight:bold;
    }
    a:hover {
        COLOR: orange;
        font-weight:bold;
    }

    #bodytext{
        position: relative;
        top:50px;
        left:50px;
        color:red;
        font-size:35px;
        margin:0 auto;
        font-family:Comic Sans MS, cursive, sans-serif;
    }

    #mainbody{
        position: relative;
        background-color: white;
        height: 1000px;
        width: 80%;
        left: 30%;
        top: 5px;
        border:medium solid F1C43E;
    }

    #radio{
        position: absolute;
        top: 240px;
        left:100px;
        font-size: 18px;
        margin:0 auto;
    }

    #Ram{
        position: absolute;
        top: 176px;
        left: 100px;
        font-size: 30px;
        color: Green;
        margin:0 auto;
        font-family:Comic Sans MS, cursive, sans-serif;
    }
4

2 に答える 2

1

すべての問題を迅速に解決するのは困難です。あなたの基本的な間違いは、すべてのアイテムに絶対値があるということです。

例えば：

 body{
    width:1280px;
    height:720px;
    background-image:url("background colour.jpg");
    overflow:hidden;
 }

そこで幅が指定されているため、幅が小さい画面でコンテンツを開くと、コンテンツの幅は常に 1280px になり、overflow:hidden により、右側。あなたがコンピューターで何かをするとき、それはあなたが望んでいることではなく、あなたがコンピューターに求めたことを実行します。また、overflow:hidden は、必要に応じてコンテンツを中央に表示するのではなく、表示領域の外側にあるものをすべて非表示にするだけです。

#buttonbar の場合:

 #buttonbar {
    position: relative;
    height: 30px;
    width: 148% ;
    border: medium solid BFBDBA;
    background-color:lightgrey;
    color:white;
    margin:0 auto;
    font-family:Comic Sans MS, cursive, sans-serif;
    font-style:bold;
    }

- なぜwidth:148%ここに必要なのかさえわかりません。その中のボタンは、絶対位置で中央に配置されます。

#homeb {
    position: relative;
    left: 450px;    
}

left:450px はブラウザに厳密に伝えます: 親ブロック内の 450 番目のピクセルにこの #homeb を配置してください。そして、ブラウザはそのように行い、中央に配置したいので、もう少し左にシフトしません。すべてのボタンを中央に配置するように指示できます。

  #buttonbar {
        height: 30px;
        text-align:center;
        border: medium solid BFBDBA;
        background-color:lightgrey;
        color:white;
        margin:0 auto;
        font-family:Comic Sans MS, cursive, sans-serif;
        font-style:bold;
    }

テキスト揃え:中央; - これにより、ブラウザーはコンテンツを #buttonbar の幅に依存せずに中央に配置するようになり、#homeb、#aboutb、および #contactb のクラスを定義する必要がなくなります。

等々。直すところが多すぎる。私はあなたに出発点を与えました。これは、いくつかの変更が既に行われたデモです: http://jsfiddle.net/2rM6K/7/

何かを正しく動作させるには、コードの各行がブラウザーにとって何を意味するのかを理解する必要があります。何かがどのように機能するかを理解していない場合 - Web には多くの情報があり、人々はあなたを助ける準備ができています。コードを書いている間に何らかの魔法が起こるとは期待しないでください。物事がどのように機能するかを学ばなければなりません。読んで、試して、実験して、もう一度読んで、もう一度試して、何かがどのように機能するのかを理解し始めるまで、もう一度試してください。

于 2012-12-24T19:08:56.117 に答える
0 
page
{
Margin-right:auto;
margin-left:auto;
width:800px;
}

必要に応じて幅を変更できます。

于 2012-12-25T05:01:32.910 に答える