Tarzan67 Posted April 1, 2017 Share Posted April 1, 2017 I created a contact form using CSS but I may have left out a div. Is there a proper order for the wrappers? My form has side by side fields (Picture) but the fields are horizontal on the website. Picture2. I am knew to this so any help is appreciated. The code is below. <html> <head> <style> input[type=text]:hover { background-color: #C5E3BF; } input[type=text], select, textarea { width: 100%; padding: 12px; width: 48%; border: 6px double #96BADD; border-radius: 8px; font-family: "Tahoma", sans, serif; font-size: 20px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=submit] { background-color: #FFF; color: #434343; padding: 12px 200px; border: box; border-radius: 4px; cursor: pointer; font-size: 18px; font-family: "Tahoma", sans, serif; } input[type=submit]:hover { background-color: #96badd; text-align: center; color: black; } h2 { font-size: 30px; font-family: "Tahoma", sans, serif; text-align: center; } .container { border-radius: 15px; background-color: #96BADD; padding: 20px; } </style> </head> <body> <div class="container"> <h2>Request a Free Information Packet<h2> <form action="/action_page.php"> <input type="text" id="fname" name="firstname" placeholder="Full Name"> <input type="text" id="lphone" name="Phone" placeholder="Phone"> <input type="text" id= "email" name="Email" placeholder="Email"> <input type="text" id= "Message" name="Message" placeholder="Message"> <p style="text-align: center;"><input type="submit" name="Submit" value="SUBMIT"></p> </form> </div> </body> </html> Link to comment Share on other sites More sharing options...
dsonesuk Posted April 1, 2017 Share Posted April 1, 2017 (edited) Please try validating your html before posting here https://validator.w3.org/, obviously there is problem with width, IF you are using bootstrap the container element would have a fixed width, depending on device viewed in. IF input width + padding exceeds beyond 50%, it will cause inputs to stack vertically, huge left/right padding on submit won't help either, what is border: box; ?????. Edited April 1, 2017 by dsonesuk Link to comment Share on other sites More sharing options...
Tarzan67 Posted April 1, 2017 Author Share Posted April 1, 2017 The code was already validated at the CSS schools website. I'll try your site. Link to comment Share on other sites More sharing options...
Tarzan67 Posted April 1, 2017 Author Share Posted April 1, 2017 Ok, Hopefully that makes more sense to you. It still shows vertical instead of side by side. <!DOCTYPE html> <html> <head> <style type="text/css"> /*<![CDATA[*/ input[type=text]:hover { background-color: #C5E3BF; } input[type=text], select, textarea { width: 100%; padding: 12px; width: 48%; border: 6px double #96BADD; border-radius: 8px; font-family: "Tahoma", sans, serif; font-size: 20px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=submit] { background-color: #FFF; color: #434343; padding: 12px 200px; border: box; border-radius: 4px; cursor: pointer; font-size: 18px; font-family: "Tahoma", sans, serif; } input[type=submit]:hover { background-color: #96badd; text-align: center; color: black; } h2 { font-size: 30px; font-family: "Tahoma", sans, serif; text-align: center; } .container { border-radius: 15px; background-color: #96BADD; padding: 20px; } /*]]>*/ </style> </head> <body> <div class="container"> <h2>Request a Free Information Packet</h2> <form action="/action_page.php"> <input id="fname" name="firstname" placeholder="Full Name" type="text"> <input id="lphone" name="Phone" placeholder="Phone" type="text"> <input id="email" name="Email" placeholder="Email" type="text"> <input id="Message" name="Message" placeholder="Message" type="text"> <p style="text-align: center;"><input name="Submit" type="submit" value="SUBMIT"></p> </form> </div> </body> </html> Link to comment Share on other sites More sharing options...
Tarzan67 Posted April 1, 2017 Author Share Posted April 1, 2017 I fixed all the code! I just can't get the fields to go side by side Link to comment Share on other sites More sharing options...
codex... Posted April 3, 2017 Share Posted April 3, 2017 Hi, This is my first time, to answer a Question on this forum, after being a member for a few years now, you guys are doing a great job, answering questions and solving technical issues, many thanks!! Now, moving on, to the answer to this post, may I suggest to you that, in the css code you have posted, please rewrite this line of code, (highlighted in red) from: input[type=text], select, textarea { width: 100%; padding: 12px; width: 48%; border: 6px double #96BADD; border-radius: 8px; font-family: "Tahoma", sans, serif; font-size: 20px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } to this resize: horizontal; and save your contact form. I think that might solve the problem, hopefully. Thanks. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 3, 2017 Share Posted April 3, 2017 I suggest you place it online, because I do not see then lined up vertical, but side by side in Chrome, Firefox OR MS Edge, so we can see what is actually causing the problem, if there is a problem. I suppose this is run on a web server, saved as utf-8 encoded, and history/cache cleared. Link to comment Share on other sites More sharing options...
Tarzan67 Posted April 3, 2017 Author Share Posted April 3, 2017 (edited) Where online? I'm using chrome. It gets distorted when its placed on my website but when I test it out it appears fine. Check it out if you'd like, this is the actual website. http://reverseloansforseniors.com/ppcfbk/ Edited April 3, 2017 by Tarzan67 Link to comment Share on other sites More sharing options...
dsonesuk Posted April 3, 2017 Share Posted April 3, 2017 (edited) Yes! it works locally because it is not linked to styles at your site, but now we can access the form on your site and using F12 to bring up development tools, it shows us this input[type="date"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], select, textarea { border-radius: 0; border-style: solid; border-width: 1px; box-sizing: border-box; display: block; font-size: 13px; margin: 0 0 20px; max-width: 100%; outline: medium none; padding: 10px; width: 230px; } BLOCK elements cause stacking like you are seeing whether width is 10% or 100%, WHILE display: inline-block; OR using float do NOT! 7 POSTS wasted, if you had just giving us link in first place, or your code had link to css of site, it would have been fixed much, much earlier. Edited April 3, 2017 by dsonesuk Link to comment Share on other sites More sharing options...
Tarzan67 Posted April 3, 2017 Author Share Posted April 3, 2017 (edited) I apologize, thank you for the help. Had I known what info to send I would have done it initially. Enjoy the day! One last question? Why is the form causing other element on the site page to take on the color blue? Hex: #96BADD Edited April 3, 2017 by Tarzan67 Link to comment Share on other sites More sharing options...
Tarzan67 Posted April 3, 2017 Author Share Posted April 3, 2017 I can't seem to fix it, no need to help. I'll search elsewhere 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