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