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

position: relative;ラッパー内にフォームを絶対配置する DIV で画像をラップすることで、これを行うことができます。

top、bottom、rightおよびleftCSS プロパティにピクセル値を追加することで、フォームの位置を変更できます。top: 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;
}
.フォームホルダー {
    位置: 相対;
}

<center>また、この要素は HTML 4.01 では非推奨になっていることに注意してください。<section>必要に応じて、クラスまたは/<article>タグでDIV を使用する必要があります。

于 2013-10-29T10:51:14.943 に答える
0

1 つの 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 に答える