Link doesn't work in a DIV

Forum Moderators: not2easy

Message Too Old, No Replies

Link doesn't work in a DIV

Need someone to look at code snippet

gussie

10:29 pm on Mar 5, 2004 (gmt 0)

I'm about to spontaneously combust over this one.
The link in this piece of code doesn't work at all.

The "home" link is superimposed on top of the logo. If I move it off of the logo, the link works. On top of the logo, it doesn't work at all. I am testing on IE 5.0
Thanks
Gus

pageoneresults

10:33 pm on Mar 5, 2004 (gmt 0)

Try this bit of cleaned up code and see if it works...

<div style="position:absolute; left:0; top:0">
<img src="indeximages/logo.jpg" alt="Our name">
</div> 
<div style="position:absolute; left:48; top:110">
<p><a href="index.html" style="text-decoration:none">home</a></p>
</div>

grahamstewart

10:35 pm on Mar 5, 2004 (gmt 0)

Hi gussie.

You can't set an entire paragraph to be a link.
<p> is a block tag and <a> is an inline tag - inline tags can appear inside blocks but not vice versa.

You could just change it to be:

<p><a style="text-decoration:none" href="index.html">home</a></p>

Make a friend of the w3c HTML Validator [validator.w3.org] - it will help you pick up little mistakes like this.

SuzyUK

11:24 pm on Mar 5, 2004 (gmt 0)

you can set an entire <p> to be a link if you want to... especially in this scenario (absolute positioning).. but the original poster gave divs as the code, all a <p> is doing, in this case is replacing/adding to a <div>....

I would suggest setting the div (or <p> ) with the link in it to have a higher z:index than the div you are trying to super-impose it on..

with absolute positioning the div is already as wide/high as you want it to be all you actually want it to do is appear over/"on top of" an image (background or not) so just make it "appear" higher in the stacking order that should seal it, no matter where it is the HTML source code...

<div style = "position: absolute; left: 48; top:110; z-index: 500;"><a style = "text-decoration:none" href="index.html"><p>home</p></a>
</div>

Suzy

grahamstewart

11:41 pm on Mar 5, 2004 (gmt 0)

you can set an entire <p> to be a link if you want to...

Umm..are you sure about that Suzy?
It's definitely not like you to be wrong but if I try..

<a href="index.html"><p>home</p></a>

then the w3 validator says:

document type does not allow element "P" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag

iamlost

12:44 am on Mar 6, 2004 (gmt 0)

<a> is a special inline (character level elements and text strings) entity. It therefore can not "contain" a block level entity such as <p>.

A <p> can be used as a link but the anchors must be within the paragraph:

<p><a href="link" alt="link">Lots of words</a></p>

will appear as if the entire paragraph is a link and is valid.

As pointed out: <a href="link" alt="link"><p>Lots of words</p></a> is not valid.

SuzyUK

12:54 pm on Mar 6, 2004 (gmt 0)

graham... you're right.. I never even noticed that the <p> was still inside the <a> in the example I posted.. I just did it to add the z-index

I copy/pasted from the first post.. (the downside of only be able to view the first post when replying .... ooops me bad....:()

I had read yours and pageoneresults replies, explaining that the <a>nchor had to be inside the <p> - inline element inside block, which is quite correct... and taken them as read.. ....

I just wanted to add that you could then make the link take up the entire paragraph or div.... display block would do it or absolutely positioning it with width/height/z-index...

Sorry.. for confusion gussie

in this case you might not actually need the both the <p> and the <div> containers one will do... but I still think that z-index may be your answer if your link is still not working...

try this instead....

<div style= "position: absolute; left: 0; top:0; background: #fcf; width: 200px; height: 200px;">
<img src = "indeximages/logo.jpg" width="200" height="200" Alt = "Our name">
</div>
<div style = "position: absolute; left: 0; top:110px; background: #ffc; width: 200px; z:index: 500;">
<a style = "text-decoration:none; display: block; width: 200px;" href = "index.html">home</a>
</div>

You really should set widths/heights on absolutely positioned elements too and setting background colors (temporarily) shows where each element is..

you can then play with the width of the <a> and the top/left co-ordinates of it's container to position it where required.

Suzy

gussie

4:13 pm on Mar 8, 2004 (gmt 0)

Thanks for all the tips. Susy's idea of making the link the entire DIV shows very clearly that where the DIV is over the logo, the link doesn't work. Where the DIV runs past the logo, the link works.

It doesn't seem to be a z-index problems, as I set the index as suggested and it still doesn't work. I'd like to try this on another browser, but my computer died a few weeks ago and I still haven't gotten my hard disk with all my browsers back. Hopefully, things will be back to normal this week and I can do some more testing.

However, I did clean up the code as suggested. The <p> was there to force some formatting that is better done within the link.

gussie

4:27 pm on Mar 8, 2004 (gmt 0)

Nesting the DIV's makes it work: