• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 522
  • Last Modified:

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.
0
SevenAteAnthony
Asked:
SevenAteAnthony
  • 7
  • 6
  • 3
1 Solution
 
Dave BaldwinFixer of ProblemsCommented:
First, why are you trying to make <div> clickable?  Please show us some code that demonstrates what you are trying to do.
0
 
SevenAteAnthonyAuthor Commented:
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.
0
 
Dave BaldwinFixer of ProblemsCommented:
<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.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
SevenAteAnthonyAuthor Commented:
<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!
0
 
Dave BaldwinFixer of ProblemsCommented:
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.
0
 
SevenAteAnthonyAuthor Commented:
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.
0
 
twohawksCommented:
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.
0
 
SevenAteAnthonyAuthor Commented:
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?
0
 
twohawksCommented:
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?
0
 
SevenAteAnthonyAuthor Commented:
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?
0
 
twohawksCommented:
Hi seven.  If your question was addressed to me, the only thing I was addressing was the specific focus of your original question, i.e., ...
.."making an entire div clickable".

My response essentially states, you can "emulate" that by, instead, using a span, and you are free to do with that any which way you please.
So you can make a span emulate a div, and make that clickable, kind of thing, and the code will validate.
0
 
twohawksCommented:
We cross-posted, but to your comment preceding my last -the answer is yes.
0
 
twohawksCommented:
Except, I did not say what you "should" do... only what you "can" do and remain valid.
0
 
twohawksCommented:
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).
0
 
SevenAteAnthonyAuthor Commented:
Thank you.
0
 
twohawksCommented:
You are welcome. And than you ;^)
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 7
  • 6
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now