2 replies [Last post]
Anonymous
Anonymous's picture
Guru
calgary,alberta
calgary,alberta

Hi!

I made a Form and I want it to look like this: click

This is the code:

<html>
<body>

<style type="text/css">
	table { color: #000000; font-family: Verdana; font-size: 10pt; }
</style>

<table width="250">
    <tr>
	  <td width="10"><span style="white-space: nowrap;">Real Name:</span></td>
	  <td><input name="realName" id="realName" style="width: 100%;"></td>
	</tr>
</table>

<table width="250">
    <tr>
	  <td width="10"><span style="white-space: nowrap;">Email:</span></td>
	  <td><input name="realName" id="realName" style="width: 100%;"></td>
	</tr>
</table>

<table width="250">
    <tr>
	  <td width="10"><span style="white-space: nowrap;">Location:</span></td>
	  <td><input name="realName" id="realName" style="width: 100%;"></td>
	</tr>
</table>

</body>
</html>


Now the problem is: Can I do that in pure Css? You see, I need lots of tables to align the form labels and elements the way they are.

I tried it with CSS but it doesnt work: click

<html>
<form>
<style>

.myForm {
	background: #CCCCCC;
	padding: 5px;
	width: 400px;
	max-width: 300px;
	white-space: nowrap;
	}
</style>
  <span class="myForm">Real Name: <input name="realName" style="width: 100%;"></span><br>
  <span class="myForm">email: <input name="email" style="width: 100%;"></span><br>

</form>
</html>

thanks, I appreciate it

- Robert

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 3 years 24 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Form without Tables?

Suprisingly, this works:

  <div class="myForm">
    <span style="float: left;">Real Name:</span>
    <input name="realName" style="width: 100%;">
  </div>

  <div class="myForm">
    <span style="float: left;">email:</span>
    <input name="email" style="width: 100%;">
  </div>

Was playing around, basically when you set the width of the input to 100%, it takes 100% of the width of the containing box. Unless there's a float there.

Learn something every day!

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Anonymous
Anonymous's picture
Guru

Form without Tables?

Wow, thank you very much. You saved me hell alot of work.

I'm doing this for a Smashing Pumkins side. The Smashing Pumpkins Fan Database ( http://www.spfd.org )

If I put a credits page up, you'll be on it. Thank you Laughing out loud \:D/