改变div的背景

时间：2012-09-10 04:10:01

标签： html

我无法更改其中一个div的背景颜色。我试图改变列（特色狗，特色猫，特色其他）的颜色＃E0E6FF的背景。我尝试在一个名为features的div中加入整个部分并添加背景颜色，但它不起作用。有什么建议吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Adoption Process and Application</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<style type="text/css">

* {
margin: 0px 0px;
padding: 0px 0px;
}

/* MAIN WRAPPER */ 
.wrapper {
width: 1092px;
margin-right: auto;
margin-left: auto;
}

/* BODY */ 
body {
background-image: url(mainback.png);
background-repeat: repeat-y repeat-x;
}

/* HEADER */   
#header {
margin: 0px;
//padding: 50px 0px 0px 0px;
}

.banner {
margin-left: 31.4%;
margin-bottom: -5px;
}

/* NAVIGATION */
#nav {
padding: 0px; 
//margin: 10px 0px 10px 0px;
background-color: #330033;
overflow: hidden;
}

#nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;      
}

#nav li {
text-align: center;
float: left;
padding: 0px 0px 0px 37px;
width: 220px;
color: E0E6FF
}

#nav a {
font-family: Copperplate Gothic Light, sans-serif;
letter-spacing: 1px;
color: #E0E6FF;
display: block;
font-size: 1.3em;
height: 50px;
line-height: 50px;
text-decoration: none;
text-transform: uppercase; 
font-weight: bold;
}

#nav a:hover {
background: #FFC473;
color: #330033;
}

/* MAIN CONTENT */ 
#main {
padding: 15px 0px 15px 0px;
margin: 0px;
width: 1092px;
float: left;
background-color: #330033;
}

#main p {
font-family: "Times New Roman", Times, serif;
font-size: 15px;
line-height: 20px;
letter-spacing: 1.5px;
padding: 0em 1em 1em 1.5em;
color: #E0E6FF;
text-indent: 20px;
}

h1 {
font-weight: bold;
font-family: Copperplate Gothic Light, sans-serif;
font-size: 1.2em;
text-transform: uppercase;
padding: 0em 0em 0em 1em;
color: #330033;
}

#intro {
overflow: hidden;
}

/* FEATURED */
#featured {
background-color: #E0E6FF;
}

/* PICTURES */
#dogs img, #cats img, #others img {
border: 2px solid #330033;
width: 300px;
height: 225px;
}

#dogs h1, #cats h1, #others h1 {
font-family: Copperplate Gothic Light, sans-serif;
font-size: 1.4em;
text-align: center;
}

/* DOG CONTENT */
#dogs {
border: 3px solid #330033;
float: left;
margin-right: 50px;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 10px;
width: 300px;;
height: 750px;
padding: 5px 13px 5px 5px;
color: #330033;
}

#dogs_inner {
background-image: url(images/backgrounds/contentBG.jpg);
background-repeat: no-repeat;
}

/* CAT CONTENT */
#cats {
border: 3px solid #330033;
float: left;
margin-right: 50px;
margin-top: 15px;
margin-bottom: 15px;
width: 300px;;
height: 750px;
padding: 5px 13px 5px 5px;
color: #330033;
}

#cats_inner {
background-image: url(images/backgrounds/contentBG.jpg);
background-repeat: no-repeat;
}

/* OTHER CONTENT */
#others {
border: 3px solid #330033;
float: left;
width: 300px;
margin-top: 15px;
margin-bottom: 15px;
margin-right: 10px;
height: 750px;
padding: 5px 13px 5px 5px;
color: #330033;
}

#others_inner {
background-image: url(images/backgrounds/contentBG.jpg);
background-repeat: no-repeat;
}

/* LIST STYLE */
#dogs ul, #cats ul, #others ul {
list-style-type: none;
}

/* SPAN STYLE */
.h2 {
font-weight: bold;
text-decoration: underline;
}

/* FOOTER */
#footer {
margin: 0px;
padding: 0px;
clear: both;
color: #E0E6FF;
height: 60px;
width: 1092px;
background-color: #330033;
}

#footer_inner {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
letter-spacing: 1.5px;
color: #E0E6FF;
}

.footer_location {
float: left;
font-size: .85em;
text-align: left;
padding: 14px 55px 15px 60px;
}

.footer_social {
float: left;
font-size: .85em;
padding: 18px 5px 0px 200px;
}

