我有一个网站,其屏幕覆盖了很大的图片。在其图像中,有几个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>


您能帮我做错什么吗?提前非常感谢您!

克里斯多夫

最佳答案

这可能离完美还很远,但是值得尝试。

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; }


在此处检查工作示例:example

希望这会有所帮助。

10-05 20:39
查看更多