Adding Navigation Links to an existing markup

Get Started
1

I am in the process of building the BubbleUnder.com project in the SitePoint book “Build Your Own Website the Right Way” and I am having issues adding navigation links for new pages. Does anyone have any suggestions as to something that I may be forgetting to do that may cause the links to not work when trying to click on them from other pages. When I click on it, it doesnt make a sound or link back to the page. I know the markup on the page is correct as it looks the same as the others that work(the original three work). I have distributed the markup on all pages so the text for the link appears. Also, I have tried saving the new pages several times with .html on the end, without it, with .txt . I am obviosuly missing something and all suggestions are welcomed.

2

No worries, at least now you understand the difference between the file extensions and why you use something like: *.htm when saving.

3

I realized my issue and learned that I was not saving the files correctly. I thought you had to save a txt and html copy of each page. Oh well, live and learn. Thanks for your help! :smiley:

4

<div id=“navigation”>
<ul>
<li><a href=“index.html”>Home</a></li>
<li><a href=“about.html”>About Us</a></li>
<li><a href=“events.html”>Club Events</a></li>
<li><a href=“contact.html”>Contact Us</a></li>
<li><a href=“gallery.html”>Image Gallery</a></li>
</ul>
</div> <!-- end of navigation div –>

li {
font-size: small;
list-style-type: none;
}

a {
font-weight: bold;
}

a:link {
color: black;
}

a:visited {
color: navy;
}
a:hover {
text-decoration: none;
color: white;
background-color: navy;
}

a:active {
color:aqua;
background-color: navy;
}
color: black;
}

#navigation {
width: 180px;
border: 1px dotted navy;
background-color: #6699cc;
}

#navigation, #bodycontent, #header {
position: absolute;
}

#navigation, #bodycontent {
top: 6.54em;
}

#navigation {
width: 180px;
height: 484px;
background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat;
}

5

I hope this isn’t the exact content of one of your pages. If xhtmlcoder advice doesn’t help you, it’d be wise to copy and paste the actual content of one of your files here - and please use the [ html ] tags, that makes reading it so much easier.

The one thing I suspect is that you don’t save it properly and the file name is actually contact.html.txt due to Windows’ hiding the actual file extension in some cases (in the folder, select detailed view and make a screenshot).

6

What is the correct way to save a notepad file that you want to use in a navigation link in a site?

They are all saved in the same folder.

The file names I am using match the reference in the markup line.

7

could you share some of that markup, otherwise it’s just guesswork.

and if you do share it, enclose it with [ html ]

8

Well, going by what you have said your filenames or the paths to them are likely to be wrong. Without seeing an example it is too hard to tell (without the owning book itself I don’t know what it is asking for).

I doubt SP will give me another FREE book just to answer this question?

I presume the hyper-links are underlined in blue and when you hover the mouse over them you see text appear in your browser status bar like when you hover over my Signature which points to my old website?

With the links you have made do they correspond to files you have in your web directories like, for example: index.html ?
9

We didn’t really need the CSS and from that sample of HTML I cannot see anything wrong with the markup itself. Those links should work assuming the rest of the page is correct and you have the following files: index.html, about.html, events.html, contact.html and gallery.html in the correct place and they are *.html and not *.htm

I don’t fully understand your question regarding “navigation link” and file extension as that is only part (snippet) of the page code not a file itself.

Unless you have a live website I’d have to see the whole page (the rest of it) because there was absolutely nothing wrong with that brief of section HTML. There is something else going on I cannot see.

Just try this code copy-and-paste into a blank notepad file [DO NOT EDIT IT] and save it as ‘test.html’ in the same directory as the other files and if it doesn’t work we know your file names incorrect.

Save this code sample as: test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test File</title>
  </head>
   <body>
   <div id="navigation">
     <ul>
       <li><a href="index.html">Home</a></li>
       <li><a href="about.html">About Us</a></li>
       <li><a href="events.html">Club Events</a></li>
       <li><a href="contact.html">Contact Us</a></li>
       <li><a href="gallery.html">Image Gallery</a></li>
     </ul>
  </div>
</body>
</html>

Most perplexing… we shall endeavour.

Actually your CSS needs fixing (if you look below) but that shouldn’t cause the issue with the hyperlinks.

a:active {
color:aqua;
background-color: navy;
}
color: black;
}

So just try my ‘test.html’ file first.