1

画面を覆う大きな画像のウェブサイトがあります。その画像には、いくつかのDIV（テキスト、フォーム、画像）があります（図2を参照）。大きな画像コンテナは、ウィンドウサイズに関係なく、常に画像の中央を表示するように作成されているため、ウィンドウを小さくしても、中央が表示されたままになります。

問題は、ウィンドウサイズを縮小すると、DIVが崩壊することです（図3を参照）。

写真2は、それがどのように見えるかを示しています。

#div1 {
  width:25%;
  left: 32%;
  top:7.5%;
  position: relative;
  float:left;   
  }

#div2 {
  position:relative;
  left:37.5%;
  clear:both;
  width:14%;
  height:20%;
  }


    #div2 h2 {
      width:10%;
      left:15%;
      margin-top:11%;
      position: relative;
      float: left;
      }

#div3 {
  left: 64.4%;
  top:-2.5%;
  width:111px;
  position: relative;
  }


#div4{
  left: 93%;
  top:-18.0%;
  width:111px;
  position: relative;
}

そしてHTML：

<body>

    <div id="wrapper"\>

        <div id="div1">
            <h1>Seite nicht gefunden!</h1>
        </div>

        <h2>Bug melden</h2>

        <div id="div2">


            <form>
                  <label>Titel</label>
                  <input type="text" id="form_title" name="title" placeholder="Ich will einen Bug melden!" required>

                  <label>URL</label>
                  <input type="url" id="form_url" name="URL" placeholder="###" >

                  <label>Beschreibung</label>
                  <textarea type="text" id="form_whathappened" name="happened" placeholder="Was ist passiert?" required></textarea>

                  <input type="submit" value="Absenden" /> 
            </form>
        </div>

        <div id="div3">
            <a href="http://www.###.de" target="new"><img src="logo.png" alt="Logo" /></a>
        </div>

        <div id="div4">
            <a href="http://www.###.de" target="new"><p>Jetzt<br/ >Tester<br />werden!<br /></p></a>
        </div>



    </div>



</body>

私が間違っていることを手伝ってくれませんか。事前にどうもありがとうございました！

クリストフ

フルウィンドウサイズ

ウィンドウのサイズを変更した後の外観は次のようになります

代わりにそのように見えます

4

1 に答える 1

1

これはおそらく完璧には程遠いですが、試してみる価値はあります。

HTML コード:

<head>
<meta charset="utf-8">
<title>404</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
    <div id="error">
                <h1>Seite nicht gefunden!</h1>
            </div>
            <form id="form">
                        <h2>Bug melden</h2>
                        <label>Titel</label>
                        <input type="text" id="form_title" name="title" placeholder="Ich will einen Bug melden!" required>

                        <label>URL</label>
                        <input type="url" id="form_url" name="URL" placeholder="http://www.###/???" >

                        <label>Beschreibung</label>
                        <textarea type="text" id="form_whathappened" name="happened" placeholder="Was ist passiert?" required></textarea>

                        <input type="submit" value="Absenden" /> 
            </form>
 ... //other code goes here</div>

これは、css コードの編集されたセクションです。

#wrapper { width: 640px; height: auto; margin: 0 auto; }
#error { font-size: 120%; margin: 65px 0 0 60px; float:left; }
#error h1 { font-size: 150%; text-align:center; }
#form { margin: 15px 86px; width:260px; height: 40%; float: left; background: green; }

ここで実際の例を確認してください：例

それが最初に役立つことを願っています。

于 2012-11-16T17:23:54.250 に答える