#footer img {
padding: 0px 5px 0px 0px;
}

.footer_contact {
float: right;
font-size: .85em;
text-align: right;
padding: 14px 60px 15px 55px;
}

#footer a:link {
color: #E0E6FF;
}

#footer a:hoover {
color: #E0E6FF;
}

#footer a:visited {
color: #E0E6FF;
}

</style>


</head>
<body>

<div id="header">
    <div class="wrapper">
        <img class="banner" src="banner.png" alt="Paws and Claws Animal Rescue" />
    </div> <!--end div wrapper -->
</div> <!--end div header -->

<div class="wrapper">   
    <div id="nav">      
        <ul>
            <li><a href="final.html">Home</a></li>
            <li><a href="available.html">Available Pets</a></li>
            <li><a href="happytails.html">Happy Tails</a></li>
            <li><a href="application.html">Process</a></li>
        </ul>
    </div> <!--end nav div -->

    <div id="intro">
        <div id="main">
        <p>Hello! We are Paws and Claws Animal Rescue. Paws and Claws is a nonprofit organization that works to save the lives of animals. We see each animal as special and worthy of our attention. Our dedicated team of volunteers work countless hours to enrich the lives of animals who were given less than acceptable attention in the past. Volunteers start by giving a full assessment of each animal that comes into the rescue both for medical reasons and temperament. From their, volunteers work to socialize and adapt the animals to new environments so they are able to be adopted to forever homes as soon as possible</p>
<p>
We take great care in the placement of all our animals and work hard to make sure they find the perfect forever home. For all these dogs have been through having their regular lives interrupted, the least we can do is find them a safe and loving home. We take pride in the care we provide for our animals and ensure they are up-to-date on all their shots and vaccinations before placing them in homes. Each of our animals are spayed or neutered, brought up-to-date on rabies, distemper and bordetella vaccinations, heartworm tested and put on prevention prior to being adopted as needed per animal.</p>
<p>
Why should you choose to adopt from Paws and Claws? Paws and Claws does not turn away any animal for any reason: not for age, size, breed, or condition. Choosing Paws and Claws gives you the best option for getting the pet of your dreams. And we are here for you every step of the way. If you have any questions, please do not hesitate to call or email. We want the best for our animals so we are willing to do whatever it takes to accomplish that.
</p>
    </div> <!-- end div main -->
    </div> <!-- end div intro -->
</div> <!-- end div wrapper -->

<div class="wrapper">
    <div id="featured">
        <div id="dogs">
    <div id="dogs_inner">
        <h1>Featured Canines</h1>
        <img src="simba.png" alt="Simba, age 6yrs" />
        <ul>
            <li><span class="h2">Name:</span> Simba</li>
            <li><span class="h2">Nickname:</span> Mr. Fluffy or Mr. Smiley (wait until you see him grin when you come home!)</li>
            <li><span class="h2">Gender:</span> Male</li>
            <li><span class="h2">Breed:</span> Pomeranian Mix</li>
            <li><span class="h2">Age:</span> 6 years</li>
            <li><span class="h2">Weight:</span> 12 pounds</li>
            <li><span class="h2">History:</span> Simba is originally from South Carolina. He tested positive for heart worm, and his foster parents could not afford to pay for the treatment. Simba traveled all the way to our rescue group where he successfully underwent intense treatment and is now heart worm free. Overall, Simba is a wonderful, loving dog. All he really needs is a blanket or pillow bed to sleep on, some stuffed animals toys, and daily walks right around 7:00pm (he will let you know when he is ready!) </li>
            <li><span class="h2">Socialization:</span> Simba gets along well with most other dogs, but he does best with dogs that are a similar size or small than he is. He adjusts to living with cats, but would prefer them not to be around!</li>
            <li><span class="h2">Special Needs:</span> Simba struggles with seizures; however, with proper medication, he has been seizure free for over a year.</li>
            <li><span class="h2">Adoption Fee:</span> $300</li>
        </ul>
    </div><!--end div dog_inner-->
</div><!--end div dog-->

