I am working on my HTML project , creating a Product Landing page.
But my navigation links are not taking me to their corresponding references. So far my code looks like this, https://codepen.io/kalium123/pen/abZrXBa
I haven’t yet started writing the CSS, so the design might look a bit rough, please tell me what I did wrong.
Have you fixed the issue? because it’s working perfectly with me
The links are all taking to the video section. Only one link is supposed to do that if you observe the code. When I click on ‘Contacts’, it must go to subscribe to us at the end of the page, and clicking on ‘About’ should take to the paragraph section. But it’s not happening with the code.
It’s because your page is short probably.
Is there anyway to fix this issue? I don’t want to add anymore content.
I use <br> to make an enter.
You mean to wrap around Input field ?
<body>
<header id="header">
<img id="header-img" src= "https://www.jbl.com/on/demandware.static/-/Sites-JB-US-Library/default/dw4c8d69e0/heros/m1500089_JBL---Headers_08_Home-Audio---Home-Theater.jpg" alt= "logo">
<nav id="nav-bar">
<div id="nav-links">
<a class = "nav-link" href="#Features">Features</a>
<a class = "nav-link" href="#Contacts">Contacts</a>
<a class = "nav-link" href="#About">About</a>
</div>
</nav>
</header>
<main>
<div class="container">
<h1>Unleash the Sound</h1>
<div id="About" class="links">
<h2 id="about"> <br><br>5.1 Digital Surround Sound Speakers</h2>
<p>Enjoy true Theatre Experience at your Home with our 5.1 surround sound system. Dolby at your door step.</p>
</div>
<div id="Features" class="links">
<iframe id="video" width="560"
height="315"
src="https://www.youtube.com/embed/N-wzvbaHnZw"
frameborder="0"
allow="autoplay"allowfullscreen></iframe>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<div id="Contacts" class="links">
<h2 id="subscribe">Subscribe to us</h2>
<form id ="form-details" action="https://www.freecodecamp.com/email-submit">
<input type="email" id="email" placeholder="Enter your E-mail" required>
<input type="submit" id="submit" value="Click here">
</form>
</div>
</main>
</div>
</body>
</html>
Why do you use that many br tags?
every time you use <br> it makes an new line.
Hmm. So it gives space and extends the page length. Thanks.
Sorry. But it didn’t solve the problem. The cursor is still not pointing at the right place. Now it’s taking to the gap between Video and Subscribe when I click Contacts. And Features is not taking to Video like it did before.
Hey @dreamo123!
what’s the problem?
Navigation links are not pointing to correct places.
Hey @dreamo123
I have a idea. Do you have content on hand ?
If you have, please update the pen.
Why i am saying means it will be easy to figure out the mistake as there is only a little content.
When I click on Features it takes me to the video(parent element div with id Features)
When I click on About, it takes me to the div#About, which contains h2 element(titled 5.1 Digital surround…)
When I click on Contact, it take me to the bottom of page.
What’s wrong there?
It’s not taking me. That’s the problem. I added br to the code. But still the problem is the same.
Are you facing issue with all three links?
Which browser are you using ?
No. Only with About and Contacts. Features is taking to the video. But now when i add br to solve the problem, even Features is not working properly.
Firefox. Latest version