16 replies [Last post]
Rookie
Offline
Regular
Last seen: 18 years 1 week ago
Timezone: GMT-4
Joined: 2004-05-19
Posts: 13
Points: 0

Does anyone have any information on making a CSS contact box?

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 6 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Contact Box

A little more info would be nice? Wink

What do you mean by a contact box? :?:

The next sentence is true. The previous sentence is false. Discuss...

ZB-Rob
ZB-Rob's picture
Offline
Regular
Netherlands
Last seen: 18 years 1 week ago
Netherlands
Timezone: GMT+2
Joined: 2004-05-16
Posts: 32
Points: 0

Contact Box

Searching, it has saved my life a couple of times:
Forms with layout
Form placing

Zooibaai.nl

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 6 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Contact Box

Ah one of those! Laughing out loud

Was thinking a bit too laterally! :roll:

The next sentence is true. The previous sentence is false. Discuss...

Rookie
Offline
Regular
Last seen: 18 years 1 week ago
Timezone: GMT-4
Joined: 2004-05-19
Posts: 13
Points: 0

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.

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 6 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

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;
}

The next sentence is true. The previous sentence is false. Discuss...

rtm223
rtm223's picture
Offline
Enthusiast
Last seen: 18 years 1 week ago
Joined: 2004-05-18
Posts: 58
Points: 0

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.

css layout tutorials - in depth layout tutorials for all you newbies D maybe even some stuff for you not-so-new-bies out there P

Rookie
Offline
Regular
Last seen: 18 years 1 week ago
Timezone: GMT-4
Joined: 2004-05-19
Posts: 13
Points: 0

Contact Box

co2 wrote:
<div id="backg">...INSERT FORM CODE HERE!...</div>

What do you mean form code?

ZB-Rob
ZB-Rob's picture
Offline
Regular
Netherlands
Last seen: 18 years 1 week ago
Netherlands
Timezone: GMT+2
Joined: 2004-05-16
Posts: 32
Points: 0

Contact Box

Your form, <input> or <label>, whatever you use.

Zooibaai.nl

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 6 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

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>

The next sentence is true. The previous sentence is false. Discuss...

Rookie
Offline
Regular
Last seen: 18 years 1 week ago
Timezone: GMT-4
Joined: 2004-05-19
Posts: 13
Points: 0

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.

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 6 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

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>

The next sentence is true. The previous sentence is false. Discuss...

Rookie
Offline
Regular
Last seen: 18 years 1 week ago
Timezone: GMT-4
Joined: 2004-05-19
Posts: 13
Points: 0

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

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 6 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Contact Box

Ah right, now I get you... here's an example (CSS is in the HTML):

http://pub.c-o2.net/cssf/txtArea.htm

The next sentence is true. The previous sentence is false. Discuss...

Rookie
Offline
Regular
Last seen: 18 years 1 week ago
Timezone: GMT-4
Joined: 2004-05-19
Posts: 13
Points: 0

Contact Box

YES!

Wewt to that!

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 6 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Contact Box

Laughing out loud

The next sentence is true. The previous sentence is false. Discuss...

Rookie
Offline
Regular
Last seen: 18 years 1 week ago
Timezone: GMT-4
Joined: 2004-05-19
Posts: 13
Points: 0

Contact Box

Now how do I integrate that into my form?