Anchor Links?

EricaL

09-01-2010, 11:28 PM

Hi all,

I'm working on my portfolio and can't seem to get my navigation working. They're anchor links to different divs on my page and I really am not sure why they don't work. Below is the HTML and CSS.

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EricaFTW</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type="text/javascript" src="js/scroll.js"></script>
<script type="text/javascript" src="js/lavalamp.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>
<script type="text/javascript" src="js/ddaccordion.js"></script>
<script type="text/javascript" src="js/accordion.js"></script>
</head>

<body>

<div id="container">

<div id="header">

<a href="index.php"><span id="logo"></span></a>

<div id="navigation">
<ul class="lavaLamp">
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>

<div id="wrapper">
<div id="about">
<p><a name="about">Hello, I'm Erica. I reside in Toronto, Canada. I write, design, develop, and live life to the fullest. <span class="toggle" style="color: #729799; cursor: pointer;">Learn more?</span></a></p>
<div class="more"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet nulla fringilla nisi scelerisque tempor. Aenean diam quam, convallis vitae commodo id, volutpat ut enim. Nulla mattis arcu non nisi aliquam at rhoncus libero dignissim. Etiam tincidunt venenatis tellus, eu ornare felis consectetur ut. Sed tempor velit eu turpis sagittis et elementum lectus imperdiet. Nullam lacinia purus ut felis ullamcorper porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam at nunc quam, et interdum sem. In ultricies vehicula sagittis. Mauris nunc risus, pulvinar id lacinia a, dictum quis dolor. Phasellus sodales egestas posuere. Mauris orci mi, mollis sed vehicula vitae, dapibus id dolor. Vestibulum commodo condimentum leo, et fringilla sapien pellentesque et. Curabitur lectus nisi, dictum id bibendum quis, consectetur sed enim.</p></div>
</div>
</div>

</div>

<div id="portfolio">
<a name="portfolio"><img src="images/portfolio_header.png" alt="" border="0" /></a>
<br /><br />
<table id="work">
<tr>
<td><a href="http://www.shrednews.com/high-places-cd-rev/" target="_blank"><span id="shred1"></span></a></td>
<td><a href="#"><span id="colin"></span></a></td>
</tr>
<tr>
<td><a href="http://www.shrednews.com/tegan-and-sara-alligator/" target="_blank"><span id="shred3"></span></a></td>
<td><a href="http://ericaftw.com/v3/writing/paramore.html" target="_blank"><span id="mm1"></span></a></td>
</tr>
<tr>
<td><a href="http://ericaftw.com/v3/writing/2012.html" target="_blank"><span id="mm2"></span></a></td>
<td><a href="http://www.shrednews.com/reverie-sound-revue/" target="_blank"><span id="shred2"></span></a></td>
</tr>
<tr>
<td><a href="#"><span id="site1"></span></a></td>
<td><a href="#"><span id="vinyl"></span></a></td>

</tr>
</table>
</div>

