I’d like to know why this code:
<div id=“masterhome”><a href=“#”></a></div>
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 ?
Anchor:
<a id="masterhome"></a>
Link:
<a href="#masterhome" title="This links to another part of this webpage">Link</a>
I replace my line of code with which, I’m a little confused ?
I updated not working.
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.
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.
WinWin - That worked 
Thank you both I see you placed the anchor before the ID
I do not think you can put a <div> inside an <a> tag:
<!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>
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.
<[COLOR=Red]a="#masterhome"[/COLOR] title="This links to another part of this webpage"></a>[COLOR=Red]</div>[/COLOR]
You’re not linking to anything in the above nor are you referencing the ID Of “masterhome”.
So, either this:
<div [B]id="masterhome"[/B]><a href="myhomepage.html" title="my title">My Link</a></div>
Or this:
<a [B]id="masterhome"[/B] href="myhomepage.html" title="my title">My Link</a>
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 !
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.
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>
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.
<a href="[#](http://www.sitepoint.com/forums/view-source:http://www.thecreativesheep.ca/pagehome/home2.htm#)"><div id="masterhome"></div></a>
<div id="masterhome"><a href="[#](http://www.sitepoint.com/forums/view-source:http://www.thecreativesheep.ca/pagehome/home2.htm#)"</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:
<div id="masterhome"><a href="#"></a></div>
Then size the anchor to match the parent using display:block and width and height as follows:
#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.
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).
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.
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.
Can you post a link to the test page you are working on?
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.
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 ?
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 ?