聪明的PHP锚链接不工作

Question

Hi I was wondering if you could help me with an issue where with my smarty php code won't work. The problem is the anchor tag containing all of the code in this section won't actually surround it when it is outputted to the web page.

<a href="mylink"> //the link that does not actually work/surround the code below when outputed
    <div class="row" {if $smarty.section.pm_loop.last}style="border:none;"{/if}>
        <div class="f-right" style="padding-right: 35px">
            <a href='UserMessagesNew.php?pm_id={$pms[pm_loop].pm_id}'>{$Application659}</a><br/>
            <a href='UserMessagesView.php?pm_id={$pms[pm_loop].pm_id}&task=delete'>{$Application660}</a><br/>
            <input type='checkbox' name='message_{$pms[pm_loop].pm_id}' value='1' style="margin:0; height:15px; width:15px;"/>
        </div>
        <a class="f-left" href="UserMessagesView.php?pm_id={$pms[pm_loop].pm_id}"><img src="{$pms[pm_loop].pm_user->user_photo('./images/nophoto.gif')}" class='img' width="92px" alt="{$pms[pm_loop].pm_user->user_info.user_username} {$Application500}"></a>
        <a href="#" class="msg-info-c">
            <div class="msg-user-re"><b><a href="UserMessagesView.php?pm_id={$pms[pm_loop].pm_id}">{$pms[pm_loop].pm_user->user_info.user_username}</a></b></div>
            <a href="UserMessagesView.php?pm_id={$pms[pm_loop].pm_id}"><div class="msg-datet">{$datetime->cdate("`$setting.setting_timeformat` `$setting.setting_dateformat`", $datetime->timezone($pms[pm_loop].pm_date, $global_timezone))}</div></a>
            <a href="UserMessagesView.php?pm_id={$pms[pm_loop].pm_id}"><div class="user-msg-c">{$pms[pm_loop].pm_body|truncate:100|choptext:75:"<br>"}</div></a>
        </a>
    </div>
</a>

The output looks like this:

<a href="mylink"></a>
<div class="row">

     rest of content inside here

</div>

Answer 1

While you can place block elements in a in HTML5, you can not nest a elements.

You can only either use JavaScript to react on a click on the area outside of the inner links, or place a link behind the content using CSS positioning.

(But this is not good UX in general – the user does most likely not expect that certain parts of a piece of content are links to special targets, and clicking just slightly next to those links will take them someplace else …)