Thu, 2004-05-20 14:02
#1
Contact Box
A little more info would be nice? 
What do you mean by a contact box? :?:
Thu, 2004-05-20 14:15
#2
Contact Box
Searching, it has saved my life a couple of times:
Forms with layout
Form placing
Thu, 2004-05-20 14:18
#3
Contact Box
Ah one of those! 
Was thinking a bit too laterally! :roll:
Thu, 2004-05-20 14:47
#4
Contact Box
http://www.oasisbeverages.com/contact.html
I'm looking to be able to type in that box with the Island Oasis box. I have no clue to go about doing that.
Thu, 2004-05-20 14:55
#5
Contact Box
You need to set it to have the image as a background image. You can do this with the following.
You could drop the table altogether (for the background image) and use a div:
<div id="backg">...INSERT FORM CODE HERE!...</div>
And then use the following CSS:
div#backg
{
background: url(/images/contact.jpg) transparent no-repeat;
width: 500px;
height: 400px;
}
Thu, 2004-05-20 14:56
#6
Contact Box
make the box into a text area form element and give it a background image in the exact same way as the first link posted by ZB Rob.
Thu, 2004-05-20 15:00
#7
Contact Box
co2 wrote:
<div id="backg">...INSERT FORM CODE HERE!...</div>
What do you mean form code?
Thu, 2004-05-20 15:13
#8
Contact Box
Your form, <input> or <label>, whatever you use.
Thu, 2004-05-20 15:14
#9
Contact Box
try this full 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Untitled</title>
<style type="text/css" media="all">
/* <![CDATA[ */
div#backg
{
background: url(/images/contact.jpg) #ccc no-repeat;
width: 460px;
height: 360px;
padding: 20px;
border: 1px solid #369;
}
/* ]]> */
</style>
</head>
<body>
<div id="backg">
<form name="signup" id="signup" method="post" action="#">
<table>
<tr>
<td colspan="2"><label for="name">Name</label></td>
<td colspan="2"> <input type="text" name="name" id="name" tabindex="1" /></td>
</tr>
<tr>
<td colspan="2"><label for="address1">Address Line 1</label></td>
<td colspan="2"> <input type="text" name="address1" id="address2" tabindex="2" /></td>
</tr>
<tr>
<td colspan="2"><label for="address2">Address Line 2</label></td>
<td colspan="2"> <input type="text" name="address2" id="address2" tabindex="3" /></td>
</tr>
<tr>
<td colspan="2"><label for="city">City</label></td>
<td colspan="2"> <input type="text" name="city" id="city" tabindex="4" /></td>
</tr>
<tr>
<td><label for="state">State</label></td>
<td><select name="state" id="state" tabindex="5">
<option value="">-- Select ---</option>
<option value="AL" >Alabama</option>
<option value="AK" >Alaska</option>
</select></td>
<td><label for="zip">Zip</label></td>
<td> <input type="text" name="zip" id="zip" tabindex="6" /></td>
</tr>
<tr>
<td colspan="2"><label for="email">Email Address</label></td>
<td colspan="2"><input type="text" name="email" id="email" tabindex="7" /></td>
</tr>
<tr>
<td colspan="4"><input type="submit" name="Submit" value="Submit" tabindex="8" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Thu, 2004-05-20 15:23
#10
Contact Box
While I'm extremely appreciative, I'm also very stupid. I forgot to mention that I want comments to be written in that box CO2 has as the BG. If someone wants to tell us something they can type in the box to have it sent along with all the information.
Thu, 2004-05-20 15:28
#11
Contact Box
This should do the trick:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Untitled</title>
<style type="text/css" media="all">
/* <![CDATA[ */
div#backg
{
background: url(/images/contact.jpg) #ccc no-repeat;
width: 460px;
height: 360px;
padding: 20px;
border: 1px solid #369;
}
/* ]]> */
</style>
</head>
<body>
<div id="backg">
<form name="signup" id="signup" method="post" action="#">
<table>
<tr>
<td colspan="2"><label for="name">Name</label></td>
<td colspan="2"> <input type="text" name="name" id="name" tabindex="1" /></td>
</tr>
<tr>
<td colspan="2"><label for="address1">Address Line 1</label></td>
<td colspan="2"> <input type="text" name="address1" id="address2" tabindex="2" /></td>
</tr>
<tr>
<td colspan="2"><label for="address2">Address Line 2</label></td>
<td colspan="2"> <input type="text" name="address2" id="address2" tabindex="3" /></td>
</tr>
<tr>
<td colspan="2"><label for="city">City</label></td>
<td colspan="2"> <input type="text" name="city" id="city" tabindex="4" /></td>
</tr>
<tr>
<td><label for="state">State</label></td>
<td><select name="state" id="state" tabindex="5">
<option value="">-- Select ---</option>
<option value="AL" >Alabama</option>
<option value="AK" >Alaska</option>
</select></td>
<td><label for="zip">Zip</label></td>
<td> <input type="text" name="zip" id="zip" tabindex="6" /></td>
</tr>
<tr>
<td colspan="2"><label for="email">Email Address</label></td>
<td colspan="2"><input type="text" name="email" id="email" tabindex="7" /></td>
</tr>
<tr>
<td colspan="2">
Comments
<textarea id="comment" name="comment" rows="5" cols="30">
Type comment here...
</textarea>
</td>
</tr>
<tr>
<td colspan="4"><input type="submit" name="Submit" value="Submit" tabindex="8" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Thu, 2004-05-20 15:32
#12
Contact Box
How can I set the contact.jpg image to be the image of the comment box? Also, how can I make the comment box bigger, to fit the contact.jpg
Thu, 2004-05-20 15:40
#13
Contact Box
Ah right, now I get you... here's an example (CSS is in the HTML):
Thu, 2004-05-20 15:42
#14
Contact Box
YES!
Wewt to that!
Thu, 2004-05-20 15:43
#15
Contact Box
Thu, 2004-05-20 17:17
#16
Contact Box
Now how do I integrate that into my form?