Help - Add Borders

Help - Add Borders
0

#1

Tell us what’s happening:
I can’t solve the 2nd challenge. I think it’s a matter of placement or incorrect command. Exasperated over what I think should be very simple.
Thanks for your help!

https://learn.freecodecamp.org/responsive-web-design/basic-css/give-a-background-color-to-a-div-element

Your code so far

<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, monospace;
  }

  p {
    font-size: 16px;
    font-family: monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }

  .silver-background {
    background-color: silver;
  }
  </style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
  
  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
  
  <div>

    <div class="silver-background">

#2

The template code already included a div. You shouldn’t add another one.


#3

It seems there would be a need for encoding .silver-background?

It errors me if I leave only the line in div but it doesn’t matter where I put the .silver - it doesn’t satisfy #2.


#4

You forgot to close the div and the main tags, and you dont need another div with
.silver-background.


#5

hm, ok, I see the /div after the /ol and the /main right afterwards?


#6
  <div>

    <div class="silver-background">
 
   <p>Things cats love:</p>
    <ul>
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
    </ul>
    <p>Top 3 things cats hate:</p>
    <ol>
      <li>flea treatment</li>
      <li>thunder</li>
      <li>other cats</li>
    </ol>
  </div>
  </main>

#7

I solved it!
I added to style

div {

background-color: silver;
}
it worked!


#8

Out of curiosity, can you post your final code which passed the tests? I could not tell what all you changed with all the suggestions. I ask, because I have a suspicion that you got lucky instead of actually writing the code described in the instructions. Why? Because I found a bug in the tests.


#9
<style>
  
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, monospace;
  }

  p {
    font-size: 16px;
    font-family: monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }

  div {
    background-color: silver;
  }

</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
  
  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
  
  <div>
    <div class="silver-background">
    <p>Things cats love:</p>
    <ul>
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
    </ul>
    <p>Top 3 things cats hate:</p>
    <ol>
      <li>flea treatment</li>
      <li>thunder</li>
      <li>other cats</li>
    </ol>
  </div>

#10

Yes, that is what I thought. You actually got lucky to pass the tests, because your selector makes the background color of all div elements silver. If there would have been other div elements, it would have made their backgrounds silver also.

Another reason I say lucky is because it appears the test behind the scenes is not checking that you created a class named silver-background between the style tags.

What the challenge was expecting you to do was add the following between the <style> and </style> tags:

.silver-background {
background-color: silver;
}

and add the following to the existing div element:

<div class="silver-background">

You had the style part correct in your first post, but you had the extra div element which was what caused you to fail the tests.


#11

FYI - I just created the following github issue to prevent such code from incorrectly passing in the future.


#12

actually, I think that’s what I did to begin with and it didn’t pass (the second challenge)

Thanks so much for helping!


#13

You did part of that in the beginning but you had that extra div element which would not allow the tests to pass.