Link to home
Start Free TrialLog in
Avatar of SevenAteAnthony
SevenAteAnthonyFlag for United States of America

asked on

Alternatives to Wrapping HTML Anchor Tag Around Div

Hi Experts,

Thanks for reading. I looking for some advice on what the best approach would be to making an entire div clickable. I read that wrapping <a> tags around <div>s isn't proper, because <a> is an inline element and <div> is a block element. So I'm looking for some solutions as to what I can do because I'm not sure what to do. Thank you.
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

First, why are you trying to make <div> clickable?  Please show us some code that demonstrates what you are trying to do.
Avatar of SevenAteAnthony

ASKER

Thanks for the reply. Here's two examples:

<a href="index.php"><div id="logo"></div></a>

Open in new window


<a href="home.php"><div id="box"><span>Posted by</span> <?php echo $username; ?> | <?php echo $date; ?></div></a>

Open in new window


I don't understand how someone could not need <div> clickable. Thank you.
<div id="logo"></div> has no content so there would be nothing to click on.  ??

Often it is not a matter of not needing it but that they didn't think of it when they made up the standards in about 1996 or so.  I'm pretty sure they didn't foresee the graphic intensive pages we now have.  The web started out as text medium.

Now if it works for you, you can use it but it is up to you to check it in all the browsers you expect to use your page.  But then, it's always up to you to check your pages.
<div id="logo"></div> is a logo. The logo using CSS properties of background-image and height and width specified. It works in all browsers. I just know it's not right to use, so I'm looking for advice for alternatives. Thank you!
If it's just an image, you could wrap the <a> around that image instead of making it a background.  I don't know of any advantage to making it a background.
I suppose that is completely true. But what I don't like about that is the image can be highlighted in the browser if the mouse is clicked and dragged over it.
This is an interesting question, and I am going to try a couple things... just to comment..
you can assign the anchor a display:block style, and then use span(s) with it, and it will validate.

What I am going to go test is if you can get away with assigning  the contained span(s) a display:block style.
Interesting. So are you saying that -

<a href="index.php" style="display: block;"><img src="image.jpg" /></a>

Open in new window


- will display and not be highlighted when the mouse is clicked and dragged? What exactly would the purpose of the span tag be within the anchor tag when dealing with images?
Any combo of Anchor and Span with either/and/or set with display:block is no problem at the w3c validator.

So the question is, can you simply wrap your anchor around a span, and if need be, wrap the whole thing in a div?
So are you saying that I should make the logo as the background-image on span, display span as block with a height and width, and this would be valid? This would simply mean switching out <div> with <span> and settings span to display: block, right?
ASKER CERTIFIED SOLUTION
Avatar of twohawks
twohawks
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
We cross-posted, but to your comment preceding my last -the answer is yes.
Except, I did not say what you "should" do... only what you "can" do and remain valid.
Just remember, it is not strictly valid to float an anchor nakedly.  If you approach your solution by wrapping a span in an anchor, you do well to wrap that up in a div (obviously, but it should be noted for completeness).
Thank you.
You are welcome. And than you ;^)