LisaMarie
06-18-2009, 01:21 AM
Hello, I was working on a Contact Form and was having some trouble.
The 'mock' text fields that I created in PS have drop shadows outside of the area where the text would be put in (which would be 1 color plain blue boxes)...
So (Hence) been having some trouble aligning the text fields with the background image, drop shadows, etc...
Attached is a jpeg mock up of what I'm going for...
I've tried this:
1) Plain blue CSS texts fields with a table inside a form and background image with dropshadows, etc behind it. (Wont align correctly)
2. And now wasnt sure if I could save the slices as table images and somehow snuggle the text field inside of their correct table elments?
Is there anyway to do this? Or are there any other solutions? Any help or advice would be greatly apprecaited! Thanx all!:)
Here is the code for #1 attempt:
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.oneColFixCtr #container {
}
#Contact {
position:absolute;
width:668px;
height:574px;
}
#LeftSection_Contact {
position:absolute;
width:316px;
height:574px;
background-image: url(Images/BotNav/Contact/LeftSection_Contact.jpg);
}
#RightSection_Contact {
position:absolute;
left:316px;
width:352px;
height:574px;
background-image: url(Images/BotNav/Contact/RightSection_Contact.jpg);
}
input{
background-color: #221367;
width: 236px;
height: 27px;
border: 0px;
float: left;
color:#ccccff;
}
textarea{
background-color: #221367;
width:270px;
height:183px;
border: 0px;
color:#ccccff;
float: left;
}
fieldset {
position: absolute;
top: 59px;
left:-12px;
border: 0px;
width: 276px;
height: 387px;
border: 0px;
}
-->
</style></head>
<body class="oneColFixCtr">
<div id="container">
<div id="mainContent">
<div id="Contact">
<div id="LeftSection_Contact"></div>
<div id="RightSection_Contact">
<form action="FormToEmail.php" method="post" name="ContactForm"><fieldset><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="Images/BotNav/Contact/Name.jpg" width="59" height="40" class= "cellTest"/></td>
</tr>
<tr>
<td><input name="Name" type="text" /></td>
</tr>
<tr>
<td> <img src="Images/BotNav/Contact/Company.jpg" width="98" height="40" /></td>
</tr>
<tr>
<td><input name="Company" type="text" /></td>
</tr>
<tr>
<td><img src="Images/BotNav/Contact/Email.jpg" width="60" height="40" /></td>
</tr>
<tr>
<td><input name="Email" type="text" /></td>
</tr>
<tr>
<td><img src="Images/BotNav/Contact/Message.jpg" width="84" height="40" /></td>
</tr>
<tr>
<td><textarea name="Message" cols="" rows=""></textarea></td>
</tr>
<tr>
<td><input name="Submit" type="button" /></td>
</tr>
</table></fieldset>
</form>
</div></div>
<!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>
The 'mock' text fields that I created in PS have drop shadows outside of the area where the text would be put in (which would be 1 color plain blue boxes)...
So (Hence) been having some trouble aligning the text fields with the background image, drop shadows, etc...
Attached is a jpeg mock up of what I'm going for...
I've tried this:
1) Plain blue CSS texts fields with a table inside a form and background image with dropshadows, etc behind it. (Wont align correctly)
2. And now wasnt sure if I could save the slices as table images and somehow snuggle the text field inside of their correct table elments?
Is there anyway to do this? Or are there any other solutions? Any help or advice would be greatly apprecaited! Thanx all!:)
Here is the code for #1 attempt:
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.oneColFixCtr #container {
}
#Contact {
position:absolute;
width:668px;
height:574px;
}
#LeftSection_Contact {
position:absolute;
width:316px;
height:574px;
background-image: url(Images/BotNav/Contact/LeftSection_Contact.jpg);
}
#RightSection_Contact {
position:absolute;
left:316px;
width:352px;
height:574px;
background-image: url(Images/BotNav/Contact/RightSection_Contact.jpg);
}
input{
background-color: #221367;
width: 236px;
height: 27px;
border: 0px;
float: left;
color:#ccccff;
}
textarea{
background-color: #221367;
width:270px;
height:183px;
border: 0px;
color:#ccccff;
float: left;
}
fieldset {
position: absolute;
top: 59px;
left:-12px;
border: 0px;
width: 276px;
height: 387px;
border: 0px;
}
-->
</style></head>
<body class="oneColFixCtr">
<div id="container">
<div id="mainContent">
<div id="Contact">
<div id="LeftSection_Contact"></div>
<div id="RightSection_Contact">
<form action="FormToEmail.php" method="post" name="ContactForm"><fieldset><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="Images/BotNav/Contact/Name.jpg" width="59" height="40" class= "cellTest"/></td>
</tr>
<tr>
<td><input name="Name" type="text" /></td>
</tr>
<tr>
<td> <img src="Images/BotNav/Contact/Company.jpg" width="98" height="40" /></td>
</tr>
<tr>
<td><input name="Company" type="text" /></td>
</tr>
<tr>
<td><img src="Images/BotNav/Contact/Email.jpg" width="60" height="40" /></td>
</tr>
<tr>
<td><input name="Email" type="text" /></td>
</tr>
<tr>
<td><img src="Images/BotNav/Contact/Message.jpg" width="84" height="40" /></td>
</tr>
<tr>
<td><textarea name="Message" cols="" rows=""></textarea></td>
</tr>
<tr>
<td><input name="Submit" type="button" /></td>
</tr>
</table></fieldset>
</form>
</div></div>
<!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>