Jump to content

Container color takes over entire page


Recommended Posts

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>

Capture.JPG

Link to post
Share on other sites

I've already told you!, IF you use multiple 'container' classes throughout the page, and you change the colour of the form class 'container' to whatever colour, this IS NOT restricted to just the form container, IT will apply the same colour to ALL elements throughout the page using this class.

As I previously said, Add the background colour styling to a inner element, if they is no suitable element create a inner div without any class that is already used within the page.

http://w3schools.invisionzone.com/index.php?/topic/56577-format-contact-form/#comment-311263

POST #5

Edited by dsonesuk
Link to post
Share on other sites

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>

Link to post
Share on other sites

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>

Link to post
Share on other sites
1 hour ago, Tarzan67 said:

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

 

DON'T make laugh, I don't even have to take it to be validated, to see THAT IS NOT FIXED, AND DOES NOT VALIDATE.

Link to post
Share on other sites

 

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:

Valid CSS!
<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>
            
Valid CSS!
<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)

Edited by Ingolme
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...