2012-09-10 73 views
-6

我無法更改其中一個div的背景顏色。我想改變列(特色狗,特色貓,特色其他)的顏色#E0E6FF的背景。我嘗試在一個名爲特色的div中添加整個部分,並將背景顏色添加到該特效中,但不起作用。有什麼建議麼?更改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:[email protected]">[email protected]</a></p><!--end p footer_contact--> 
    </div><!--end div footer_inner--> 
</div><!--end div footer--> 
</div> <!--end wrapper div --> 

</body> 
</html> 
+6

請將您的代碼修剪到相關部分。 – Daedalus

回答

1

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

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

這只是改變了列的背景。我想改變整個div的背景,包括列背後的區域。 – user1657160

+0

@ user1657160,檢查我的答案。我編輯了 –

+3

@ user1657160如果這回答了您的問題,請upvote,然後單擊向上箭頭並在左側選中標記以「接受」答案。 –

1

你#dogs,#cats等方式使用float: left特性,這使得容器元素不會擴大到包含這些浮動元素。

一個常見的解決方案是在末尾使用一個空的div,對應樣式爲clear: both。但更清潔,更好的解決方案是在#featured中設置overflow: auto屬性,以擴展此div,並將完成您正在查找的內容。