HTML HTML Basics Going Further with HTML Linking to Sections of a Web Page

Umar Ijaz
seal-mask
.a{fill-rule:evenodd;}techdegree
Umar Ijaz
Full Stack JavaScript Techdegree Student 949 Points

"Read more" links in index.html take me to the article page (article.html) but NOT to VR Article section.

Hello All, I've set the id attribute to ' vr-article ' for <article> in article.html and added the corresponding ' #vr-article ' to the end of the file paths in the href attributes for both <a> around 'Read more' in index.html.

However, when I click on both of the Read more links in index.html the article.html page opens up in a different tab (as intended since the target attribute is set to _blank) BUT I am still at the top of the page in article.html and NOT in the VR Article part of the page.

The relevant part of my code in article.html is shown below: ...

<article id="vr-article"> <header> <h2>VR Article</h2> <p>By: Nick Pettit</p> <p>Published: June 19, 2017</p> </header> ...

The relevant part of my code in index.html is shown below: ...

<a href="Articles/2017/article.html#vr-article" target=_blank>Read more</a> <footer>Published: June 12, 2017</footer> ...

The article.html file is in the 2017 folder which itself is in a folder named Articles (with a capital A).

Any help would be appreciated. Thanks in advance.

4 Answers

Nebojsa Knjur
Nebojsa Knjur
681 Points

It is because Article page is not big enough, and your browser window is tall enough to show whole page without scrolling down. Resize browser window and try again.

Heidi Fryzell
seal-mask
MOD
.a{fill-rule:evenodd;}techdegree seal-36
Heidi Fryzell
Front End Web Development Treehouse Moderator 20,625 Points

Hello Umar,

I am not sure if this is the problem but one thing I am noticing in your code where you are saying "target=_blank"...

I believe you need to put the "_blank" in quotes like this.

<a href="Articles/2017/article.html#vr-article" target="_blank">Read more</a>

If this doesn't fix it, maybe you could take a snapshot of your code and paste the link in this thread. There is a camera icon in the top right corner of the workspace where you can generate a link to a workspace so others can check out your code.

Hope this helps. Happy Coding! Heidi

Umar Ijaz
seal-mask
.a{fill-rule:evenodd;}techdegree
Umar Ijaz
Full Stack JavaScript Techdegree Student 949 Points

Hello Heidi, Thanks for responding. I noticed this problem as well and fixed it, but it doesn't solve my original problem that I posted about above.

How do I share my code via the snapshot?? I was able to take a snapshot but don't know how I can share it.

Thanks for your help thus far.

Heidi Fryzell
seal-mask
MOD
.a{fill-rule:evenodd;}techdegree seal-36
Heidi Fryzell
Front End Web Development Treehouse Moderator 20,625 Points

Hi Umar,

After you take the snapshot, it should give you a link. That you can paste into your reply.

But I also have another idea. Try this instead:

<a href="Articles/2017/article.html/#vr-article" target="_blank">Read more</a>

I think you might need a "/" before the "#vr-aticle".

Hope this helps you solve it! Heidi