# place email submit button on top of header



## ahhan (Oct 13, 2008)

I been trying to place an email subscription text field and button on top of my header image ala johnnycupcakes.com but with no luck. Can anyone please let me know how to do this.

I am using dreamweaver. I have the header image inside a table which is centralize but have no idea how to place the text field and sign up button on top of it. Could it be AP Div?

Regards,
Ahhan


----------



## spiros_saf (Aug 25, 2009)

There are many ways to do what you ask.
Try creating an empty html page and pasting the following among the tags.


```
[TABLE][TR][TD]Enter E-mail:[/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]
```
In case you didn't make it you can view the example by clicking here.

I haven't applied any styling to the texts or the input boxes of the form in order to keep the example as simple as possible.

If you would like to I could show you some tips. You just have to ask


----------



## signchef (May 27, 2009)

what cutting blade do i want to use for cutting small text out of vinyl please help as i dont normaly do small text as i normal do sign for catering trailer please help please


----------



## dmfelder (Oct 25, 2008)

There are definitely many ways to do it, and a form is one of the easiest; however, even simpler is a quick hypertext link that generates an email:  mailto:[email protected]Email Us When a user clicks on "Email Us" is will generate an email.

For even more flexibility, just use this link which also contains a subject:  mailto:[email protected]?subject=Your Subject Line

If you'd like a detailed example of a form (that can nearly be copied and pasted), visit our internet shirt fulfillment site, [URL]http://greatapparelforyou.com/fulfillment_services.htm. Go to the contact us page, right-click your mouse, and "view source." You can see the code we used to generate a form that gathers relavant data and automatically sends it to us. In fact, there's even javascript code that forces someone to click a checkbox before submitting the information.

Best of luck![/URL]


----------



## ahhan (Oct 13, 2008)

Great! this is certainly helpful. Thanks.
Ahhan


----------



## spiros_saf (Aug 25, 2009)

If what you want is an "E-mail Us" _link_ and not a "Sign Up to our newsletter list" _form_ like johnnycupcakes you may easily replace the content of the inner <div> of my example with what dmfelder suggests.

However if what you want is to make a newsletter list you will definately need a script (php, asp etc.) that will add user's e-mail address to a database or just send you a simple e-mail containing the e-mail address provided by the user.

The second method is much easier than the first one and needs very little knowledge of a scripting language. In case you need an example help feel free to ask.


----------



## pukingdeserthobo (Jun 3, 2008)

signchef said:


> what cutting blade do i want to use for cutting small text out of vinyl please help as i dont normaly do small text as i normal do sign for catering trailer please help please


lol you are way of subject


----------



## ahhan (Oct 13, 2008)

Spoke too soon!... I still could not replicate how you(Spiros) build this. Not sure if you used DW, but I tried using table as a base, but could not figure out what type of div did you use to have it sitting inside the top row of the table. Can Mr. Safras Spiros please enlighten me on what are the steps in achieving these. 

Thanks, 
Ahhan


----------



## spiros_saf (Aug 25, 2009)

Ok, lets do it step by step.

Lets suppose we have a blank html page with the following code:


```
My example
```
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 tags.


```
My example



[TABLE][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]
```
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 , set it's width and height and also set a background image. Let's do it.


```

```
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 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 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 may be positioned "relatively" to another when the first is inside the second one.

And that's what we will do next. We will create another 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 will look like:


```
Enter E-mail:
```
As you can see, it's nothing more that a form wrapped in the tags.

Ok. Next step. Let's place the new inside the other. It should look something like this:


```
Enter E-mail:
```
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:


```
Enter E-mail:
```
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.


```
My example



[TABLE][TR][TD]Enter E-mail:[/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]
```
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!


----------



## ahhan (Oct 13, 2008)

Wow, thanks! I like the way you wrote the tutorial. Funny and entertaining!. 

What I have done is the first image would be my header, which is in the div. I have added another background image outside of the div. Everything work well in IE but in Firefox the bg image shifted once I resize the window. How can I fix this?

The additional code is:

