Highlighted

Solution for anchor ties not working?

Community Beginner ,
Apr 29, 2018

Copy link to clipboard

Copied

Hello!

I am new to Dreamweaver and html code. I was writing code out for my website. My goal is to have a menu where you can click on the word and then it would shoot to that section of the page. I've done anchor ties in the past and haven't had any issues. No matter what I type in it does not zoom to that section of the page. Here is my html code and the "name" ties for the anchor:

<div id="nav-bar">

        <ul class="nav">

          <li> <a href="#about">About</a></li>

            <li><a href="#education">Education</a></li>

            <li><a href="#skills" >Skills</a></li>

            <li><a href="#experience">Experience</a></li>

            <li><a href="#contact">Contact</a></li>

         </ul>

    </div>

<div class="about"> <a name="about"><img src="ThesisWebsite/about.png" width="360" height="115.5" alt=""/></a></div>

Any help is appreciated! I am still pretty new so I am limited in what I can do. I can do html, Css and javascript, but nothing else at the moment. Thank you!

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

Usually, when something like what you've show us doesn't work (the snippet you've shared is coded correctly and should jump to the about id when the #about link is clicked), there is either not enough room beneath the destination to bring the linked-to section to the top, or you have multiple instances of the same id on the page and the browser is confused when you click because it has multiple possible destinations.

Run the validator at http://validator.w3.org/nu and make sure you don't have any major errors, including duplicate ids.

TOPICS
Create menus in Dreamweaver

Views

305

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Solution for anchor ties not working?

Community Beginner ,
Apr 29, 2018

Copy link to clipboard

Copied

Hello!

I am new to Dreamweaver and html code. I was writing code out for my website. My goal is to have a menu where you can click on the word and then it would shoot to that section of the page. I've done anchor ties in the past and haven't had any issues. No matter what I type in it does not zoom to that section of the page. Here is my html code and the "name" ties for the anchor:

<div id="nav-bar">

        <ul class="nav">

          <li> <a href="#about">About</a></li>

            <li><a href="#education">Education</a></li>

            <li><a href="#skills" >Skills</a></li>

            <li><a href="#experience">Experience</a></li>

            <li><a href="#contact">Contact</a></li>

         </ul>

    </div>

<div class="about"> <a name="about"><img src="ThesisWebsite/about.png" width="360" height="115.5" alt=""/></a></div>

Any help is appreciated! I am still pretty new so I am limited in what I can do. I can do html, Css and javascript, but nothing else at the moment. Thank you!

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

Usually, when something like what you've show us doesn't work (the snippet you've shared is coded correctly and should jump to the about id when the #about link is clicked), there is either not enough room beneath the destination to bring the linked-to section to the top, or you have multiple instances of the same id on the page and the browser is confused when you click because it has multiple possible destinations.

Run the validator at http://validator.w3.org/nu and make sure you don't have any major errors, including duplicate ids.

TOPICS
Create menus in Dreamweaver

Views

306

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 29, 2018 0
Adobe Community Professional ,
Apr 29, 2018

Copy link to clipboard

Copied

Named anchors are obsolete.    We use IDs now.

<a href="#about">Link to About</a>

<a href="#edu">Link to Education</a>

<a href="#skills>Link to Skills</a>

<section id="about">

This is the about section on the same page....

</section>

<section id="edu">

This is the edu section on the same page....

</section>

<section id="skills">

This is the skills section on the same page....

</section>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 29, 2018 1
Community Beginner ,
Apr 29, 2018

Copy link to clipboard

Copied

<div id="nav-bar">

        <ul class="nav">

          <li> <a href="#about">About</a></li>

            <li><a href="#education">Education</a></li>

            <li><a href="#skills" >Skills</a></li>

            <li><a href="#experience">Experience</a></li>

            <li><a href="#contact">Contact</a></li>

         </ul>

    </div>

<div class="about"><section id="about"> <img src="ThesisWebsite/about.png" width="360" height="115.5" alt=""/></section></div>

For some reason that still doesn't work...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 29, 2018 0
Adobe Community Professional ,
Apr 29, 2018

Copy link to clipboard

Copied

I guess there's more to this than you're showing us. 

See working demo below.  Click on top menu items to see it work.

Bootstrap Parallax Template

For best results, a long page of content with ample space between IDs is required.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 29, 2018 1
Adobe Community Professional ,
Apr 30, 2018

Copy link to clipboard

Copied

Usually, when something like what you've show us doesn't work (the snippet you've shared is coded correctly and should jump to the about id when the #about link is clicked), there is either not enough room beneath the destination to bring the linked-to section to the top, or you have multiple instances of the same id on the page and the browser is confused when you click because it has multiple possible destinations.

Run the validator at http://validator.w3.org/nu and make sure you don't have any major errors, including duplicate ids.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 30, 2018 1