Jump to content

How To Align Image With Form?


Zad

Recommended Posts

I'm trying to line up an image and contact form side-by-side using a table. I can't seem to get the bottom of the image to line up vertically with the bottom of the form's message window, and also have it look the same in IE, Firefox, and Chrome.

 

Thanks for your time...

 

<html>

<head>
<style type='text/css'>
   .hidden { 
display: none; 
}
</style>
</head>

<body>

<table width="900"  border="0" align="center" cellspacing="10">
 <tr>
   <td width="499" height=""><div align="center"><img src="http://farm9.staticflickr.com/8454/8019803735_fc51193fc7.jpg" width="499" height="408" /><span class="style2">Francois taking no prisoners (example image courtesy sim.partners - Flickr)</span></div></td>
   <td width="325">

<div align="center">

<!-- Form Start -->
<form action="#" method="post">
<span class="hidden"><input name="text" type="text" maxlength="70" size="47" /></span>
<p align="left">Your Name:</p>
<div align="left">
 <input name="name" type="text" maxlength="70" size="47" />
 <br />
 <br />
</div>
<p align="left">Your Email Address:</p>
<div align="left">
 <input name="email" type="text" maxlength="70" size="47" />
 <br />
 <br />
</div>
<p align="left">Select a Contact:</p>
<div align="left">
 <select name="whd">
   <option selected="selected" value="1">Recipient 1</option>
   <option value="2">Recipient 2</option>
   <option value="3">Recipient 3</opt></option>
   <option value="4">Recipient 4</opt></option>
   <option value="5">Recipient 5</opt></option>
   <option value="6">Recipient 6</opt></option>
   <option value="7">Recipient 7</opt></option>
   <option value="8">Recipient 8</opt></option>
   <option value="9">Recipient 9</opt></option>
   <option value="10">Recipient 10</opt></option>
   <option value="11">Recipient 11</opt></option>
   <option value="12">Recipient 12</opt></option>
   <option value="13">Recipient 13</opt></option>
 </select>
 <br />
 <br />
</div>
<p align="left">Message:</p>
<div align="left">
   <textarea name="message" cols="50" rows="13"></textarea>
   <!--cols="56"-->
   <br />
   <br />
</div>
<center><input type="submit" value=" Send Message " /></center>
</form>
<!-- Form End -->

</div>
</td>
 </tr>
</table>

</body>

</html>

Edited by Zad
Link to comment
Share on other sites

Why are you even using a table? Just put your form inside a division (as you have it) and float your image. Tables aren't meant to be used for layout.

 

Do you have a link? It's easier (for me, anyway) to help more specifically when we can see the entire page.

Link to comment
Share on other sites

Why are you even using a table? Just put your form inside a division (as you have it) and float your image. Tables aren't meant to be used for layout.

 

Do you have a link? It's easier (for me, anyway) to help more specifically when we can see the entire page.

 

Hi Andrea,

 

I appreciate your feedback. No, I don't have a link to anything yet - the code I submitted is all there is at the moment. Can you give me an example of how to float the image with the form in a div?

 

Thanks,

Zad

Link to comment
Share on other sites

I pasted your code into this page - and I see several problems.

  • You seem to have more input fields than you have labels
  • The quality of your image is very poor
  • Your Message textbox is 50 cols wide, your image is 499px wide, and the two of them do not have room next to each other in a 900px container (I reduced the column size to make them fit) (instead of your table, I created a wrapper div that's 900px wide)
  • You also should not be using <br> tags to create space. You should use CSS - for example: #wrapper p {margin: 0 15px;}
  • The center tag you're using for your submit button is deprecated. Instead, again, use CSS to center;
  • I added a margin top to the image to direct it towards the bottom of your form, but until the rest of the issues are cleared up, it's hard to see how big that margin will need to be

Hope this helps - let me know if you have any questions about any of it.

Link to comment
Share on other sites

I pasted your code into this page - and I see several problems.

  • You seem to have more input fields than you have labels
  • The quality of your image is very poor
  • Your Message textbox is 50 cols wide, your image is 499px wide, and the two of them do not have room next to each other in a 900px container (I reduced the column size to make them fit) (instead of your table, I created a wrapper div that's 900px wide)
  • You also should not be using <br> tags to create space. You should use CSS - for example: #wrapper p {margin: 0 15px;}
  • The center tag you're using for your submit button is deprecated. Instead, again, use CSS to center;
  • I added a margin top to the image to direct it towards the bottom of your form, but until the rest of the issues are cleared up, it's hard to see how big that margin will need to be

Hope this helps - let me know if you have any questions about any of it.

 

I found the contact form online - the extra field was added as a "honeypot" to foil spambots (that's why the top field was hidden in the original code). The image is just a placeholder; it's not intended as the final version.

 

Thanks for the corrections on the width, and the break & center tags (I'm used to older HTML - am still learning CSS). I actually wanted to keep the image on the left, but with your code I should be able to puzzle it all out.

 

Zad

Edited by Zad
Link to comment
Share on other sites

1354062694[/url]' post='36622']

I found the contact form online - the extra field was added as a "honeypot" to foil spambots (that's why the top field was hidden in the original code). The image is just a placeholder; it's not intended as the final version.

 

Thanks for the corrections on the width, and the break & center tags (I'm used to older HTML - am still learning CSS). I actually wanted to keep the image on the left, but with your code I should be able to puzzle it all out.

 

Zad

 

Just use float: left instead of right, then

Link to comment
Share on other sites

  • 4 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...