0

我正在尝试在图像顶部添加和定位输入文本表单和提交按钮（而不是背景图像，commentpaper.jpg），并且遇到了很多困难。到目前为止，这就是我的 html 页面中的内容。

我是 Html 和 Css 的新手，所以最简单的方法可能会很甜蜜！提前感谢您的帮助。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Have Your Say</title>
    <meta name="description" content="Have Your Say.">
    <meta name="keywords" content="Have Your Say, Comments">
    <link rel="stylesheet" href="style.css">
    <img src="commentpaper.jpg" alt="header" width="1050" height="600">
</head>
<body>
    <div id="wrapper">
        <div id="header">
    </div>
    <div id="nava">
        <ul id="navlist">
            <li><a href="Index.html">Home</a></li> 
            <li><a href="Quiz.html">Weird Stuff</a></li>
            <li><a href="Comments.html">Have Your Say</a></li>
        </ul>
    </div>
    <center>
        <form action="" method="GET">
            <textarea name="comments" rows="10" wrap="hard"></textarea>
            <input name="redirect" type="hidden" value="index.html">
            <input name="next_url" type="hidden" value="index.html">
            <br>
            <input type="submit" value="Send">
            <input type="reset" value="Clear">
        </form>
    </center>
</body>
</html>
4

2 回答 2

1

您可以通过将图像包装在一个 DIV 中来做到这一点，该 DIV 具有position: relative;并在包装器中绝对定位表单：

您可以通过将像素值添加到 、 和 CSS 属性来更改表单top的位置，bottom例如rightlefttop: 50px;

请参考JsFiddle。

HTML：

<div id="wrapper">
    <div id="header">
</div>
<div id="nava">
    <ul id="navlist">
        <li><a href="Index.html">Home</a></li> 
        <li><a href="Quiz.html">Weird Stuff</a></li>
        <li><a href="Comments.html">Have Your Say</a></li>
    </ul>
</div>
<div class="form-holder">
    <img src="commentpaper.jpg" alt="header" width="1050" height="600">
    <form action="" method="GET">
        <textarea name="comments" rows="10" wrap="hard"></textarea>
        <input name="redirect" type="hidden" value="index.html">
        <input name="next_url" type="hidden" value="index.html">
        <br>
        <input type="submit" value="Send">
        <input type="reset" value="Clear">
    </form>
</div>

CSS：

形式 {
    位置：绝对；
    顶部：0；
}
.form-holder {
    位置：相对；
}

另请注意，该<center>元素在 HTML 4.01 中已弃用。您应该在适当的地方使用带有类或<section>/<article>标记的 DIV。

于 2013-10-29T10:51:14.943 回答
0

添加一个 div ：

<div id="absolute">
    <center><form>
    <textarea name="comments" rows="10" wrap="hard">
            </textarea>
            <input name="redirect" type="hidden" value="index.html">
            <input name="next_url" type="hidden" value="index.html">
            <br>
            <input type="submit" value="Send">
            <input type="reset" value="Clear">
            </form>
  </center>
  </div>

CSS：我在 div （表单）上放置了一个绝对位置

#absolute {
 position: absolute;
top: 50px;
left: 50%;
margin-left:-250px;
width: 500px; 
}
于 2013-10-29T10:47:11.747 回答