HTML Forum

**itzelm** · 08-08-2007, 12:58 PM

Ok, I'm baffled. I'm adding some "skip navigation" links to my site for accessiblity purposes. I'm adding the links to my Dreamweaver template. I have 4 links:

<a href="#main">Jump to main content</a>
<a href="#topnav">Jump to top navigation</a>
<a href="#mainnav">Jump to main navigation</a>
<a href="#sidenav">Jump to side navigation</a>

They all work except this one <a href="#mainnav">Jump to main navigation</a> I can't figure out what the hell is happening. Here is the code for the link that is it not working:

<body>
<div class="page-container-2">




skip navigation stuff goes here



top navigation stuff goes here


<div><img src="../img/banner copy.jpg" alt="logo and title. Collage of 4 photographs: trainers and trainees in class, lightbulb, open book and pen and students at a presentation." width="770" height="250" class="img-header"/></div>



<div class="nav2">
<p><a name="mainnav" id="mainnav"></a></p>

<ul>
<li><a href="../Policy/policy_home.html"><span>Policy </span></a></li>
<li><a href="../mmmm.html" class="selected"><span>LAWS</span></a></li>
</ul>
</div>

<div class="nav2secondary">
<ul>
<li><a href="../x" >xxx</a></li>
<li><a href="../sss.html" class="selected">xxx</a></li>

</ul>
</div>

Is the anchor not working because the <a> tag is preceded by a graphic? there is no problem with the spelling of the anchor. i don't know what the problem could be. HELP!

**AaronCross** · 01:05 PM

you may want to try changing the anchor tag name - it could be as simple as dreamweaver is confusing #main with #mainnav

oh ... just read the last line of your post, sounds like you already tried that...

**Angelosanto** · 08-08-2007, 01:14 PM

U got a link?

**LadynRed** · 08-08-2007, 02:17 PM

You also need to get rid of the <a name> - not necessary. Put the id on the <p> like so: <p id="mainnav">. Since it's just an anchor, no styles will be applied.

Need to see the live code

**itzelm** · 08-08-2007, 04:28 PM

Thanks guys.

None of the suggestions worked. My coworker looked at the code and could not figure it out either.

What do you mean with "see the live code"?

**Angelosanto** · 08-08-2007, 04:51 PM

She means send us a link dude!

**itzelm** · 08-08-2007, 05:00 PM

thanks angelosanto,

I'm a dudette. :-)

I don't have a link. The page is on my harddrive and posted on my agency's intranet. Cannot post on the internet.

**itzelm** · 08-08-2007, 05:55 PM

i see part of the problem but i can't find a suitable solution. if i enter some text for the hyperlink, thus making the div bigger, then the link works. Example: <p><a name="mainnav" id="mainnav"> main navigation</a></p>

If i take out the text "main navigation" then link does not work. i think the problem is that there is not enough space between the header graphic and the navigation div. for some reason, dreamweaver does not like me adding an anchor inside the nav 2 div. in fact, when i add the anchor, the 2px top padding (from css) does not become visible.

here is a copy of the style sheet for the navigation 2 div.

/*----------------------------*/
/* 2.4 - Navigation - Level 2 */
/*----------------------------*/
.nav2 {margin: 0px; padding: 2px 0 0 0; font-family: verdana, arial, "sans serif"; font-size: 0.83em; background-color:#FFFFFF;}
.nav2 ul {float: left; width: 770px; margin: 0px; padding: 0px; font-weight: bold;}
.nav2 li {display: inline; list-style: none; margin: 0; padding: 0px; background-color: rgb(130,162,182); }
.nav2 li a {
display: block;
float: left;
margin: 0px;
color: rgb(255,255,255);
text-transform: uppercase;
text-decoration: none;
font-size: 0.83em;
background:url(../img/tab-green-left2.gif) left top no-repeat;
background-color: rgb(130,162,162);

making the margin bigger in the css breaks up the page format plus does not make the anchor work.

in case you are wondering, the navigation i want to jump to has 2 tabs. clicking one shows the tab's submenu in horizontal format. See code below.

<body>
<div class="page-container-2">




skip navigation stuff goes here



top navigation stuff goes here


<div><img src="../img/banner copy.jpg" alt="logo and title. Collage of 4 photographs: trainers and trainees in class, lightbulb, open book and pen and students at a presentation." width="770" height="250" class="img-header"/></div>



<div class="nav2">
<p><a name="mainnav" id="mainnav"></a></p>

<ul>
<li><a href="../Policy/policy_home.html"><span>Policy </span></a></li>
<li><a href="../mmmm.html" class="selected"><span>LAWS</span></a></li>
</ul>
</div>

<div class="nav2secondary">
<ul>
<li><a href="../x" >xxx</a></li>
<li><a href="../sss.html" class="selected">xxx</a></li>

</ul>
</div>

**LadynRed** · 08-08-2007, 08:42 PM

Ok, here's another suggestion.
Because you're anchor is attached to an empty paragraph, there's nothing there to display - so your link doesn't work.

Try this:
You have <div class="nav2"> .. soo.. change the anchor to target that div so the tag would then become:
<div class="nav2" id="mainnav">
As I said previously, since "mainnav" is just an anchor, you shouldn't have any styles applied, but the anchor link going to <a href="#mainnav"> will work exactly the same way.