Solved: creating css forms

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

aconite

Thread Starter
Joined
Feb 1, 2006
Messages
210
hi,

I have never created forms using css and need some help, how can I move the word 'your message ' to the top of the textarea box. Attached is a picture of the page, as yet I do not have hosting so can't upload the url

CSS
h3 {
font-family:"Century Gothic";
font-size:1.4em;
color:#818d99;
font-weight:normal;
margin-left:6%;
}

#form {
width:4em;
text-align:right;
float:left;
display:block;
font-size:1.2em;
line-height:260%;
margin-right:6em;
}

.submit input {
margin-left:7.5em;
background:#cbd7e6;
border:2px outset #96adbf;
}

input {
color:#000000;
background:#ffffff;
border:1px solid #000000;
}

textarea.white {
background-color:#FFFFFF;
color:#000000;
border:1px solid #000000;
}

p {
margin-left:6%;
}

HTML
<h3>CONTACT PHOTO RESTORATION EXPERT</h3>
&nbsp;
<form action="" method="post">
<p>Your Name: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" size="45" /></p>
<p>Your Email: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" size="45" /></p>
<p>Subject: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" size="45" /></p>
<p>Your Message: &nbsp; &nbsp; <textarea class="white" cols="45" rows="20"></textarea></p>
<p class="submit"><input type="submit" value="Submit" /></p>
</form></div>

thanks
 

Attachments

Joined
Mar 18, 2007
Messages
199
Hi,

The main problem is that the input areas are inside <p> tags. You should avoid putting anything other than text inside a <p> tag. Also worth a mention, the #form element in the CSS will have no effect as there is nothing with an id of 'form' in the HTML. Here's the form with a few adjustments and a little code tidy :)

CSS
Code:
h3 {
font-family:"Century Gothic";
font-size:1.4em;
color:#818d99;
font-weight:normal;
margin-left:6%;
}

#form {
width:500px;
}

#form p {
float: left;
width: 20%;
padding: 0;
margin: 0;
}

.input {
float: right;
width: 79%;
border:1px solid #000000;
}

.submit {
float: left;
margin-left: 102px;
background: #cbd7e6;
border: 2px outset #96adbf;
}

br {
clear: both;
}
HTML
Code:
<h3>CONTACT PHOTO RESTORATION EXPERT</h3>
<form id="form" action="" method="post">
<p>Your Name:</p><input class="input" type="text" /><br /><br />
<p>Your Email:</p><input class="input" type="text" /><br /><br />
<p>Subject:</p><input class="input" type="text" /><br /><br />
<p>Your Message:</p><textarea class="input" rows="20"></textarea><br /><br />
<input class="submit" type="submit" value="Submit" />
</form>
You can obviously style this further, but hopefully you can see what I've done there :)

Jay
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Staff online

Top