Solved: creating css forms

[aconite]

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

 

[jaymanson]

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

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

<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

 

[aconite]

thank you once again jay