Jump to content

Tarzan67

Members
  • Content count

    21
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Tarzan67

  • Rank
    Newbie
  1. Container color takes over entire page

    W3C CSS Validator results for TextArea (CSS level 3) Congratulations! No Error Found. This document validates as CSS level 3 ! To show your readers that you've taken the care to create an interoperable Web page, you may display this icon on any page that validates. Here is the XHTML you could use to add this icon to your Web page: <p> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /> </a> </p> <p> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /> </a> </p> (close the img tag with > instead of /> if using HTML <= 4.01)
  2. Container color takes over entire page

    I fixed it! But it still cannot figure out how to fill the form with a background color #96BADD or create a simple line border around everything. Seems simple but i'm stumped. Below code has been validated <!DOCTYPE html> <html> <style type="text/css"> span { background-color: #96badd; width: 100%; margin: 0 auto; border: solid 3px; } input[type=text]:hover { background-color: #C5E3BF; } input[type=text], select,textarea { width: 48%; display: inline-block; padding: 12px; border: 6px double #96BADD; border-radius: 8px 8px 8px 8px; font-family: "Tahoma", sans, serif; font-size: 20px; box-sizing: border-box; margin-top: 16px; margin-bottom: 16px; margin-left: 10px; } h4 { background-color: #434343; color: #FFF; padding: 12px 200px; cursor: pointer; font-size: 18px; font-family: "Tahoma"; text-align: center; margin: auto; margin-top: 16px; width: 100px; } h4:hover { background-color: #000; text-align: center; color: white; } h5 { font-size: 30px; font-family: "Tahoma", sans, serif; text-align: center; } </style> <body> <span> <h5>Request a Free Information Packet</h5> <input id="fname" name="fullname" 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" /> <h4>Submit</h4> </span> </body> </html>
  3. Container color takes over entire page

    Okay, I removed the div class and replaced it with a span. The result fixed my color issue but now I cant seem to format a border and a border fill color. Here is the new code. This page will not allow to to submit a new pic. http://reverseloansforseniors.com/ppcfbk/ <!DOCTYPE html> <html> <style type="text/css"> p { border: solid 3px; background-color: #FFF; padding: 20px; } input[type=text]:hover { background-color: #C5E3BF; } input[type=text], select,textarea { width: 48%; display: inline-block; padding: 12px; border: 6px double #96BADD; border-radius: 8px; font-family: "Tahoma", sans, serif; font-size: 20px; box-sizing: border-box; margin-top: 16px; margin-bottom: 16px; margin-left: 10px; } h4 { background-color: #434343; color: #FFF; padding: 12px 200px; border-radius: 4px; cursor: pointer; font-size: 18px; font-family: "Tahoma"; text-align: center; margin: auto; margin-top: 16px; width: 100px; } h4:hover { background-color: #000; text-align: center; color: white; } h5 { font-size: 30px; font-family: "Tahoma", sans, serif; text-align: center; } </style> <body> <span> <p> <h5>Request a Free Information Packet</h5> <input id="fname" name="fullname" 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" /> <h4>Submit</h4> </p> </span> </body> </html>
  4. Container color takes over entire page

    Thank you. I'll give it a try. Be patient, I'm learning.
  5. Container color takes over entire page

    I posted the code for a custom contact form in a wordpress column container. The resulting code was the form posted as well as the forms background colors. picture below should be all white Webpage: http://reverseloansforseniors.com/ppcfbk/ Code: <!DOCTYPE html> <html> <style type="text/css"> input[type=text]:hover { background-color: #C5E3BF; } input[type=text], select,textarea { width: 48%; display: inline-block; padding: 12px; border: 6px double #96BADD; border-radius: 8px; font-family: "Tahoma", sans, serif; font-size: 20px; box-sizing: border-box; margin-top: 16px; margin-bottom: 16px; margin-left: 10px; } h4 { background-color: #434343; color: #FFF; padding: 12px 200px; border: #FFF; border-radius: 4px; cursor: pointer; font-size: 18px; font-family: "Tahoma"; text-align: center; margin-left: 165px; width: 80px; } h4:hover { background-color: #000; text-align: center; color: white; } h5 { font-size: 30px; font-family: "Tahoma", sans, serif; text-align: center; } .container { border-radius: 15px; background-color: #96BADD; padding: 10px; } </style> <title>1</title> <body> <div class="container"> <h5>Request a Free Information Packet</h5> <div> <input id="fname" name="fullname" 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" /> <h4>Submit</h4> </div> </body> </html>
  6. Style a Contact Form

    I can't seem to fix it, no need to help. I'll search elsewhere
  7. Style a Contact Form

    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
  8. Style a Contact Form

    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/
  9. Style a Contact Form

    I fixed all the code! I just can't get the fields to go side by side
  10. Style a Contact Form

    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>
  11. Style a Contact Form

    The code was already validated at the CSS schools website. I'll try your site.
  12. Style a Contact Form

    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>
  13. Format Contact Form

    Thank you. You have the code. I started coding last week. I'm a novice. Any ideas?
  14. Format Contact Form

    Here is the code just for the attached picture. Is there a way to have my submit button send an email directly to me?? <!DOCTYPE html> <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>
  15. Align containers using CSS

    I used an image field and added a hyperlink. Thank you. Turns out by adding a divider in muffin builder they formatted properly
×