Position input text form and submit button over an image

Question

Am trying to add and position an input text form and submit button on top of an image (not over a background image, the commentpaper.jpg) and having a lot of difficulty. This is what I have so far in my html page.

Am new to Html and Css so the simplest way possible would be sweet! Thanks for your help in advance.

<!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>

You need to show us your CSS. Also, what is an img doing in your document's head? — James Donnelly
– James Donnelly, Commented Oct 29, 2013 at 10:37

AfromanJ · Accepted Answer · 2013-10-29 10:59:52Z

1

You can do it by wrapping the image in a DIV that has position: relative; and absolute positioning the form within the wrapper:

You can change the position of the form by adding pixel values to top, bottom, right and left CSS properties e.g. top: 50px;

Please refer to the 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:

form {
    position: absolute;
    top: 0;
}
.form-holder {
    position: relative; 
}

Also note that the <center> element is deprecated in HTML 4.01. You should use a DIV with a class or the <section> / <article> tags where appropriate.

edited Oct 29, 2013 at 10:59

answered Oct 29, 2013 at 10:51

AfromanJ

3,9323 gold badges20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Josephine O'Brien Over a year ago

thanks for your help and will take note about the <center> tags!

ColoO · Accepted Answer · 2013-10-29 10:52:58Z

0

Add one 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 : i put an absolute position on the div (form)

#absolute {
 position: absolute;
top: 50px;
left: 50%;
margin-left:-250px;
width: 500px; 
}

edited Oct 29, 2013 at 10:52

answered Oct 29, 2013 at 10:47

ColoO

8335 silver badges14 bronze badges

Collectives™ on Stack Overflow

Position input text form and submit button over an image

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related