468,290 Members | 2,028 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,290 developers. It's quick & easy.

making a div a link

111 100+
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
25 130525
Death Slaught
1,137 1GB
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
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
7,435 Expert 4TB
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
nitinpatel1117
111 100+
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
1,137 1GB
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
jp500
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
7,435 Expert 4TB
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
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
Annalyzer
122 100+
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
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
1,654 Expert 1GB
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
1,044 Expert 1GB
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
7,435 Expert 4TB
A lot of action for a 2-year old thread.
Dec 11 '09 #14
kovik
1,044 Expert 1GB
... Wish I had noticed. Lock?
Dec 11 '09 #15
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
1,044 Expert 1GB
Double-necro'd. And with absolutely nothing new to add. Bravo.
Sep 27 '10 #17
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
7,435 Expert 4TB
Maybe we can continue this thread another 3 years from now.
Oct 8 '10 #19
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
1,044 Expert 1GB
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
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
7,435 Expert 4TB
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
Oh my god ! My bad, I didn't look at the date, my apology.
Mar 2 '12 #24
kovik
1,044 Expert 1GB
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
@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.

Similar topics

1 post views Thread by Unregistered | last post: by
7 posts views Thread by bill | last post: by
7 posts views Thread by ravey | last post: by
6 posts views Thread by Ozz | last post: by
11 posts views Thread by mosscliffe | last post: by
7 posts views Thread by Steve Swift | last post: by
12 posts views Thread by prashant | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.