Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13

Thread: Anchor Links?

  1. #1
    New Coder
    Join Date
    Dec 2008
    Posts
    28
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Anchor Links?

    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:
    Code:
    <!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>&nbsp;</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:
    Code:
    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.

    Thanks in advance!

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Dec 2008
    Posts
    28
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    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)

  • #4
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    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>
    Last edited by Lerura; 09-02-2010 at 03:31 AM.

  • #5
    New Coder
    Join Date
    Dec 2008
    Posts
    28
    Thanks
    4
    Thanked 0 Times in 0 Posts
    lerura, I had tried that initially and couldn't get it working. I edited the file again (can be seen here) and still doesn't seem to work. I'm probably making a really stupid mistake.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by lerura View Post
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    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>.

    Quote Originally Posted by _Aerospace_Eng_ View Post
    No. It can be on other elements
    What I meant was, that it will not work as an "#"-anchor if applied elsewhere
    Last edited by Lerura; 09-02-2010 at 05:10 AM.

  • #8
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    845
    Thanks
    11
    Thanked 79 Times in 77 Posts
    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....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>
    ☠ ☠RON☠ ☠

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #10
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    Quote Originally Posted by Major Payne View Post
    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:
    Code:
    <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".
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #11
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    845
    Thanks
    11
    Thanked 79 Times in 77 Posts
    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.
    ☠ ☠RON☠ ☠

  • #12
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,879
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    Quote Originally Posted by Major Payne View Post
    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.:
    Code:
    …
    <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:
    Code:
    …
    <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>
    …

  • #13
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    845
    Thanks
    11
    Thanked 79 Times in 77 Posts
    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.
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •