By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,435 Members | 2,939 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,435 IT Pros & Developers. It's quick & easy.

making a div a link

100+
P: 111
I need to make a whole div, become a link.

i currently have the code
Expand|Select|Wrap|Line Numbers
  1. <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
Expand|Select|Wrap|Line Numbers
  1. <ul>
  2. <a href="temp.html"><li>item 1</li></a>
  3. <a href="temp2.html"><li>item 2</li></a>
  4. <a href="temp3.html"><li>item 3</li></a>
  5. </ul>
which does not validate
Oct 17 '07 #1
Share this Question
Share on Google+
25 Replies


Death Slaught
100+
P: 1,137
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
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.html">item 2</a></li>
<li><a href="temp3.html">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
Oct 17 '07 #2

P: 39
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="document.location='http://google.com'"><noscript><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="document.location='http://yahoo.com'"><noscript><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...
Oct 18 '07 #3

drhowarddrfine
Expert 5K+
P: 7,435
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.
Oct 18 '07 #4

100+
P: 111
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
Oct 18 '07 #5

Death Slaught
100+
P: 1,137
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
Oct 18 '07 #6

P: 1
It can be done with javascript, like this:

<div id="xxxxx" OnClick="javascript: window.open('http://www.xxxxx')">

In the syleheet add:
cursor: pointer;
to your div...
Nov 5 '07 #7

drhowarddrfine
Expert 5K+
P: 7,435
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.
Nov 5 '07 #8

P: 1
Expand|Select|Wrap|Line Numbers
  1. #list li a{
  2. width: 100px;
  3. display:block;
  4. }

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

100+
P: 122
The book I'm reading suggests setting the display property of the anchor to block.

Expand|Select|Wrap|Line Numbers
  1. a {
  2.   display: block;
  3.   width: 5em;
  4.   padding: 0.2em;
  5.   line-height: 1.5;
  6.   background-color: #990099;
  7.   text-decoration: none;
  8.   text-align: center;
  9. }
This doesn't use a <div> element, but does create the desired box and allows for a background color.
Sep 18 '08 #10

P: 1
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:hover {background:#ccc;}</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.
Dec 9 '09 #11

hsriat
Expert 100+
P: 1,654
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.
Dec 10 '09 #12

kovik
Expert 100+
P: 1,044
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:

Expand|Select|Wrap|Line Numbers
  1. <a href="temp.html"><b>some text</b></a>
Expand|Select|Wrap|Line Numbers
  1. <ul>
  2.     <li><a href="temp.html"><b>item 1</b></a></li>
  3.     <li><a href="temp2.html"><b>item 2</b></a></li>
  4.     <li><a href="temp3.html"><b>item 3</b></a></li>
  5. </ul>
Expand|Select|Wrap|Line Numbers
  1. a,
  2. a b {
  3.   display: block;
  4. }
Dec 11 '09 #13

drhowarddrfine
Expert 5K+
P: 7,435
A lot of action for a 2-year old thread.
Dec 11 '09 #14

kovik
Expert 100+
P: 1,044
... Wish I had noticed. Lock?
Dec 11 '09 #15

P: n/a
I use span instead of div.
Seems to work fine and validate XHTML Strict....

<a href="http://"><span class="" style="height:73px; width:150px;"></span></a>

Been using it for some time now since I found that using the div inside the link tags doesnt validate.
No problems whatsoever so far.
Sep 27 '10 #16

kovik
Expert 100+
P: 1,044
Double-necro'd. And with absolutely nothing new to add. Bravo.
Sep 27 '10 #17

P: n/a
Hi everyone,

Two possible solutions:

1) Put the link inside the <div> and wrap all inline elements within the link in <object> tags. So like this:

Expand|Select|Wrap|Line Numbers
  1. <div>
  2. <a href="#">
  3. <object><h3>Header text here</h3></object>
  4. <img src="#">
  5. <object><p>Paragraph text here</p></object>
  6. </a>
  7. </div>
This validates and everything within the <a> tag now becomes clickable. You don't have to put blocklevel elements (like <img>) within <object> tags to make this validate.

2) You can put your link inside a <span>, which is inside the <div>. You can then add a transparent image the size of the block you want to be clickable to the link (a completely transparent png or gif will work) and position this absolutely over the <div>. So like this:

Expand|Select|Wrap|Line Numbers
  1. <div>
  2. <span><a href="#"><img src="transparent.png" width="200px" height="150px"</a></span>
  3. <h3>Header text here</h3>
  4. <img src="#">
  5. <p>Paragraph text here</p>
  6. </div>
To make it work you give the <span> the same width and height (using CSS) as your transparent image. So the CSS for the <span> would look something like this:

Expand|Select|Wrap|Line Numbers
  1. span {
  2. width:200px;
  3. height:150px;
  4. position:absolute;
  5. }
In order for the absolute positioning to work you need to position the containing <div> relatively. So the CSS for the containing <div> would look something like this:

Expand|Select|Wrap|Line Numbers
  1. div {
  2. position:relative;
  3. }
Hope this helps...
Oct 8 '10 #18

drhowarddrfine
Expert 5K+
P: 7,435
Maybe we can continue this thread another 3 years from now.
Oct 8 '10 #19

P: n/a
Simple answer, put a blank transparent PNG inside the div, set it to the same height and width as the div and link the image.

It's a bit heavy handed, but it works.
Oct 12 '10 #20

kovik
Expert 100+
P: 1,044
Seriously...? Just put an inline-level element in the anchor and use CSS to make it a block. It's not nearly as complicated as you guys are making it. When someone has CSS turned off, it means that they don't care what the page looks like. They don't need block-element links.

Now please... Let the thread die?
Oct 13 '10 #21

P: 2
The problems are simple. YES a div can be a link, those who doesn't know it yet, should learn some more. The html code for this is as simple as you wrote initialy:
Expand|Select|Wrap|Line Numbers
  1. <a href="#"><div class="someclass"><div></a>
But for this to work, should have in the .css file as a rule for you div, the folowing: a given height, a given width, and the rule display:block, but not for <a> element, but for "someclass" element.

Do that and I gurantee this work without a single problem.

For the list problem (ul and li) I wouldn't sugest you use this technique, better explain exactly what you want to achieve, and we'll help you with the right solution.
Mar 2 '12 #22

drhowarddrfine
Expert 5K+
P: 7,435
Almost five years ago, WHEN THIS THREAD ORIGINALLY STARTED, trying to make a div a link was invalid. It has only been possible and valid to do with HTML5.
Mar 2 '12 #23

P: 2
Oh my god ! My bad, I didn't look at the date, my apology.
Mar 2 '12 #24

kovik
Expert 100+
P: 1,044
The thread that never dies. At least it gives me a reason to check up on Bytes and read how much of a **** I used to be. Good times, man. Good times.
Mar 2 '12 #25

P: 1
@drhowarddrfine
No worries.

HTML:
Expand|Select|Wrap|Line Numbers
  1. <div class="inner-link">
  2.   Go to <a href="https://google.com">Google</a>
  3. </div>
jQuery:
Expand|Select|Wrap|Line Numbers
  1. $(".inner-link").click(function() {
  2.   window.location = $(this).find("a").attr("href");
  3. });
Nov 17 '13 #26

Post your reply

Sign in to post your reply or Sign up for a free account.