14 replies [Last post]
millercj
Offline
Regular
Last seen: 12 years 29 weeks ago
Joined: 2007-12-10
Posts: 17
Points: 0

Is there a way to make an entire div a hyperlink in XHTML Strict?

dangerouskicker
Offline
newbie
ahmedabad
Last seen: 12 years 29 weeks ago
ahmedabad
Timezone: GMT+5.5
Joined: 2007-11-19
Posts: 3
Points: 0

Is there a way to make an entire div a hyperlink in XHTML Strict

millercj wrote:
Is there a way to make an entire div a hyperlink in XHTML Strict?

yes make that div "display:block"

in a contaniner

exmple

mydiv {

}

mydiv a {
display:block;
background:#FFFFFF;
}

mydiv a:hover{
background:#CCCCCC;
}

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 43 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

dangerouskicker

dangerouskicker wrote:
millercj wrote:
Is there a way to make an entire div a hyperlink in XHTML Strict?

yes make that div "display:block"

in a contaniner

No, no, a thousand times no! First of all a DIV is already a block element, so no need or point to use display:block; since it is already that.

Second a DIV cannot validly go inside the A element because A is an inline element that cannot legally contain a block element. And the only way to make a link is with the A element. You cannot use a P or any other block element either.

If you think you have to do something like this it's a sign that your page is totally messed up and needs to be restructured.

This is a sign of fixating on a "solution" instead of understanding what the real problem is. The question is a bad question that shows a mistaken way of thinking about html.

Depending on the situation and the effect required it may be as simple as using a SPAN, which is the inline grouping element that may be used inside other inline elements, or it may be something else entirely.

Show us all the code, preferably a link to the page. Then we might be able to give some useful help. "dangerouskicker"'s answer is a non solution that will only lead you into an endless quagmire of invalid and non-semantic html.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

millercj
Offline
Regular
Last seen: 12 years 29 weeks ago
Joined: 2007-12-10
Posts: 17
Points: 0

Ok, I figured out what i'm

Ok, I figured out what i'm going to do. The problem is that I'm trying to create the logo on the page be clickable to go to the home page as part of the navigation but the logo is graphically part of a larger banner and is a background image to another div.

I floated a transparent div over top the logo, set an onlick javascript call and give the function this

window.location='http://stjohns.digiconmediagroup.com/';

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 43 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

A logo is a header so why

A logo is a header so why not just use:

Logo

...?

A DIV has no semantic meaning and should be used only for grouping where there is no other logical semantic meaning implied by the content.

Headers belong in header elements and you should be using them to enclose headings, not DIVs. They can be styled just as easily as a DIV and can contain both block and inline elements, including images. If your Logo is in an image then use something like this:


logo

Then style it to look the way you want it to look.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

millercj
Offline
Regular
Last seen: 12 years 29 weeks ago
Joined: 2007-12-10
Posts: 17
Points: 0

it's not that kind of

it's not that kind of header...it's an image as the page header

isedeasy
Offline
Enthusiast
Bristol
Last seen: 8 years 16 weeks ago
Bristol
Timezone: GMT+1
Joined: 2008-02-09
Posts: 74
Points: 12

millercj wrote:it's not that

millercj wrote:
it's not that kind of header...it's an image as the page header

I think you may be a little confused...

Please post a link to the page or post all of your HTML and CSS in here...

"If a man is trying to hang himself from the tree in my yard but the knot keeps slipping and allowing him to fall before it kills him do you expect someone to go out and teach him to tie a better knot?" - Triumph

millercj
Offline
Regular
Last seen: 12 years 29 weeks ago
Joined: 2007-12-10
Posts: 17
Points: 0

The problem is corrected but

The problem is corrected but if you'd like to see what i'm talking about you can check it out here

http://stjohns.digiconmediagroup.com

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 43 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

millercj wrote:it's not that

millercj wrote:
it's not that kind of header...it's an image as the page header

That's a header. It should be in an H1 element most likely, a header of some kind (H1..H6) definitely. What happens to your header if the visitor has a non graphic browser by the way?

Having now had a look at the page my opinion remains the same.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

virtualburn
virtualburn's picture
Offline
Regular
Last seen: 11 years 26 weeks ago
Joined: 2006-10-10
Posts: 15
Points: 0

As far as I'm concerned the

As far as I'm concerned the H1 - H6 'Headings' (not headers) are typographical references and always have been, I understand what the OP wanted, as in the 'Header' image of the site to be a home divert or something similar.

Another way to do this would be to drop a 1px x 1px transparent gif as the image source and link that rather than the background image.

For a 'guru' ed I thought you would have known that.

~ Make hay while the sun shines ~ CHS

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 43 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

virtualburn wrote:As far as

virtualburn wrote:

As far as I'm concerned the H1 - H6 'Headings' (not headers) are typographical references and always have been, I understand what the OP wanted, as in the 'Header' image of the site to be a home divert or something similar.

Well the folks who design html and publish the standards disagree with you. I'm betting with them.

Quote:

For a 'guru' ed I thought you would have known that.

Cheap shots don't convince if your argument is baseless.

Actually all the "guru" title the board gives means, is that the "guru" in point is enough of a blowhard to have posted more than 2000 times on the system. It says nothing about the state of their knowlege of html or CSS, or anything else. I have no control over how the software behind the system chooses to classify folks.

But apparently you didn't take the time to figure that out before giving a low blow. I think that says something about you, not me.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

virtualburn
virtualburn's picture
Offline
Regular
Last seen: 11 years 26 weeks ago
Joined: 2006-10-10
Posts: 15
Points: 0

Sorry ed if you took it

:bigoops:

Sorry ed if you took it that way, it wasn't supposed to be a 'low blow' at all.

The <h1> to <h6> tags are used to define HTML headings.
 
<h1> defines the largest heading and <h6> defines the smallest heading.

There is a clear difference between a heading on a page and a header, whether this be html, php or even word processing. Apart from the 'header' information in a html page, in web design generally the header is usually a reference to the upper part of the page. In most cases an image that links back to the home page or 'index'.

Not meaning to sound condescending, but the OP was quite clear in what he wanted, it was just the procedure to achieve his goal he was unsure about. Maybe some alternatives would have helped rather than teaching him to suck eggs.

~ Make hay while the sun shines ~ CHS

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 43 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Why the need to re-open a

Why the need to re-open a thread that ended over a year ago?

How will that help the OP?

Nothing you said above pursuades me, but if you feel the need to make me change my mind I suggest you open a new topic rather than hijacking an old one.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Snertly
Offline
newbie
Last seen: 11 years 4 weeks ago
Timezone: GMT-5
Joined: 2009-09-20
Posts: 1
Points: 0

Funny thing about time on

Funny thing about time on that there internet, I was just trying to figure out a similar thing and found this page. Which, despite the blowhard negativity of Ed, did nudge me along in the right direction.

I'm trying to float a div as a transparent link over a block of text so a click anywhere in the box will move along to the next page instead of trying to select an area of a graphic as a link, and, for no other reason than coding aesthetics, I'd rather implement it without javascript, but the OP's method works.

To quote Wil Wheaton, "Don't be a di┬ęk."

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 6 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

millercj wrote:Is there a

millercj wrote:

Is there a way to make an entire div a hyperlink in XHTML Strict?

NO. but you can make an display 100% of the div. This will make it look like the whole div is a link, but really, its the link inside the div.

a {
width: 100%;
height: 100%;
display: block;
}