Ok, lets do it step by step.
Lets suppose we have a blank html page with the following code:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My example</title>
</head>
<body>
</body>
</html>
As you can see it's nothing more than a blank html page.
Now lets add a simple table and place it in the center of our page. We will do it by adding the following code between the <body> tags.
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My example</title>
</head>
<body>
<table align="center" bgcolor="#999999" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>My header will be here</td>
</tr>
<tr>
<td>Your Content Here</td>
</tr>
<tr>
<td>..and here..</td>
</tr>
<tr>
<td>..and here..</td>
</tr>
<tr>
<td>..and here..</td>
</tr>
</table>
</body>
</html>
Since our webpage's background is white we set the color of the table to be #999999. We also centered the table in the page.
Now lets see. We have a webpage. Our webpage's content will be put in a table. The table will be in the center of the page and the first row of that table will be our header.
So let's focus on the code that will be on our header.
But first of all let's think of what we need to do. We want a photo (the header image/graphic) and inside that photo we want to add some elements (text, input box, submit button).
Ok. What we will do is create a <div>, set it's width and height and also set a background image. Let's do it.
HTML Code:
<div style="height:300px; width:600px; background-image:url(http://img269.imageshack.us/img269/4738/backuvn.gif)">
</div>
Think of that little div as some kind of a box.
We havent placed any content to it yet but we have set some of it's properties.
Width and height are pretty much self explained.
Now, what about the background? Isn't it some kind of content?
Well, we may be able to see it appearing inside of our "box" but think of it as being on a very low level that will let other stuff be put inside it. Let's say that it may be viewable but it doesn't really exist.
We like that aspect because since it doesn't really exist we may put anything else we like inside that little box, which in our case is the 'Sign Up to our newsletter list" kind of form.
Let's make a plan on how we will move. Will we just write the code of our form inside that <div> we created earlier?
No. And that's because if we do that our form will appear on the upper left corner of our header and that's not what we want. We want to "position" it on the down-right corner of our header.
As you guessed "position" is the magic word. Our sweet little "boxes" (the <div> elements) apart from the properties of width, height and background also have a group of proterties that's used in order to position them.
Please also note that one <div> may be positioned "relatively" to another <div> when the first <div> is inside the second one.
And that's what we will do next. We will create another <div> that will contain the code of our form. Next we will place the new div inside the first one we created in this tutorial and "position" it as we like.
So, let's see what the code of the new <div> will look like:
HTML Code:
<div>
<form action="form.php" enctype="multipart/form-data" method="post">Enter E-mail: <input type="text" name="email" /><input type="submit" value="Send" /></form>
</div>
As you can see, it's nothing more that a form wrapped in the <div> tags.
Ok. Next step. Let's place the new <div> inside the other. It should look something like this:
HTML Code:
<div style="height:300px; width:600px; background-image:url(http://img269.imageshack.us/img269/4738/backuvn.gif)">
<div>
<form action="form.php" enctype="multipart/form-data" method="post">Enter E-mail: <input type="text" name="email" /><input type="submit" value="Send" /></form>
</div>
</div>
Ok! So are we done? Can I go and rule the world with my super-header now?
NO! Did I mention anything about the positioning properties of those two divs? Sit down we are not finished yet
But we are close.
Now we have to set the position properties of our outer and inner divs.
What we will add to the properties of our outer-div is this "position:relative"
What we will add to the properties of our inner-div is this "position:absolute; top:270px; left:300px"
Our code will look something like this:
HTML Code:
<div style="height:300px; width:600px; background-image:url(http://img269.imageshack.us/img269/4738/backuvn.gif); position:relative">
<div style="position:absolute; top:270px; left:300px">
<form action="form.php" enctype="multipart/form-data" method="post">Enter E-mail: <input type="text" name="email" /><input type="submit" value="Send" /></form>
</div>
</div>
Ok now. Plain english please?
What we have done is this. Most of you since you are at the t-shirt manufactiring business have used at least once in your life a graphics program like photoshop, fireworks, corel, illustrator etc. So you are familiar with the idea of positioning an element to a space using the x and y axis. Here we have set the x (property: left) of the inner div (this is our form) to be 300px and the y (property: top) of the inner div to be 270px.
And by the property position of our outer div which we set as "relative" and the property position of the inner div which we set as "absolute" what we have achieved is this. We have set the (0,0) point of our x and y axis to be the upper left corner of our outer div.
By changing the "top" and "left" properties of the inner-div obviously we can move it as we like.
Now let's add this code to our webpage and see what we have done.
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My example</title>
</head>
<body>
<table align="center" bgcolor="#999999" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div style="height:300px; width:600px; background-image:url(http://img269.imageshack.us/img269/4738/backuvn.gif); position:relative">
<div style="position:absolute; top:270px; left:300px">
<form action="form.php" enctype="multipart/form-data" method="post">Enter E-mail: <input type="text" name="email" /><input type="submit" value="Send" /></form>
</div>
</div>
</td>
</tr>
<tr>
<td>Your Content Here</td>
</tr>
<tr>
<td>..and here..</td>
</tr>
<tr>
<td>..and here..</td>
</tr>
<tr>
<td>..and here..</td>
</tr>
</table>
</body>
</html>
As mentioned on my previous post you can see the example by clicking
here.
Ok! It looks like we are ready! Don't forget that in order to make it work you must have a form.php file with a script that will handle the data recieved by the form. But it's not a PHP tutorial. This tutorial was intented to show you how to place an element inside a photo and I think that we are ok with that! In case you need any help with the PHP part feel free to ask.
Now go and rule the world with your high-tech super header!
place email submit button on top of header 
Re: place email submit button on top of header 
