making a div a link

[nitinpatel1117]

I need to make a whole div, become a link.

i currently have the code

<a href="temp.html"><div>some text</div></a>

but this does not validate as xhtml strict.

putting the link in the div will only make the text a link and not the whole div.
the reason i've got the div in there is becuase i use it to create a box and add a colored background to this.

I also need to be able to achieve the same thing, with a list item.
e.g. I currently have

<ul>
<a href="temp.html"><li>item 1</li></a>
<a href="temp2.html"><li>item 2</li></a>
<a href="temp3.html"><li>item 3</li></a>
</ul>

which does not validate

[Death Slaught]

I need to make a whole div, become a link.

i currently have the code
<a href="temp.html "><div>some text</div></a>

but this does not validate as xhtml strict.

putting the link in the div will only make the text a link and not the whole div.
the reason i've got the div in there is becuase i use it to create a box and add a colored background to this.

I also need to be able to achieve the same thing, with a list item.
e.g. I currently have
<ul>
<a href="temp.html "><li>item 1</li></a>
<a href="temp2.htm l"><li>item 2</li></a>
<a href="temp3.htm l"><li>item 3</li></a>
</ul>

which does not validate

It doesn't validate because it should be like this:


[HTML]<div><a href="temp.html ">some text</a></div>[/HTML]

[HTML]<ul>
<li><a href="temp.html ">item 1</a></li>
<li><a href="temp2.htm l">item 2</a></li>
<li><a href="temp3.htm l">item 3</a></li>
</ul>[/HTML]

I don't know where your learning from, but I would stop. Try here It's a pretty good tutorial on HTML.


Hope it helps, Death

[mohaakilla51]

he knows that is how it should be death, but he wants to make the ENTIRE div a link, which I am not sure how to do, unless you went with Javascript, at which point it would be
[html]
<div OnClick="docume nt.location='ht tp://google.com'"><n oscript><a href="http://google.com"></noscript>some Text<noscript></a></noscript></div>
<!--THus, you will get divs that are links, unless the client has no javascript, which will cause the text to be links instead.-->
<!--the same for your lists -->
<ul>
<li OnClick="docume nt.location='ht tp://yahoo.com'"><no script><a href="http://yahoo.com"></noscript>More Text<noscript></a></noscript></li>
</ul>
[/html]
Does that help? I cannot think of an XHTML strict way to do it otherwise...

Oh, and w3schools.com is an excellent source for HTML, CSS, and PHP (IMHO), although I don't think you need it...

[drhowarddrfine]

A div cannot be made into a link. It is a structural element, and block level, and is not content by itself. <a> is inline only and will not work on block level elements.

[nitinpatel1117]

yes i understand that the <a> is inline and <div> is block element.

and hence <div> can't reside in the <a>, but a while back i read something about making the <a> a block element and <div> an inline element, by using the css --> display:block & display:inline respectively. I tried this way but it doesn't seem to validate either.

Can't remember where i read it, it was a while back, so can't remember if i'm doing it the right way.

The div that i have represents a small box on the screen, this box contains an image and a <hr> tag and some text. The whole things needs to be a link.

i'm already using the javascript onclick method on the div, but i wanted to do it without using javascipt to make it more SEO friendly.

has anyone ever tried anything similar, or is there a better way of doing it, to acheive the same resutls.
Thanks

[Death Slaught]

yes i understand that the <a> is inline and <div> is block element.

and hence <div> can't reside in the <a>, but a while back i read something about making the <a> a block element and <div> an inline element, by using the css --> display:block & display:inline respectively. I tried this way but it doesn't seem to validate either.

Can't remember where i read it, it was a while back, so can't remember if i'm doing it the right way.

The div that i have represents a small box on the screen, this box contains an image and a <hr> tag and some text. The whole things needs to be a link.

i'm already using the javascript onclick method on the div, but i wanted to do it without using javascipt to make it more SEO friendly.

has anyone ever tried anything similar, or is there a better way of doing it, to acheive the same resutls.
Thanks

Depending on where your putting the text you can just make the image a link.......


- Death

[jp500]

It can be done with javascript, like this:

<div id="xxxxx" OnClick="javasc ript: window.open('ht tp://www.xxxxx')">

In the syleheet add:
cursor: pointer;
to your div...

[drhowarddrfine]

I didn't know <div> had "onclick" as an attribute. Which makes me want to look further into making a div as a link. Just wrapping <a> around a <div> will work but the validator complains about it.

[ineedasn]

#list li a{
width: 100px;
display:block;
}

I guess
display:block;
seems to do the trick...
technically it wouldn't be a div as a link but same difference...

[Annalyzer]

The book I'm reading suggests setting the display property of the anchor to block.

a {
  display: block;
  width: 5em;
  padding: 0.2em;
  line-height: 1.5;
  background-color: #990099;
  text-decoration: none;
  text-align: center;
}

This doesn't use a <div> element, but does create the desired box and allows for a background color.

[jermouri]

in some cases, you can use something else instead of a div to achieve the same effect while pleasing the validator gods. for instance, a span or an img could work, and they are inline elements.
for ul li, what you can do is the following:
<style>li:hov er {background:#cc c;}</style>
<ul>
<li><a>first choice</a></li>
<li><a>second choice</a></li>
</ul>
the link proper would be on the text inside the li but the li block will react to the cursor.

[hsriat]

The div that i have represents a small box on the screen, this box contains an image and a <hr> tag and some text. The whole things needs to be a link.

I believe there's no point of inserting an image and <hr> inside a link. A good alternative can be if you use display: block (as you already know), then use the image as a background-image with no-repeat, stuff a padding-left (or which ever side you want the image to be) according to the size of the image, and then finally replace the <hr> with border-bottom.
If you want an encapsulating border for this whole thing, pack it inside a div tag (w3c'cally legal) with required border and a small padding.

[kovik]

One: The OP wants it to validate. CSS doesn't cause HTML to validate. A block element cannot be placed in an inline element, regardless of the CSS. So, placing the DIV inside of the A won't work.

Two: Part of the lack of validation is that the LI element should be the only direct child of the UL element. The A element cannot be the direct child of the UL element.

Three: ~jermouri has it right, to a point. However, giving the block element a "cursor:pointer " style doesn't address the fact that clicking it will accomplish nothing.


So, the answer that you are looking for is to simply use an element other than DIV. For validation, you'll want to use an inline element. You could use SPAN, as suggested by ~jermouri, or you could use an element with more meaning. I, personally, am more likely to choose STRONG, EM, B, or I before resorting to SPAN.

You can then use CSS to make these elements block elements. The reason that hte HTML must validate without the CSS is because the HTML should be able to stand on its own without the CSS. Without CSS, block elements inside of inline elements makes no sense.


So, the final result is:

[code=html]<a href="temp.html "><b>some text</b></a>[/code]
[code=html]<ul>
<li><a href="temp.html "><b>item 1</b></a></li>
<li><a href="temp2.htm l"><b>item 2</b></a></li>
<li><a href="temp3.htm l"><b>item 3</b></a></li>
</ul>[/code]
[code=css]a,
a b {
display: block;
}[/code]

[drhowarddrfine]

A lot of action for a 2-year old thread.

[kovik]

... Wish I had noticed. Lock?