Jump to content

Container color takes over entire page

Tarzan67

By Tarzan67
in CSS

 Share

Recommended Posts

Tarzan67 Newbie

Tarzan67

Posted
Posted

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 comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted (edited)

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 comment
Share on other sites
Tarzan67 Newbie

Tarzan67

Posted
  • Author
Posted

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 comment
Share on other sites
Tarzan67 Newbie

Tarzan67

Posted
  • Author
Posted

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 comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted
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 comment
Share on other sites
Tarzan67 Newbie

Tarzan67

Posted
  • Author
Posted (edited)

 

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 comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...