hostfreak Posted September 14, 2009 Share Posted September 14, 2009 I want to have something like: First Name Last Name |_______| |_______| Address |_______| State City Zip |_______| |_______| |_______| Here is what I have: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>Test</title> <style type="text/css"> fieldset { border: solid 1px #d5d5d5; background-color: #e9e8e3; margin-top: 12px; } ol { list-style-type: none; } li { display: block; } label { display: block; margin-top: 12px; } input[type=text] { font-family: Verdana,Sans-serif; size: 8pt; border: solid 1px #d5d5d5; } </style> </head> <body> <fieldset> <legend>General Information</legend> <ol> <li> <label for="firstName">First Name</label> <input id="firstName" name="firstName" type="text" /> <label for="lastName">Last Name</label> <input id="lastName" name="lastName" type="text" /> </li> <li> <label for="address">Address</label> <input id="address" name="address" type="text" /> </li> <li> <label for="state">State</label> <input id="state" name="state" type="text" /> <label for="city">City</label> <input id="city" name="city" type="text" /> <label for="zip">Zip</label> <input id="zip" name="zip" type="text" /> </li> </ol> </fieldset> </body> </html> It works for putting the label on top of the input, but not for displaying some next to each other. Any help is appreciated, thanks. Quote Link to comment https://forums.phpfreaks.com/topic/174168-solved-form-put-label-above-input-some-labelsinputs-next-to-each-other/ Share on other sites More sharing options...
saltedm8 Posted September 14, 2009 Share Posted September 14, 2009 not sure if its valid and I did not get the chance to check it in all browsers.. but see if this works <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>Test</title> <style type="text/css"> fieldset { border: solid 1px #d5d5d5; background-color: #e9e8e3; margin-top: 12px; } input[type=text] { font-family: Verdana,Sans-serif; size: 8pt; border: solid 1px #d5d5d5; } .move { margin-left:105px; } .moveagain { margin-left:145px; } fieldset p { margin:0; padding:0; margin-top:5px; } </style> </head> <body> <fieldset> <legend>General Information</legend> <p><label for="firstName">First Name</label> <label for="lastName" class="move">Last Name</label></p> <p> <input id="firstName" name="firstName" type="text" /> <input id="lastName" name="lastName" type="text" /> </p> <p><label for="address">Address</label></p> <p><input id="address" name="address" type="text" /></p> <p><label for="state">State</label> <label for="city" class="moveagain">City</label> <label for="zip" class="moveagain">Zip</label></p> <input id="state" name="state" type="text" /> <input id="city" name="city" type="text" /> <input id="zip" name="zip" type="text" /> </fieldset> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/174168-solved-form-put-label-above-input-some-labelsinputs-next-to-each-other/#findComment-918153 Share on other sites More sharing options...
hostfreak Posted September 14, 2009 Author Share Posted September 14, 2009 Hey saltedm8 thanks for the response. Yes, that does work however it doesn't quite line up the label to the top-left of the input. I know I can adjust the px, but would that mean every input would be required to be a certain width? It would also effect it depending on the amount of text: Say in my example, State was actually "State of the union". It would move City and Zip over significantly therefore not lining up. I try to avoid set px when possible. Not sure if there is any other way? Thanks again. Quote Link to comment https://forums.phpfreaks.com/topic/174168-solved-form-put-label-above-input-some-labelsinputs-next-to-each-other/#findComment-918197 Share on other sites More sharing options...
saltedm8 Posted September 14, 2009 Share Posted September 14, 2009 nothing wrong with using px... if you wanted to set the text individually just create a class for each input and change the margin-left in each class... as it is I have used 2 classes, one for the top and one for the bottom 3... just needs a little play thats all Quote Link to comment https://forums.phpfreaks.com/topic/174168-solved-form-put-label-above-input-some-labelsinputs-next-to-each-other/#findComment-918198 Share on other sites More sharing options...
hostfreak Posted September 14, 2009 Author Share Posted September 14, 2009 That just seems like too much work lol, I'm sure there has to be a simpler solution? I will have a lot of different forms generated by a form class and to have to make a css class for each input seems crazy. I appreciate your help. Quote Link to comment https://forums.phpfreaks.com/topic/174168-solved-form-put-label-above-input-some-labelsinputs-next-to-each-other/#findComment-918200 Share on other sites More sharing options...
saltedm8 Posted September 14, 2009 Share Posted September 14, 2009 I know it seem allot of code, but its really not... you are right to try to avoid un-necessary markup but this is the only was I can see that it can be done Quote Link to comment https://forums.phpfreaks.com/topic/174168-solved-form-put-label-above-input-some-labelsinputs-next-to-each-other/#findComment-918235 Share on other sites More sharing options...
hostfreak Posted September 14, 2009 Author Share Posted September 14, 2009 After playing around I came up with a solution that works the way I want: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>Test</title> <style type="text/css"> fieldset { border: solid 1px #d5d5d5; background-color: #e9e8e3; margin-top: 12px; } ol { list-style-type: none; } li { clear: both; } label { width: 80px; text-align: left; float: left; margin-top: -16px; } input[type=text] { float: left; font-family: Verdana,"Sans-serif"; size: 8pt; border: solid 1px #d5d5d5; margin: 6px 12px 20px -80px; } </style> </head> <body> <fieldset> <legend>General Information</legend> <ol> <li> <label for="firstName">First Name</label> <input id="firstName" name="firstName" type="text" /> <label for="lastName">Last Name</label> <input id="lastName" name="lastName" type="text" /> </li> <li> <label for="address">Address</label> <input id="address" name="address" type="text" /> </li> <li> <label for="state">State</label> <input id="state" name="state" type="text" /> <label for="city">City</label> <input id="city" name="city" type="text" /> <label for="zip">Zip</label> <input id="zip" name="zip" type="text" /> </li> </ol> </fieldset> </body> </html> Thanks for the help. Quote Link to comment https://forums.phpfreaks.com/topic/174168-solved-form-put-label-above-input-some-labelsinputs-next-to-each-other/#findComment-918264 Share on other sites More sharing options...
saltedm8 Posted September 14, 2009 Share Posted September 14, 2009 cool, sweet... nice one Quote Link to comment https://forums.phpfreaks.com/topic/174168-solved-form-put-label-above-input-some-labelsinputs-next-to-each-other/#findComment-918434 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.