<div id="footer">
<a name="contact"><img src="images/contact_header.png" alt="" border="0" /></a>
<br /><br /><br />
<div id="form">
<form method="POST" action="mailer.php">
Name:<br /><input type="text" size="12" maxlength="20" name="name" class="input1"><br /><br />
E-mail:<br /><input type="text" size="12" maxlength="30" name="email" class="input1"><br /><br />
Message:<br /><textarea rows="9" cols="30" name="message" wrap="physical" class="input2"></textarea><br /><br />
<input type="submit" value="Submit" name="submit">
</form>
</div>
<div id="right">
<div id="twitter">
<div id="twitter_div">
<ul id="twitter_update_list">
<li> </li>
</ul>
</div>
</div>
<div id="links">
<table align="center">
<tr>
<td><a href="http://www.facebook.com/ericalenti"><img src="images/social/facebook.png" border="0" alt="" /></a> Facebook</td>
<td><a href="http://www.ericaftw.tumblr.com"><img src="images/social/tumblr.png" border="0" alt="" /></a> Tumblr</td>
</tr>
<tr>
<td><a href="mailto:ericalenti@gmail.com"><img src="images/social/gmail.png" border="0" alt="" /></a> Gmail</td>
<td><a href="http://www.twitter.com/ericaftw"><img src="images/social/twitter.png" border="0" alt="" /></a> Twitter</td>
</tr>
<tr>
<td><a href="http://www.lastfm.com/users/ericaftw"><img src="images/social/lastfm.png" border="0" alt="" /></a> last.fm</td>
<td><a href="http://www.vimeo.com/user3892009"><img src="images/social/vimeo.png" border="0" alt="" /></a> Vimeo</td>
</tr>
<tr>
<td><a href="http://www.myspace.com/junkie87"><img src="images/social/myspace.png" border="0" alt="" /></a> Myspace</td>
<td><a href="http://www.youtube.com/user/ericaftw"><img src="images/social/youtube.png" border="0" alt="" /></a> Youtube</td>
</tr>
</table>
</div>
</div>
</div>

<div id="copyright"></div>

</div>

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/ericaftw.json?callback=twitterCallback2&count=1"></script>

</body>

</html>

CSS:
html {
width: 100%;
height: 100%;
}

body {
background: #274E61;
font-family: Helvetica, Arial, sans-serif;
margin: 0;
}

#container {
}

#header {
background: url('../images/header.png') repeat-x;
border-top: solid #729799 8px;
width: 100%;
min-height: 385px;
height: 100%;
}

#logo {
float: left;
margin-left: 50px;
margin-top: 25px;
height: 69px;
width: 156px;
overflow: hidden;
background: url('../images/logo.png') top left no-repeat;
display: block;
}

#logo:hover {
background-position: bottom left;
}

.lavaLamp {
position: relative;
float: right;
margin-top: 50px;
width: 325px;
height: 51px;
overflow: hidden;
}

.lavaLamp li {
float: left;
list-style: none;
margin: 0;
padding: 0;
}

.lavaLamp li a {
position: relative;
overflow: hidden;
text-decoration: none;
font-size: 18px;
color: #fff;
text-align: center;
z-index: 10;
letter-spacing: 0;
float: left;
display: block;
height: 31px;
margin: 6.5px 10px;
}

.lavaLamp li.back {
background: url("../images/rollover.png") no-repeat right;
width: 10px; height: 31px;
z-index: 8;
position: absolute;
}

.lavaLamp li.back .left {
background: url("../images/rollover.png") no-repeat top left;
height: 31px;
margin-right: 10px;
}

#about {
position: relative;
margin: 140px auto;
width: 1000px;
font-size: 48px;
line-height: 54px;
font-weight: bold;
color: #fff;
}

#wrapper {
margin-left: auto;
margin-right: auto;
}

.more {
width: 900px;
height: 100%;
font-size: 18px;
font-weight: 100;
color: #000;
line-height: 30px;
padding: 0 15px;
margin-top: -25px;
margin-bottom: 0;
}

#portfolio {
margin-top: -25px;
margin-left: auto;
margin-right: auto;
width: 1000px;
}

#work {
margin-left: auto;
margin-right: auto;
}

#work td {
padding: 15px;
}

#shred1 {
height: 169px;
width: 322px;
overflow: hidden;
background: url('../images/portfolio/shred1.png') top left no-repeat;
display: block;
border: 3px solid #729799;
}

#shred1:hover {
background-position: bottom left;
border: 3px solid #FFF;
}

#colin {
height: 169px;
width: 322px;
overflow: hidden;
background: url('../images/portfolio/colin.png') top left no-repeat;
display: block;
border: 3px solid #729799;
}

#colin:hover {
background-position: bottom left;
border: 3px solid #FFF;
}

