Alexandru Dinulescu's Thoughts

Hello

I just found out something very very interesting when i was working on a project. Basically it required me to put a div inside a a tag and that div also had some links. I managed to do that however the code is not valid. Will post source code with examples and explanations tomorrow.

Okay so basically what I was trying to create was something like this (simplified for good reasons)

My version also had a hover JS element over the entire box, so when the user hovers over it, it gets highlighted. So far nothing went bad, everything fits together nicely

Attached is an image of said file

The Challenge came when my client asked to encompass the entire div into an a tag so he could use it for redirecting to something else. Unfortunately as we know, <a href="#"><div ></div></a> does not work, so i had to come up with a solution to this matter

The situation was quite easily done, since those boxes had to be floated, i could replace them with a <li> tag. However this was close but no cigar, since i still ended up with the old <li><a href="#"><div></div></a> situation. Then i thought about the span tag and since the span and div tags are both MEANINGLESS and Almost identical in behavior i could simply replace the div with the span and just make sure to put the display: block; property on the span so it will replicate the div. and the span tag works inside a <a> tag

So my code at the end looked something like this:

However then i had a problem, the encompassing a tag reduced my 2 inner a tags useless. Given this situation I had to create another div outside the encompassing a tag and absolute-position that div in the same place so it will look the same but behave totally different, now all links are working properly, and the user wont even notice the difference. The only thing not quite correct is that the code is not valid, but meh, sometime you have to cut some corners.

This is the almost the final draft with the code