Nest an Anchor Element Still Doesn't Work

Nest an Anchor Element Still Doesn't Work
0

#1

Tell us what’s happening:

Your code so far

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }
<p> View more 
<a href="http://freecatphotoapp.com">cat photos</a> 
</p>
  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;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<a href="http://www.freecatphotoapp.com">cat photos</a>

<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13) AppleWebKit/604.1.25 (KHTML, like Gecko) Version/11.0 Safari/604.1.25.

Link to the challenge:


#2

The instructions state:

Now nest your existing a element within a new p element (just after the existing h2 element) so that the surrounding paragraph says “View more cat photos”, but where only “cat photos” is a link, and the rest of the text is plain text.

While you successfully created the new p element with the existing a element within it, you did not put it after the existing h2 element. The instructions are referring to h2 element below the tag. You put it below the h2 selector in the <style>....</style> section.


#3

I put the code on line #1 and I am still getting an error on: Your a element should be nested within your new p element.

Aside from the code itself, is is possible that the computer is not allowing me to do all I need to do? I run macOS High Sierra beta 2 on a 2009 MacBook Pro, but can’t update even with a developer beta. I usually run Safari in a private window with my VPN on, but can turn it off. I have turned off an Adblocker for the site.


#4

Can you copy/paste all the code in the FCC editor into a reply? That will let me see exactly what you have.


#5
<p>View more <a href="http://freecatphotoapp.com">cat photos</a></p>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<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;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<a href="http://www.freecatphotoapp.com">cat photos</a>

<img class="smaller-image thick-green-border" src='//discourse-user-assets.s3.amazonaws.com/original/3X/6/1/61a3499c5abb165be990aa0c1abd23342e60c663.jpg' alt="A cute orange cat lying on its back. ">

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

#6

I do not see this line above wrapped in a p element. If you look back at what you originally posted here in the <style>...</style> section, you had the p element wrapping the a tag.


#7

I am intentionally taking out an > to show you the code:

  <p> View more <a href="http://freecatphotoapp.com">cat photos</a></p>

You might see View More Cat Photos in a previous text instead of the code. I know it is supposed to start

, but I didn’t know how to show you the one piece of code.

An acupuncturist friend who was a web developer said to put it after the h2 {} tag, but I still got errors. When I do it my way, with the line at the top, the only error is :“Your a element should be nested within your new p element.” Thanks again!


#8

If I place that top line anywhere below the top line, I get 2 checkmarks, and 3 middle errors, then 3 checkmarks


#9

I will check in tomorrow morning. I need to get up early. Take care and thanks again.


#10

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard.


An acupuncturist friend who was a web developer said to put it after the h2 {} tag, but I still got errors.

h2 { } is defining a style for a selector (h2 in this case). You need to move what you put at the very top of your code below the following line:

<h2 class="red-text">CatPhotoApp</h2>

That is what the instructions wanted you to do when they stated:

Now nest your existing a element within a new p element (just after the existing h2 element)


#11
</style>

<h2 class="red-text">CatPhotoApp</h2>
<p>View more <a href="http://freecatphotoapp.com">cat photos</a></p>
<a href="http://www.freecatphotoapp.com">cat photos</a>

I am still getting the same error. At least I know how to use the ``` now. I am concerned that I am gradually learning directions, but still having difficulty comprehending how to place code at the right place. 

Your code so far

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<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;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<a href="http://www.freecatphotoapp.com">cat photos</a>

<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13) AppleWebKit/604.1.25 (KHTML, like Gecko) Version/11.0 Safari/604.1.25.

Link to the challenge:


#12
I think my example came out incorrectly above, though I put it exactly where you said. Here's another try. 

</style>

<h2 class="red-text">CatPhotoApp</h2>

<a href="http://www.freecatphotoapp.com">cat photos</a><p> View more <a href="http://freecatphotoapp.com">cat photos</a> </p>

<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">


#13

I am not sure what else to tell you.

Below is the h2 element they want you to put your new p element below:

<h2 class="red-text">CatPhotoApp</h2>

The original a element was:

<a href="http://www.freecatphotoapp.com">cat photos</a>

So, they want you to nest the above a element within a new p element. Your last attempt above was the following:

<a href="http://www.freecatphotoapp.com">cat photos</a><p> View more <a href="http://freecatphotoapp.com">cat photos</a> </p>

All you needed to do was:

<p> View more <a href="http://www.freecatphotoapp.com">cat photos</a> </p>

#14
<p> View more <a href="http://www.freecatphotoapp.com">cat photos</a> </p>
and put it below <a href="http://www.freecatphotoapp.com">cat photos</a>. I still get the same error. I see the same code as you, except for some reason my last attempt you see is far different than what I have been doing on my end. I've been putting it just where you said, checking the code, but it's not marking it as correct. 

<a href="http://www.freecatphotoapp.com">cat photos</a><p> View more <a href="http://freecatphotoapp.com">cat photos</a> </p>

All you needed to do was:

<p> View more <a href= "http://www.freecatphotoapp.com">cat photos</a> </p>

Your code so far

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<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;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>
<p>View more <a href="http://freecatphotoapp.com">cat photos</a></p>
<a href="http://www.freecatphotoapp.com">cat photos</a>

<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p> When I tried this again, I tried Safari, not Firefox as marked. No Adblocker or VPN are on, and I didn't use  a private window. 

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:55.0) Gecko/20100101 Firefox/55.0.

Link to the challenge:


#15
Just for grins, I tried each of my different browsers and got the same result. What I see is this: </style>

<h2 class="red-text">CatPhotoApp</h2>
<p>View more <a href="http://freecatphotoapp.com">cat photos</a></p>
<a href="http://www.freecatphotoapp.com">cat photos</a>

Unless by some reason of my own physical or intellectual limitations, I thought that it was in the right place. Yet, I am still getting the 1 piece of the challenge wrong. Thanks again. 


#16

All you need is:

<h2 class="red-text">CatPhotoApp</h2>
<p>View more <a href="http://freecatphotoapp.com">cat photos</a></p>

You needed to replace original a element with p element that had the original a element nested inside.


#17

``
`It finally worked when I merely enclosed the one line instead of adding to it.
I did this

View more cat photos

, but had been adding it on top of cat photos or something to that effect. Now, onward and sideward! Thanks again!