CODEWITHSUNDEEP
html
Rudy Sanchez
Rudy Sanchez

Reputation: 37

Linking between a navigation list and headings

I'm having trouble linking from some nav lists to some h2 headings.

When I click the navigation bar in my document, I want it to jump down to the correct heading in the page. Here's my code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Wisconsin Colleges and Universities</title>
    <script src="modernizr-1.5.js"></script>
    <link href="hestyles.css" rel="stylesheet" type="text/css" />
    <base href="url" target="collegeWin"/>
  </head>

   <body>

      <header>
         <img src="highered.jpg" alt="Higher Education" />
      </header>

      <section> 

         <h1>Wisconsin Colleges and Universities</h1>

         <nav>
            <ul>
               <li><a href="#private">Private Colleges and Universities</a></li>
               <li><a href="#technical">Technical College System</a></li>
               <li><a>University of Wisconsin System</a></li>
            </ul>
         </nav>

         <h2 id="private">Private Colleges and Universities</h2>
         <ul>
            <li><a href="http://www.alverno.edu">Alverno College</a></li>
            <!-- ... -->
            <li><a href="http://www.wlc.edu">Wisconsin Lutheran College</a></li>
         </ul>

         <h2 id="technical">Technical College System</h2>
         <ul>
            <li><a href="http://www.blackhawk.edu">Blackhawk Technical College</a></li>
            <!-- ... -->
            <li><a href="http://www.witc.edu">Wisconsin Indianhead Technical College</a></li>
         </ul>

         <h2 id="public">University of Wisconsin System</h2>
         <ul>
            <li><a href="http://www.uwgb.edu">UW-Green Bay</a></li>
            <!-- ... -->
            <li><a href="http://www.uww.edu">UW-Whitewater</a></li>
         </ul>

         <footer>
            Higher &#9830; Ed: The Directory of Higher Education Opportunities
         </footer>
      </section>
   </body>
</html>

As you can see, I've put IDs on the h2 headers and I try linking to them using #-prefixed fragment IDs. But for some reason I'm getting an error message stating "Cannot find. make sure the path or Internet address is correct."

Upvotes: 1

Views: 3773

Answers (2)

chnshnk
chnshnk

Reputation: 1

Try like this

 <li><a href="#private" target="_self">Private Colleges and Universities</a></li>
 <li><a href="#technical" target="_self">Technical College System</a></li>
 <li><a href="#public" target="_self">University of Wisconsin System</a></li>
 </ul>

Upvotes: 0

Thierry
Thierry

Reputation: 5233

This is because you have a tag base. Remove it and it'll work. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

Upvotes: 2

Related Questions