CODEWITHSUNDEEP
htmlanchor
Liam J
Liam J

Reputation: 163

HTML Anchor ID not working

I'm making a quick site and all the content is on one page, and I'm using a small menu with anchor links to make navigating to a certain part faster for the end user. I have two anchor links that work fine (About Me, My Projects) but the "Contact Me" link jumps to a random part of the "My Projects" section.

A preview of the site is available here : http://dev.cuonic.com/cuonic.com/

I have checked the IDs, they correspond, there is no random "contact-me" ID lying around in the "My Projects" section, I've changed the ID, still happens, and this in both Firefox and Chrome. Whats going on ? Any help is appreciated :)

Upvotes: 1

Views: 5503

Answers (2)

redditor
redditor

Reputation: 4266

Change this section of code:

</div>
<span class="anchor" id="contact-me"></span>
<h1>Contact Me</h1>
<div class="text">

To this: 

</div>
<h1>Contact Me</h1>
<span class="anchor" id="contact-me"></span>
<div class="text">

Upvotes: 0

Ben Harold
Ben Harold

Reputation: 6432

All of then content within //*[@id="content"]/div[2] is floated to the left. Floating elements don't affect the height of their containing block-level elements. If you add this:

#contact-me { clear:both; }

to your CSS somewhere, the <span id="contact-me"> tag will reposition to where you actually want it. Your page still isn't long enough for the contact form to go all the way to the top (at least on my monitor), but it will still scroll to the end of the page.

Upvotes: 3

Related Questions