Anchor not working

**SiberianHuskey** · Feb 23, 2010 09:46

I'd like to know why this code:

is not working, as seen on this <snip /> It's in the right place where I want it, but it's not working when you hover over ?

**RetroNetro** · Feb 23, 2010 09:57

Anchor:

Code HTML4Strict:

<a id="masterhome"></a>

Link:

Code HTML4Strict:

<a href="#masterhome" title="This links to another part of this webpage">Link</a>

**SiberianHuskey** · Feb 23, 2010 10:11

I replace my line of code with which, I'm a little confused ?

**SiberianHuskey** · Feb 23, 2010 10:20

I updated not working.

**RetroNetro** · Feb 23, 2010 10:21

The anchor goes where you want the page to goto when the link is clicked, the link goes where you want the link to be.

**winwinmantra** · Feb 23, 2010 10:22

First thing, there is no content in the anchor tag. That may be the reason you are feeling anchor is not working.

Assuming that you have place any image in the class used in the div, try to replace your code with this:

<a href="#"><div id="masterhome"></div></a>

Hope it may work.

**SiberianHuskey** · Feb 23, 2010 10:26

WinWin - That worked

Thank you both

I see you placed the anchor before the ID

**RetroNetro** · Feb 23, 2010 10:39

I do not think you can put a <div> inside an <a> tag:

Code HTML4Strict:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>anchor example</title>
 
<style type="text/css">
p.link{margin-bottom:1000px}
</style>
 
</head>
<body>
 
<p class="link"><a href="#masterhome" title="This links to another part of this webpage">Link</a></p>
<p id="masterhome">This is the anchor.</p>
 
 </body>
</html>

**kohoutek** · Feb 23, 2010 10:41

The code winwinmantra provided isn't correct. A block-level element cannot be wrapped into an inline element.

The code BPartch provided is correct.

Or, if you need the div, then you can do this:

<div id="masterhome"><a href="myhomepage.html" title="my title">My Link</a></div>

What you currently have is wrong, missing the opening div tag, and not targeting the #masterhome ID.

Code:

<a="#masterhome" title="This links to another part of this webpage"></a></div>

You're not linking to anything in the above nor are you referencing the ID Of "masterhome".
So, either this:

Code:

<div id="masterhome"><a href="myhomepage.html" title="my title">My Link</a></div>

Or this:

Code:

<a id="masterhome" href="myhomepage.html" title="my title">My Link</a>

**SiberianHuskey** · Feb 23, 2010 10:58

Both of those methods don't work as WinWin Method does. I see what you mean that it doesn't validate, I've tried switching it around but continues to not validate. I want it in the ID otherwise I can't position it to be placed over the image, as I want the method given probably validate but don't position it's self as WinWin method does, argh !

**kohoutek** · Feb 23, 2010 11:09

You need to tell us what you're looking to do. Whatever it is, I can assure you there's a valid way of doing things.

**winwinmantra** · Feb 23, 2010 11:12

Try this. This is another alternative. I checked in Chrome. It worked.
---------------------------

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style>
#masterhome
{
background-image:url(http://www.sitepoint.com/forums/imag...mberpip2.gif);
width:183px;height:88px;display:block;
}
</style>
</head>

<body>
<a href="#" id="masterhome" ></a>
</body>
</html>

**Paul O'B** · Feb 23, 2010 11:26

Hi,

You must pay attention to what everyone is saying and look at your code carefully.

(and validate often)

In your page you have these 2 invalid sections of html.

Code:

 <a href="#"><div id="masterhome"></div></a>
 <div id="masterhome"><a href="#"</a></div>

Both are invalid.

In the first the anchor cannot surround a div as already mentioned and must be inside.

In the second you have missed a closing bracket on the anchor.

Change the code to this:

Code:

 <div id="masterhome"><a href="#"></a></div>

Then size the anchor to match the parent using display:block and width and height as follows:

Code:

#masterhome {
    position: relative;
    top: 50px;
    left: 85px;
    width: 125px;
    height: 125px;
}
#masterhome a{
    display:block;
    width:125px;
    height:125px;
    background:red;/* just for testing*/
}

I also note that you still have not added the missing closing div for #wrap which means that the footer is still sitting inside the wrong element and is still misplaced.

I have told you to change this at least 5 times now with multiple examples and correct code yet you still have not changed it. If you do not understand then then that's fine but I have given you exact code a number of times and you only needed to cut and paste.

**Paul O'B** · Feb 23, 2010 11:28

Originally Posted by winwinmantra

