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 回答