PDA

View Full Version : CSS Form Layout, Please Help!

Donno24
03-28-2008, 03:00 PM
hey Everyone, I'm trying to get this layout show in the attachment. But I just cant do it. I was wondering does anyone know how I would achieve this design?
http://ijsr32.infj.ulst.ac.uk/~13780606/reviewlayout.gif

The Form Code is:

<form action="<?php $_SERVER['REQUEST_URI'] ?>" method="POST">
<label for="name">Name:</label><br /> <input type="text" name="txt_name"><br />
<label for="email">Email: (Optional)</label><br /> <input type="text" name="txt_email"><br />
<label for="comment">Comment:</label><br /> <textarea name="txt_comment" rows=5 style="width: 30%"></textarea>
<br />
<input type="submit" id="submit" value="Submit Comment">
</form>



Hope you can Help.

Many Thanks
Paul
_Aerospace_Eng_
03-28-2008, 04:32 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
fieldset * {
margin:0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
color:#0004B8;
}
fieldset {
width:400px;
margin:auto;
border:0;
}
fieldset textarea {
width:398px;
border:1px solid #0004B8;
background:#FFF;
}
label.leftinput {
width:180px;
float:left;
margin-bottom:3px;
}
label.rightinput {
width:190px;
float:right;
margin-bottom:3px;
}
label.leftinput input, label.rightinput input {
width:188px;
border:1px solid #0004B8;
background:#FFF;
}
#submit {
border:1px solid #0004B8;
background:#FFF;
width:190px;
}
</style>
</head>
<body>
<form action="<?php $_SERVER['REQUEST_URI'] ?>" method="POST">
<fieldset>
<label for="comment">Comment:
<textarea name="txt_comment" id="txt_comment" cols="20" rows="5"></textarea>
</label>
<label for="name" class="leftinput">Name:
<input type="text" name="txt_name" id="txt_name">
</label>
<label for="email" class="rightinput">Email: (Optional)
<input type="text" name="txt_email" id="txt_email">
</label>
<input type="submit" id="submit" value="Submit Review">
</fieldset>
</form>
</body>
</html>
jcdevelopment
03-28-2008, 04:49 PM
you can try this also, but im sure either one will work

css

<style type="text/css">

#wrap {
margin:0 auto;
width:400px;
color:#0066CC;
}

textarea {border:1px solid #0066CC;}
input {border:1px solid #0066CC;}


</style>

html:

<body>

<div id="wrap">

<form action="<?php $_SERVER['REQUEST_URI'] ?>" method="POST">
<div><label for="comment">Comment:</label><br /> <textarea name="txt_comment" rows=5 style="width: 80%"></textarea></div>
<div>
<div style="float: left;"><label for="name">Name:</label><br /> <input type="text" name="txt_name">&nbsp;</div>
<div><label for="email">Email: (Optional)</label><br /> <input type="text" name="txt_email"><br /></div>
</div>
<br />
<div><input type="submit" id="submit" value="Submit Comment"></div>
</form>



</div>

</body>

good luck!!
Donno24
03-28-2008, 04:52 PM
Fantastic, Thanks alot guys. It looks brilliant.