Hyperlink on the baseline of a DIV

Question

Hello,

I have the following markup:

<div class="ui-accordion ui-widget" style="margin: 10px 0px 12px 0px;">
    <h3 class="ui-helper-reset ui-corner-top ui-accordion-header ui-state-default" 
        style="height: 24px; font-weight: bold; padding: 5px 0px 0px 12px">Title</h3>
    <div class="ui-accordion-content-active ui-widget-content ui-corner-bottom accordionContent" 
         style="height:150px; padding: 8px 12px;">
        <ul>
            <li style="background-image:url('/_assets/images/image1.png');">
               <%= Html.ActionLink("Link 1", "Index", "Home") %>
            </li>
            <li style="background-image:url(/_assets/images/image2.png);">
               <%= Html.ActionLink("Link 2", "Index", "Home") %>
            </li>
            <li style="background-image:url(/_assets/images/image3.png);">
               <%= Html.ActionLink("Link 3", "Index", "Appointment") %>
            </li>
        </ul>
    </div>
</div>

that render the following box on Chrome (without the red rectangle)

I would like to add an hyperlink just in the place of the red rectangle. How can I do it?

Please note that all the used styles are inline and the classes are all from jquery UI standard classes. I am not a designer and maybe this markup can be optimized. Any advice is welcomed... :)

Thanks for helping!

Answer 1

Add a div inside the <div class="ui-accordion ...> with these styles:

position: absolute;
right: 4px;
bottom: 4px;
width: 5em;
height: 1.5em;

[EDIT] The parent div must have position: relative or it won't work (thanks to Daniel)[/EDIT]

Note that you should give the box a definite size; you can't have it "grow" by itself. width: 100%; is ok, though.

Also note that this div doesn't extend the size of the parent div. If the accordion is too small, then the last entry will overlap with your link. The solution is to add an empty div with the necessary height to accordion to make room for the absolutely positioned one.

Answer 2

css

.classForAction
{
border :red;
}


<%= Html.ActionLink("Link 1", "Index", "Home", new { @class = "classForAction" })

amybe it helps