Tribute page problems with the :; img div

  • User Story #3: I should see a div element with a corresponding id="img-div" .

for this challenge i used

  div.img
{
  margin: 0px 20px;
    display: inline-block;
    text-decoration: none;
    color: white;
   width: 100%;
  height: auto;
  position: center;
    background-repeat: no-repeat;
  background-size: contain;
}  

coresponding with 

 <img id="image" a href="https://smg.photobucket.com/user/muyfeo/media/tesla.jpg.html" target="_blank"><img src="https://img.photobucket.com/albums/v219/muyfeo/tesla.jpg" border="0" alt="Nikola Tesla
around 1896"></a>

why doesn’t it pass and what am i doing wrong here?

https://codepen.io/maria-hoek/project/editor/AVPrnL#0

maybe is just typing issue there is a closed tag without the corresponding open …

2 Likes

There are a couple of problems. First, the user story says you should use a div element, so that should be the name of the tag (remember that tags are the things within <>). Secondly, the id you give to this element should be exactly the same as what they’ve asked for in the user story. Next, be careful how you use CSS selectors - if you write div.img it means you’ve selected a div element with the class ‘img’ (in HTML it would be something like <div class="img">...</div>) and there is no such element in your code. And finally, as @audiocl noticed, you’ve got a closing </a> tag without having the corresponding opening tag (I believe you’ve put it inside the first <img> tag, so take a closer look at your code and try to clean it up). Hope this helps and good luck! :slight_smile:

2 Likes

i am a new coder but i think “src” is missing on your img tag

here you must have a <div id="img-div"> with a closing tag </div>

secondly you have an a with in the img tag which is wrong remove that tag from image tag place it out side the img tag like this

<a href="https://smg.photobucket.com/user/muyfeo/media/tesla.jpg.html" target="_blank">
   <img id="image" src="https://img.photobucket.com/albums/v219/muyfeo/tesla.jpg" border="0" alt="Nikola Tesla around 1896" />
</a>

hope this will help you out you can reach my professional profile at https://www.fiverr.com/psdtohtmlpro1

1 Like

Yes for sure it helps allot I altered it right away :3

1 Like

Yes it does but its still difficult :3 not going to give up thou. This will succeed eventually. thanks so much

2 Likes

@KittyKora thanks for your valued comment please mark it as solution :slight_smile:

  1. text-style: is not a valid property name. You want font-weight: bold;.

  2. You have margine on a few selectors, it should be margin.

  3. To target the img element you need to use the img selector. If you want to scope it to the container you can use #img-div img

  4. You have background properties on the img element, they do not apply to img elements but images set using the background property. You have a few other properties that don’t really go on image elements.

Something like this should work for the image requirements

img {
  display: block;
  height: auto;
  max-width: 100%;
  margin: auto;
}
  1. I would suggest using/creating a normal pen and not a project (easier to work with and is not read-only for other people).

  2. You should add the test script to the page https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js. On a normal pen you can use the Settings button and go to the JavaScript tab, then paste in the script file link in one of the lower boxes.

1 Like