<div id="cats">
    <div id="cats_inner">
        <h1>Featured Felines</h1>
        <img src="jake.png" alt="Jake, age 6yrs" />
        <ul>
            <li><span class="h2">Name:</span> Jake</li>
            <li><span class="h2">Nickname:</span> N/A</li>
            <li><span class="h2">Gender:</span> Male</li>
            <li><span class="h2">Breed:</span> Domestic Short Hair, Gray/White</li>
            <li><span class="h2">Age:</span> 6 years</li>
            <li><span class="h2">Weight:</span> 16 pounds</li>
            <li><span class="h2">History:</span> Jake was found with a lady who was selling him outside of Croppers Grocery Store. He was brought into the rescue looking for a more stable home. Jake is a loving cat that likes to cuddle and even sleep by your side at night. He also enjoys a good brushing. If you just show him the brush he will leap up on the table and meow in anticipation. Jake also enjoys some people food like chicken, so be sure to put your leftovers away! Jake has a lot of love to give and is anxiously awaiting a new forever home.</li>
            <li><span class="h2">Socialization:</span> Jake gets along well with both cats and dogs, but he is an instigator for trouble! He knows dogs don't much care for him, but he likes to lurk within sighting distance to show he is fearless. </li>
            <li><span class="h2">Special Needs:</span> Jake is an inside/outdoor cat. He needs a big yard (does not have to be fenced in) that is away from any major roads.</li>
            <li><span class="h2">Adoption Fee:</span> $200</li>
        </ul>
    </div><!--end div cat_inner-->
</div><!--end div cat-->

<div id="others">
    <div id="others_inner">
        <h1>Featured Others</h1>
        <img src="floppy.png" alt="Floppy, age 3yrs" />
        <ul>
            <li><span class="h2">Name:</span> Floppy</li>
            <li><span class="h2">Nickname:</span> N/A</li>
            <li><span class="h2">Gender:</span> Female</li>
            <li><span class="h2">Breed:</span> Lionhead</li>
            <li><span class="h2">Age:</span> 3 years</li>
            <li><span class="h2">Weight:</span> 4 pounds</li>
            <li><span class="h2">History:</span> Floppy and her siblings came from a hoarder in New Jersey who became quickly overwhelmed by the number of pets she had consumed. When Floppy came into our rescue she was in desperate need of a bath and nail clipping. After some cleaning up, Floppy was like a new rabbit and quickly nestled into his freshly layered cage. Her favorite snack is yogurt drops and will friend anyone who gives them to her! Floppy is looking for some one is ready and excited to love her. </li>
            <li><span class="h2">Socialization:</span> Floppy gets along very well with other rabbits. She grew up with two siblings who often shared a cage. She also pays little attention to other animals including dogs and cats. She adjusts well to be handled by people once she gets to know you.</li>
            <li><span class="h2">Special Needs:</span> Floppy is a great pet, but we would prefer she be handled by someone who has experience with rabbits.</li>
            <li><span class="h2">Adoption Fee:</span> $100</li>
        </ul>
    </div><!--end div other_inner-->
</div><!--end div other-->

    </div><!-- end div featured -->
</div> <!-- end div wrapper -->

<div class="wrapper">
<div id="footer">
    <div id="footer_inner">
        <p class="footer_location">1234 Forbes Avenue<br />
        Pittsburgh, PA 15213</p><!--end p footer_location-->

        <p class="footer_social">
        <a href="www.petfinder.com"><img src="finder.png" alt="See our animals on Petfinder" /></a>
        <a href="www.facebook.com"><img src="Facebook.png" alt="Friend us on Facebook" /></a>
        <a href="www.twitter.com"><img src="twitter.png" alt="Follow us on Twitter" /></a>
        <a href="www.youtube.com"><img src="youtube.png" alt="Visit Our YouTube Channel" /></a></p><!--end p footer_social-->

        <p class="footer_contact">Telephone: 512.341.8872<br />
        Email: <a href="mailto:paws+claws@gmail.com">paws+claws@gmail.com</a></p><!--end p footer_contact-->
    </div><!--end div footer_inner-->
</div><!--end div footer-->
</div> <!--end wrapper div -->

</body>
</html>

2 个答案:

答案 0 :(得分：1)

添加此内容 http://jsfiddle.net/nAQSv/1/ 

#featured {
background-color: #E0E6FF;
height: auto;
overflow: hidden;
}

答案 1 :(得分：1)

您的#dogs，＃cats等样式正在使用float: left属性，这使得容器元素不会展开以包含这些浮动元素。

一个常见的解决方案是在结尾使用相应样式为div的空clear: both。但更清晰，更好的解决方案是在#featured中设置overflow: auto属性，以扩展此div并完全按照您的要求进行操作。

相关问题
最新问题