cinque8 Posted October 31, 2017 Share Posted October 31, 2017 Hello, I downloaded a form from Aweber.com. The form sits on the far left of the page. How would I move the form to the center of the page? I have attached the form code. Thank you.form code.doc Link to comment Share on other sites More sharing options...
Ingolme Posted October 31, 2017 Share Posted October 31, 2017 How much experience do you have with CSS? Link to comment Share on other sites More sharing options...
cinque8 Posted October 31, 2017 Author Share Posted October 31, 2017 Not much, but I will study any suggestions that you give me. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 31, 2017 Share Posted October 31, 2017 Study inline/inline-block elements, and block elements, the difference determines how you will centre them. One requires a width and margin, the other acts like text, so what would you use to centre text?. Link to comment Share on other sites More sharing options...
cinque8 Posted November 1, 2017 Author Share Posted November 1, 2017 Thanks for the information dsonesuk, I will research this. Link to comment Share on other sites More sharing options...
codeminer Posted November 1, 2017 Share Posted November 1, 2017 (edited) <!DOCTYPE HTML> <html> <head> <style> #myForm{ max-width:390px; width:100%; height:300px; margin:0 auto; padding-left:5px; padding-right:5px; padding-top:5px; background-color:#f1f1f1; } </style> </head> <body> <!--make a div giv the div a name myform--> <div id ="myForm"><form action="" method="post"> <input type="text" name="whatever" size="50%" placeholder="something"><br/> <input type="text"name="name" size="50%"placeholder="whatever"><br/> <textarea name="media" rows="10"cols="52%"placeholder="hope this helps"></textarea><br/> <input type ="submit" name = "submit" value = "submit"> </form></style> </div> </body> </html> im sure there a better way to do this Edited November 1, 2017 by codeminer Link to comment Share on other sites More sharing options...
Ingolme Posted November 2, 2017 Share Posted November 2, 2017 Setting a max-width and margin is actually the normal way to do it. You don't need to set the width to 100% though, since they already do that naturally. Link to comment Share on other sites More sharing options...
codeminer Posted November 2, 2017 Share Posted November 2, 2017 i just wanted to add to it makeing it some what responsive, without getting to much involved adding rem ,em, vw and vh i forgot to add this too the header <meta name="viewport" content="width=device-width, initial-scale=1"> cheers 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