PGCoder Posted November 28, 2012 Share Posted November 28, 2012 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 Link to comment Share on other sites More sharing options...
fikiwan Posted November 28, 2012 Share Posted November 28, 2012 can look complete code, for more clear .. :)I Link to comment Share on other sites More sharing options...
PGCoder Posted November 29, 2012 Author Share Posted November 29, 2012 (edited) 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now