body {
background-image: url(Image/bg.jpg);
background-position: center center;
margin-top: 0px;
margin-bottom: 0px;

Best Regards,
Ahhan


----------



## spiros_saf (Aug 25, 2009)

ahhan said:


> Wow, thanks! I like the way you wrote the tutorial. Funny and entertaining!.
> 
> What I have done is the first image would be my header, which is in the div. I have added another background image outside of the div. Everything work well in IE but in Firefox the bg image shifted once I resize the window. How can I fix this?


Well I hope you had the same fun reading it as I had writing it! 

What do you mean by "shifted"? 

Could you please copy/paste the code of your page or even better give a link of what you have done to have a look at?


----------



## ahhan (Oct 13, 2008)

Its still in WIP. It shifted horizontally. Basically the header image and the bg image need to align because they function as a base for text above them.

They look fine when the window the full screen but when I minimize the window the bg shifted horizontally(only with Firefox).

The code is:





Untitled Document






Enter E-mail: 


----------



## spiros_saf (Aug 25, 2009)

Ok, I see what the problem is.

Actually if you notice many websites that use the structure of your website face the same problem. 

Just take a look at johnnycupcakes.com and try to resize your window using Mozilla and IE. In Mozilla the background won't stay stable.

There is a workaround for this though. Just upload to imageshack or wherever you are able to do so the two photos you use as a background and as a header and give me a link of them. Tommorow (it's 1a.m. here) I will show you how to solve that problem.


----------



## ahhan (Oct 13, 2008)

That's exactly what I meant. Ok in IE but in Mozilla, the bg shifted...:-(. Please follow the link below to the images, thanks!

Ahhan

[media]http://img196.imageshack.us/img196/4535/headercoa.gif[/media]
[media]http://img38.imageshack.us/img38/5789/footerirb.gif[/media]
[media]http://img42.imageshack.us/img42/7057/44839790.jpg[/media]


----------



## spiros_saf (Aug 25, 2009)

Goodmorning!!!

You are ready!

Take a look at the example by clicking here

Here is the code:


```
My Example



[TABLE][TR][TD]Enter E-mail:[/TD][/TR][TR][TD][TABLE][/TD][/TR][TR][TD]


    Here you may put your website's content!!



[/TD][/TR][/TABLE]
[TR][TD][/TD][/TR][/TABLE]
```
I changed the middle photo with this one here

If you managed to follow the tutorial you can understand the code above. I didn't apply any styling to the letters so as to keep the example as simple as possible.

Well, you can now resize it, hit it, shoot it or do whatever you want with it.

Please let me know if it worked for you!
Have a nice day!


----------



## ahhan (Oct 13, 2008)

Yes! this is what I wanted. Thanks! I am surprised that the solution is so simple and straight to the point. I have been trying and searching for a solution for quite a while! I thought its going to be a long code to get the compatibility issue sorted. Again thanks Master!


----------



## spiros_saf (Aug 25, 2009)

Did you really think this was for free??

Well ahhan, you have to know that you owe me one Black Devil RYO tobacco and a Rizla Liquorice I consumed while trying to help you! 

Hahaha Just kiddin of course!

You are welcome!
Best whishes for your attempt!

PS: Kids don's start smoking. Not because it's bad but because next step is usually programming which is even worse!!


----------



## ahhan (Oct 13, 2008)

funny as ever! cheers...


----------



## ahhan (Oct 13, 2008)

Dear Mr. Spiros,

I am not sure if you are willing to help me again but knowing my thick skin, I guessed I give you a try. It is actually the same problem with IE and Mozilla issue.

I have notice that once I position the div containing the input box and submit button on a required position, it looks fine in IE but when I view it in Mozilla, it have shifted quite a bit. I plan to use the same div to place all the text links on top of the header but with the shift on Mozilla it looks weird.

Thanks,
Ahhan


----------



## spiros_saf (Aug 25, 2009)

Dear ahan,

First of all sorry for taking me so long to answer you but I was at Thessaloniki the past two days! (Which I strongly recommend all of you to visit! Definately the most beautiful city of Greece!)

But now I am back to Athens! So, lets see what I can do to help you!

Take a look at the following code:


```
Enter E-mail: <input type="text" name="email" /><input type="submit" value="Send" />
```
If you add it as it is inside an html page you will see the followin:

(The first is a screenshot from Mozilla and the other from IE)









Please notice the difference between the input boxes and the difference between the submit buttons.

Difference in size of the input boxes:










Difference in size of the submit buttons:









The reason you see these differences is because every web-browser "translates" differently the code you write. In order to prevent such thing from happening CSS has been invented.

Now try to use the following code instead of the one we used before:


```
Enter E-mail: <input style="width:100px" type="text" name="email" /><input style="width:60px" type="submit" value="Send" />
```
This is what you will see:










What we have done is this. By adding (style="width:100px") and (style="width:60px") to the code of each of the two elements we define to the browser (Mozilla, IE, Safari etc.) the EXACT width and height we would like our elements to have.

This is an example of using Inline Styles. In order to prevent such things from happening again you should consider taking a look at a CSS tutorial.


----------



## ahhan (Oct 13, 2008)

Dear Mr. Spiros,

Welcome back and thanks for your explanation. I really need to go through the CSS to get this down. Again, thanks for everything.

Regards,
Ahhan


----------

