Form Style

[PGCoder]

Dear W3School- Community, I have a problem with a form style. My form should fit in light blue box as you can see on the screenshot. The id tag is following:

#register-form .fieldgroup {	display: block;	width: 340px;}

If I change the display property to "inline-block" I achieve my concern but the form changed the position to the right and isn't centered anymore!Do I need other properties? I would appreciate a reply,PGCoder

error.tiff

[fikiwan]

can look complete code, for more clear .. :)I

[PGCoder]

Ok! Here is my code: form_layout.css:

#register-form {	margin-bottom: 30px;	margin-left: 20px;	margin-top: 10px;	padding: 25px 50px 10px;}#register-form .fieldgroup {	display: inline-block; /*   inline-block   */	width: 340px;}#register-form .fieldgroup label {	float: left;	padding: 15px 0 0;	text-align: right;	width: 110px;}#register-form .fieldgroup input, #register-form .fieldgroup select {	float: right;	margin: 10px 0;	height: 25px;}#register-form .fieldgroup textarea {	float: right;	margin: 10px 0;}#register-form .submit {	padding: 10px;	width: 220px;	height: 40px !important;}#register-form .fieldgroup label.error {	color: #FB3A3A;	margin: 4px 0 5px 125px;	padding: 0;	text-align: left;	width: 220px;}

request_layout.css:

#panel_form{	padding:2px;	text-align:center;	background-color:#2995f6;	border:solid 4px #ffffff;	border-radius: 20px;}#panel_form{	padding:50px;	display:none;}

layout.css:

#textContent {width:100%;position:relative;z-index:3;}#textMiddle {width:740px;}.textBox {border:4px solid white;background-image:url(../images/gradient.png);background-position:left top;background-repeat:repeat-x;-webkit-border-radius: 10px;-khtml-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;padding: 0 20px 5px 20px;color:#ffd723;}#supportInner {top:-24px;}h1#supportHeader {width:218px;height:50px;background-image:url(../images/support.png);background-repeat:no-repeat;text-indent:-9999px;}#screenshotsInner {position:relative;top:-24px;}h1#screenshotsHeader {width:269px;height:60;background-image:url(../images/screenshots.png);background-repeat:no-repeat;text-indent:-9999px;}

support.php:

<center>	<div id='textContent'>		<div id='textMiddle'>			<div class="textBox">				<div id='supportInner'>					<h1 id='supportHeader'>Support</h1> 	<form action="" method="post" id="register-form" novalidate="novalidate"><div id="panel_form">	<input type="button" class="back_form" value="Back" name="Back" />		<div id="form-content">		<div id="requestSummary"></div>			<div id="form_output"></div>		  				<div class="fieldgroup">					<label for="subject">Subject:</label>					<input type="text" name="form_subject" id="form_subject">				</div>				<div class="fieldgroup">					<label for="name">Name:</label>					<input type="text" name="form_name" id="form_name">				</div>				<div class="fieldgroup">					<label for="email">Email:</label>					<input type="text" name="form_email" id="form_email">				</div>				<div class="fieldgroup">					<label for="message">Message:</label>					<textarea name="form_message" id="form_message" rows="6" cols="28"></textarea>				</div>				<div class="fieldgroup">					<input type="submit" value="Submit" class="submit">				</div>		</div> </div>	</form> 				</div>			</div></center>

Edited November 29, 2012 by PGCoder