Try this. This is another alternative. I checked in Chrome. It worked.
---------------------------

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style>
#masterhome
{
background-image:url(http://www.sitepoint.com/forums/images/common/ranks/memberpip2.gif);
width:183px;height:88px;display:block;
}
</style>
</head>

<body>
<a href="#" id="masterhome" ></a>
</body>
</html>

That would work but would be semantically incorrect to have an inline element as a direct child of the body (and would be invalid because a strict doctype is being used).

**Victorinox** · Feb 23, 2010 11:43

I'm not going to hold my breath here, but could we please see a mockup of your design? This will help both in finding a suitable approach to your current problem and preempting those which may arise in future.

**SiberianHuskey** · Feb 23, 2010 18:12

Paul & etc, I've fixed some of the errors so it should become clearer at this point, as well as the validation is still giving errors on the masterhome-ID and I've tried all your methods and the errors still arise.

**RetroNetro** · Feb 23, 2010 18:29

Can you post a link to the test page you are working on?

**Victorinox** · Feb 23, 2010 19:06

Past form would suggest that the test page is the one linked in the first post, but that the OP is working on a local copy and not updating the online version.

When being assisted online it tends to make life easier to edit the online version directly.

**SiberianHuskey** · Feb 23, 2010 19:39

Everything is up to date online. I've had to do some adjusting if you validate you'll see the error as well my sidebar has positioned it self incorrectly, Paul ?

**SiberianHuskey** · Feb 23, 2010 20:27

I have also done another change and I'd like to know how can I position the ID-SearchBox so that it's below the words home/about me/ etc. I don't know what method I should use to position it ?

**RetroNetro** · Feb 23, 2010 21:24

The validation errors are simple. One is for the top line here:

Code HTML4Strict:

<a href="#"><div id="masterhome"></div></a>
<a href="#" id="masterhome" ></a>

It is invalid, you cannot nest a block level element in an inline element. Delete it. This will also take care of the other 2 errors as they are saying that you have defined the same ID 2 times.

Now let me ask what is your goal with this anchor? Where do you want the link to go within the file and where do you want the click-able link text/image to be? Is this so you can return to the top once the user has scrolled to the bottom?

The sidebar dropping below the left column is due to it being too wide it looks like, I would have to investigate that further to be sure.

**RyanReese** · Feb 23, 2010 21:58

Yup not nearly enough width

. You can set "#content" to 307px and then lower "#sidebar" to 207px to get it working.

Your columns are awfully small in width though

**Paul O'B** · Feb 24, 2010 04:02

Originally Posted by SiberianHuskey

Paul & etc, I've fixed some of the errors so it should become clearer at this point, as well as the validation is still giving errors on the masterhome-ID and I've tried all your methods and the errors still arise.

No You haven't

I gave you the answer in post #13 but you still have not changed your html. Please refer to post #13 and make those changes.

**Paul O'B** · Feb 24, 2010 04:26

Ok - You finally added the closing div for #wrap but you did not move the footer base to the correct place and it is still misplaced. I've shown you a number of times now - I've lost count.

Why have you also removed the clearfix code? Was there a reason that you did that?
The floats will not be cleared when you move that footer base element to the correct place and your background will disappear.

Lastly you have increased the widths of your columns but not increased the parent to compensate.

Here is one last attempt.

The code is valid and all elements are placed correctly (or as correct as I can tell from what you have asked) .

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Page Title</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- Meta -->
<meta name="description" content="#">
<meta name="keywords" content="#">
<!-- CSS -->
<link href="http://www.thecreativesheep.ca/pagehome/reset.css" rel="stylesheet" media="screen, projection" type="text/css">
<link href="main.css" rel="stylesheet" media="screen, projection" type="text/css">
<style type="text/css">
body {
    line-height:1.2;
    background:#afabac url(http://www.thecreativesheep.ca/pagehome/images/bg.gif) repeat-x 0 0;
    font-size:13px;
    font-family:Arial, Helvetica, sans-serif;
    color:#333;
    text-align:center;
    padding:25px 0 20px;
}
#wrap {
    width:800px;
    margin:auto;
    text-align:left;
}
#maincol {
    width:800;
    background: url(http://www.thecreativesheep.ca/pagehome/images/middle.gif) repeat-y 4px -200px;
}
#content {
    width:370px;
    padding:1px 10px 1px 60px;
    text-align:left;
    min-height:400px;
    float:left;
}
* html #content {
    height:400px
}
#content p {
    margin:0 0 1em;
    line-height:1.5;
}
.content_boxes {
    background-color: #0000CC;
    width: 300px;
    overflow: hidden;
}
.top, .base {
    background:url(http://www.thecreativesheep.ca/pagehome/images/top.gif) no-repeat 0 0;
    clear:both;
    width:520px;
    height:23px;
}
.base {
    background:url(http://www.thecreativesheep.ca/pagehome/images/base.gif) no-repeat 0 0;
    clear:both;
    width:525px;
    height:28px;
    margin:0 0 0 20px
}
.bg_sidebar {
    background-color: #3300FF;
    height: 250px;
    margin: 120px 0 0;
    width: 200px;
}
#sidebar {
    float: right;
    background:#f2f2f2;
    width:358px;
    margin-top:27px 0 0;
    background-color: #99FF00;
}
#header {
    width:528px;
    height:236px;
    background:url(http://www.thecreativesheep.ca/pagehome/images/header_02.jpg) no-repeat 3px 0;
    position:relative;
}
#masterhome {
    position: relative;
    top: 60px;
    left: 85px;
    width: 125px;
    height: 125px;
}
#masterhome a {
    display:block;
    width:125px;
    height:125px;
    background:red;/* just for testing*/
}
ul#nav {
    position:absolute;
    top:180px;
    left:225px;
    margin:0;
    z-index:75;
}
#searchbox {
    background-color: #FF0033;
    height: 17px;
    width: 187px;
    z-index: 99;
    float:right;
    margin:85px 70px 0 0;
    display:inline;
    clear:both;
}
#nav li, #nav li a {
    width:60px;
    height:25px;
    float:left;
    position:relative;
}
#nav li.about {
    width:70px;
    margin-top:-7px;
}
#nav li.about a {
    width:70px;
}
#nav li.back {
    width:142px;
    margin:-18px 0 0;
}
#nav li.basepage {
    width:130px;
    height:90px;
}
#nav li.basepage a {
    width: 100px;
    height:100px;
}
#nav li.back a {
    width:142px;
}
#nav li.back a:hover {
    background:green url(http://www.thecreativesheep.ca/pagehome/headerhover.jpg) -352px -162px;
}
#nav li a span {
    position:absolute;
    left:-99em;
    top:-999em
}
.clearfix:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix {
    display:inline-block;
}
/* mac hide \*/
* html .clearfix {
    height: 1&#37;;
}
.clearfix {
    display: block;
}
/* End hide */
</style>
<!--[if lte IE 7]>
<link href="iecss.css" rel="stylesheet"  media="screen,projection" type="text/css">
<![endif]-->
<!--[if IE 8]>
<link href="ie8.css" rel="stylesheet"  media="screen,projection" type="text/css">
<![endif]-->
<!--[if lt IE 7]>
<script type="text/javascript" src="http://www.thecreativesheep.ca/pagehome/js/iehover.js"></script>
<![endif]-->
</head>
<body id="home">
<div id="wrap">
    <div id="header">
        <h1><span class="hide">WIP Creative Biology of animation</span></h1>
        <div id="masterhome"><a href="#"></a></div>
        <ul id="nav">
            <li class="home"><a href="#"><span>Home</span></a></li>
            <li class="about"><a href="#"><span>About Me</span></a></li>
            <li class="back"><a href="#"><span>Back(News news)</span></a></li>
            <li class="basepage"><a href="#"><span>BasePage</span></a></li>
        </ul>
        <div id="searchbox"></div>
    </div>
    <div id="maincol" class="clearfix">
        <div id="content">
            <div class="content_boxes">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
            </div>
        </div>
        <div id="sidebar">
            <div class="bg_sidebar">
                <p>Sidecolumn</p>
                <p>Sidecolumn</p>
                <p>Sidecolumn</p>
                <p>Sidecolumn</p>
                <p>Sidecolumn</p>
            </div>
        </div>
    </div>
    <div class="base"></div>
</div>
</body>
</html>

Use all of the code above or none of it. Don't pick and choose bits as you keep omitting vital ingredients.

You can of course adjust and tweak as necessary but keep the correct structure in place and if you increase the width of the children then make sure it still fits in the parent.

**SiberianHuskey** · Feb 24, 2010 06:43

I hope I have closed the <div>

Everything appears to be as it should, hopefully

I have to get more of the parts together so it comes together

Although there is still one validation error !

Thread to be updated !

Edit: Forgot to mention how come the hover on the words back(new news) the word should become blue upon hovering instead it's a grey/brown block ?

User Tag List

Thread: Anchor not working

Thread Tools

Display

Anchor not working

Bookmarks

Bookmarks

Posting Permissions