#shred2 {
height: 169px;
width: 322px;
overflow: hidden;
background: url('../images/portfolio/shred2.png') top left no-repeat;
display: block;
border: 3px solid #729799;
}

#shred2:hover {
background-position: bottom left;
border: 3px solid #FFF;
}

#shred3 {
height: 169px;
width: 322px;
overflow: hidden;
background: url('../images/portfolio/shred3.png') top left no-repeat;
display: block;
border: 3px solid #729799;
}

#shred3:hover {
background-position: bottom left;
border: 3px solid #FFF;
}

#mm1 {
height: 169px;
width: 322px;
overflow: hidden;
background: url('../images/portfolio/mm1.png') top left no-repeat;
display: block;
border: 3px solid #729799;
}

#mm1:hover {
background-position: bottom left;
border: 3px solid #FFF;
}

#mm2 {
height: 169px;
width: 322px;
overflow: hidden;
background: url('../images/portfolio/mm2.png') top left no-repeat;
display: block;
border: 3px solid #729799;
}

#mm2:hover {
background-position: bottom left;
border: 3px solid #FFF;
}

#site1 {
height: 169px;
width: 322px;
overflow: hidden;
background: url('../images/portfolio/site1.png') top left no-repeat;
display: block;
border: 3px solid #729799;
}

#site1:hover {
background-position: bottom left;
border: 3px solid #FFF;
}

#vinyl {
height: 169px;
width: 322px;
overflow: hidden;
background: url('../images/portfolio/vinyl.png') top left no-repeat;
display: block;
border: 3px solid #729799;
}

#vinyl:hover {
background-position: bottom left;
border: 3px solid #FFF;
}

#footer {
margin-left: auto;
margin-right: auto;
width: 1000px;
margin-top: 50px;
}

#form {
float: left;
margin-left: 50px;
}

.input1 {
width: 288px;
height: 37px;
background: url('../images/contact/form_input1.png') no-repeat;
padding: 8px;
color: #717f80;
border: 0;
font-size: 16px;
}

.input2 {
background: url('../images/contact/form_input2.png') no-repeat;
padding: 12px;
color: #717f80;
border: 0;
font-size: 16px;
font-family: Helvetica;
}

#right {
position: relative;
margin-left: 425px;
}

#twitter {
width: 399px;
height: 161px;
background: url('../images/twitter.png') no-repeat;
}

#twitter_update_list {
padding: 25px 20px;
color: #000;
list-style: none;
}

#twitter_update_list a {
text-decoration: none;
font-style: oblique;
color: #717f80;
}

#copyright {
background: #36484c url('../images/footer_bg.png') repeat-x;
height: 100px;
position: relative;
margin-top: 12px;
clear: both;
}

#links {
width: 399px;
height: 192px;
background: url('../images/links_bg.png') no-repeat;
margin: 14px 0;
font-weight: bold;
}

#links table {
margin: 2px 50px;
}

#links td {
color: #717f80;
padding: 8px 20px;
width: 168px;
}

