Hi i'm trying to correctly position the fields in my form that will be used to upload atricles to the site. The problem is that i'm having trouble trying to position the fields next to each other (horizontal), so that in on line you have the 'instruction' of the form (i.e. Name:, Title: etc.) and directly under the corresponding field. To do this i've put the entire form in a <div> and then for the ones that need positioning put them in there own <div>, thinking that they would line up side by side - but they don't. Heres the code for wot i'm trying to do:<div class="form">
<form action="blah" name="fsdf">
Title:<br />
<input type="text" name="title" size="40" /><br /><br />
Please place the article in here:<br />
<textarea rows="20" cols="68" name="article"></textarea><br /><br />
<div class="form_author">
Authors name:<br/>
<input type="text" name="author" size="25"></div>
<div class="form_type">
Type of article:<br/>
<select name="type">
<option value="1">General News</option>
<option value="2">Match Report</option>
<option value="3">Event</option>
<option value="4">Team Sheet</option>
</select>
</div>
</form>
</div>I've set the widths of the <div>'s to the size needed by the fields, in the thinking that if one <div> doesn't take up the whole length of the main <div> then it will move the next one up along side it. I guess the other way would be to set position:relative; and then position it, yes?<style type="text/css">
form {
margin: 2em auto;
width: 100%;
}
form fieldset {
margin: 0px auto;
width: 75%;
}
form p label {
margin: 1em 0.5em;
}
form p span {
margin: -1.5em 0px 0.5em 0px;
display: block;
text-align: right;
}
</style>
<form action="" method="post">
<fieldset>
<legend>Purpose of form</legend>
<p><label for="id_of_input">Label</label>
<span><input type="text" name="name_of_input" id="id_of_input" /></span></p>
</fieldset></div></form>
<form action="blah" name="fsdf">
Title:<br />
<input type="text" name="title" size="40" /><br /><br />
Please place the article in here:<br />
<textarea rows="20" cols="68" name="article"></textarea><br /><br />
<div class="form_author">
Authors name:<br/>
<input type="text" name="author" size="25"></div>
<div class="form_type">
Type of article:<br/>
<select name="type">
<option value="1">General News</option>
<option value="2">Match Report</option>
<option value="3">Event</option>
<option value="4">Team Sheet</option>
</select>
</div>
</form>
</div>I've set the widths of the <div>'s to the size needed by the fields, in the thinking that if one <div> doesn't take up the whole length of the main <div> then it will move the next one up along side it. I guess the other way would be to set position:relative; and then position it, yes?<style type="text/css">
form {
margin: 2em auto;
width: 100%;
}
form fieldset {
margin: 0px auto;
width: 75%;
}
form p label {
margin: 1em 0.5em;
}
form p span {
margin: -1.5em 0px 0.5em 0px;
display: block;
text-align: right;
}
</style>
<form action="" method="post">
<fieldset>
<legend>Purpose of form</legend>
<p><label for="id_of_input">Label</label>
<span><input type="text" name="name_of_input" id="id_of_input" /></span></p>
</fieldset></div></form>