Convert div tag to work as a link ???

[Cheng]

Hi.

Is it possible to have a div tag work as a link?
Not just the text inside the tag but the whole tag.
What I want to do is to have the following tag work as a link but I don't know how to do it in Dreamweaver.

Div Tag

<div id="adobe">Here you can gratis download Adobe Reader which is necessary to open the files.</div>

CSS

#adobe {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
padding-left: 60px;
background-image: url(../images/adobe.gif);
background-repeat: no-repeat;
height: 40px;
padding-top: 11px;
}

Please someone give me a hint how to do this or maybe recommend a javascript if one is needed to achive this.

Thanks in advance,

[molendijk]

You mean something like(?):
<div href="javascript:void(0)" onclick="window.location.href='bla.html'"></div>
Arie Molendijk

[Nile]

Theres no point of the void :-/.

[Cheng]

You mean something like(?):
<div href="javascript:void(0)" onclick="window.location.href='bla.html'"></div>
Arie Molendijk

.......yes, I thing something like this it is.
It seems that without a javascript it cant be done.
Can you link me to a script that I can use to do this...?...

[Medyman]

.......yes, I thing something like this it is.
It seems that without a javascript it cant be done.
Can you link me to a script that I can use to do this...?...

That's right. You'll need javascript for this.

Technically, you can just insert a <div> within an anchor (<a>) element and it will work. However, it's not standards compliant markup.

I'm not recommending it, just informing.

[Cheng]

.......thanks for the replies.
Can someone please point me to script that can be used.......

[boogyman]

why cant you just have a long anchor tag?

the div tag was created for layout purposes, not linking. What you want to do is an abuse of the div tag... similar to using tables as a layout schema.

If you want an extended amount of text as a link, apply styles to an anchor tag.

[molendijk]

Theres no point of the void :-/.
I've had several cases in which href="#" or something like that (href="javascript;", for instance) produced unwanted results. So I normally use href=javascript:void(0), which never let me down.
You can do without the href, but then the link does not present itself as such.
----
Arie M.

[Cheng]

why cant you just have a long anchor tag?

the div tag was created for layout purposes, not linking. What you want to do is an abuse of the div tag... similar to using tables as a layout schema.

If you want an extended amount of text as a link, apply styles to an anchor tag.

.......sorry, but I don't know how to do it using a long anchor tag.
Could you give me an example please.......

[molendijk]

.......sorry, but I don't know how to do it using a long anchor tag.
Could you give me an example please.......
Cheng, since you just want to have a link in a div for downloading Adobe Reader, you could do this, which opens a new window:
<div id="adobe" href="javascript:void(0)" onclick="window.open('bla.html')">Here you can gratis download Adobe Reader which is necessary to open the files</div>where 'bla.html' is the page you want to access. (That will probably a page with a download-link for Adobe).
----
Arie.

[Cheng]

Cheng, since you just want to have a link in a div for downloading Adobe Reader, you could do this, which opens a new window:
<div id="adobe" href="javascript:void(0)" onclick="window.open('bla.html')">Here you can gratis download Adobe Reader which is necessary to open the files</div>where 'bla.html' is the page you want to access. (That will probably a page with a download-link for Adobe).
----
Arie.

.......I tried this but the cursor wont change to a hand when placed over the link, so I'm trying to go for the easy solution and just place a link inside the div tag but now there is a bullet showing and I don't know how it get there and can't get rid of it as well.
Is there a way to get rid of this bullet (see image) ..?...

http://img232.imageshack.us/img232/2425/screenshotro2.jpg

[molendijk]

.......I tried this but the cursor wont change to a hand
My stupid fault. Just put:

<div id="adobe" style = "cursor:pointer;hand" onclick = "window.open('bla.html')">Here you can gratis download Adobe Reader which is necessary to open the files</div>
Arie

[rangana]

My stupid fault. Just put:

<div id="adobe" style = "cursor:pointer;hand" onclick = "window.open('bla.html')">Here you can gratis download Adobe Reader which is necessary to open the files</div>
Arie

There is no hand value in the cursor property ;)
For further Reading (http://www.w3schools.com/CSS/pr_class_cursor.asp)

[Cheng]

.......molendijk thanks a lot!
Now I got it working exactly like I want it to.

W3C Markup Validation Service says: This Page Is Valid HTML 4.01 Transitional!

I really appreciate the help.

Thanks again very much.......

[molendijk]

There is no hand value in the cursor property ;)
Rangana, there is: style="cursor: pointer;hand" !!
('hand' is for IE; 'pointer' is for non-IE).
----
Arie

[matthewbluewars]

You could do an onclick attribute.

[boogyman]

.......sorry, but I don't know how to do it using a long anchor tag.
Could you give me an example please.......

the size of the anchor depends on the developer



<a href="/link/to/page">ANCHOR CONTENT</a>


the content that you put inside the anchor tag is under your discretion... whatever you put inside the href attribute is what the browser will go to when the text / other element is clicked on

[Tal_Akaan]

i realize this is kind of an old thread, but i was wondering if there is now a better way to do this.

also if there is not a better way to do this, is it possible using the java option to get it to open in the same window as opposed to a new one.

thank you

[Johnathan]

Hi.

Is it possible to have a div tag work as a link?
Not just the text inside the tag but the whole tag.
What I want to do is to have the following tag work as a link but I don't know how to do it in Dreamweaver.

Div Tag

<div id="adobe">Here you can gratis download Adobe Reader which is necessary to open the files.</div>

CSS

#adobe {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
padding-left: 60px;
background-image: url(../images/adobe.gif);
background-repeat: no-repeat;
height: 40px;
padding-top: 11px;
}

Please someone give me a hint how to do this or maybe recommend a javascript if one is needed to achive this.

Thanks in advance,

Why not just wrap the entire <div> inside an <a> tag? Something like:
<a><div>Your information here.</div></a>

I have used this to hyperlink the entire div before. It even works if you include an image inside the div - the image and text both are hyperlinked. You can control the style of the hyperlink using CSS. Hope that this is helpful.

[jscheuer1]

Please start a new thread for a new question.