The live view can be found here (http://ericaftw.com/update).

Thanks in advance!

_Aerospace_Eng_

09-02-2010, 12:12 AM

You can't have both an id and name that are in different elements. IDs are supposed to be unique but when you use the name in another element it no longer is unique.

EricaL

09-02-2010, 01:30 AM

You can't have both an id and name that are in different elements. IDs are supposed to be unique but when you use the name in another element it no longer is unique.

Ah, well that was a careless mistake. I fixed it, but still can't seem to get the anchor links working. Any idea why? (Updated link here (http://ericaftw.com/update))

Lerura

09-02-2010, 02:28 AM

EricaL

09-02-2010, 02:58 AM

lerura, I had tried that initially and couldn't get it working. I edited the file again (can be seen here (http://ericaftw.com/update)) and still doesn't seem to work. I'm probably making a really stupid mistake.

_Aerospace_Eng_

09-02-2010, 03:25 AM

you need to add the tag <a name="about"> in the place where you want the page to scrool to.

it will NOT work if the name is applied to any other tagtype e.g.
<div name="about">, or if it is a dublicate name.

And you do not even have that.
There is nowhere on your page, an element named "about"

you can combine it with an ordinary link:
<a name="about" href="somewhere">click here</a>
No. It can be on other elements but you should be using IDs instead. I just went to the site you gave us and it works fine. Make sure you don't have a cached version.

Lerura

09-02-2010, 03:58 AM

the problem is that you have an </a> to the anchors.

<a href="> is a link and therefore requires </a>
<a name=" href="> is also a link that requires </a> but with an anchor.
<a name=""> is NOT a link but only an anchor, and since it is not a link it can have NO </a>.

I can see that it is confusing that both anchors and links is <a>.

No. It can be on other elements

What I meant was, that it will not work as an "#"-anchor if applied elsewhere

Major Payne

09-02-2010, 06:42 AM

Named Anchors:

Those are called named anchors. Scroll down to the title "The name Attribute" for good examples: http://www.w3schools.com/HTML/html_links.asp

You can edit and try your own code out online here: http://www.w3schools.com/HTML/tryit.asp?filename=tryhtml_link_locations

Examples:

10 Linking from a section on one web page to a section on another web page:

Using an image as the link:

<div><a href="http://your_site.com/html_links.htm#animals"><img style="width: XXpx; height: YYpx; border: 0;" src="Path to image" alt="Text Description"></a></div>

Text Link:

<div><a href="http://your_site.com/html_links.htm#animals">Visit My Animals Photos</a></div>

Target Text Link on External Page:

<div><a name="animals">My Animals Photos</a></div>

abduraooft

09-02-2010, 07:21 AM

Although it's called as "named anchors", the use of name attribute to make such anchors is deprecated (and in fact the name attribute is valid on a very limited number of tags like form input elements).

Read http://www.w3.org/TR/html401/struct/links.html#h-12.2.3, especially the "ILLEGAL EXAMPLE" given.

Donkey

09-02-2010, 11:03 AM

Named Anchors:

<div><a name="animals">My Animals Photos</a></div>

As aerospace and abduraooft have said the above uses depreciated code, the correct way to write it now is:
<div id="animals>My Animals Photos</div> BTW unless all your photos feature several animals, or are photos of the 60s rock band "the animals", that should read "My Animal Photos".

Major Payne

09-02-2010, 01:32 PM

VIPStephan

09-02-2010, 03:42 PM

I have yet had the validator flag that with an XHTML 1.0 doctype. The whole matter of writing it is to pay attention to what is being used. I use XHTML and my codes use name="" in the named anchors. No problem with the validator.

Yeah, if you’re using a transitional doctype (which you shouldn’t anyway unless you’re transitioning a document from old, non-standard code to standards compliant code) this error will be forgiven but in strict HTML 4.01 and XHTML 1, and I suppose also in yet-to-become-official HTML 5 the name attribute is invalid if used on any element other than form controls. After all, there’s no need to use that attribute anyway since ID does the job just fine (and has much more use, additionally).

If you want the link to go to a certain section on the page you’d write, e. g.:

…
<a href="#section">link to section</a>
<hr />
<p>a paragraph of text</p>
<div id="section">
<h2>Headline</h2>
<p>another paragraph</p>
</div>
…

But you can also link to certain words in a document like:

…
<a href="#word">link to word</a>
<hr />
<p>a paragraph of text</p>
<div>
<h2>Headline</h2>
<p>another paragraph with <a id="word">more text</a> and anchor</p>
</div>
…

Major Payne

09-03-2010, 02:40 AM

I use XHTML 1.0 Stict and since the validator isn't flagging the name="" attributes in the named anchor tags, there's no need to change them. Also, there's no need to re-code to HTML 5 if you originally have pages using XHTML 1.0.