locked
DIV inside HREF RRS feed

  • Question

  • User1145790412 posted

    Hi, I need to create an <a href> that contains a <div> inside like the HTML below:

    <a class="ftv-pagination-arrow ftv-pagination-first" href="#" rel="first">
    <div class="ftv-tooltip-content">page 1</div>
    </a>

    So I created a LinkButton and added a Literal inside of it but it is not working, anything wrong? Thanks

    <asp:LinkButton ID="lbFirst" runat="server" CssClass="ftv-pagination-first" Text="<< " rel="first">
        <asp:Literal runat="server" ID="ltFirstPage"></asp:Literal>
    </asp:LinkButton>
    
    Tuesday, June 4, 2013 10:57 AM

Answers

  • User281315223 posted

    You can use an ASP.NET Panel Control to render a <div> element and if you need to add the class that you require, you can just use the CssClass property of the Panel as seen below : 

    <asp:LinkButton ID="lbFirst" runat="server" CssClass="ftv-pagination-first" rel="first">
         <asp:Panel CssClass="ftv-tooltip-content" runat="server">page 1</asp:Panel>
    </asp:LinkButton>

    which will render the following markup : 

    <a id="lbFirst" class="ftv-pagination-first" rel="first" href="javascript:__doPostBack('lbFirst','')">
        <div class="ftv-tooltip-content">Page 1</div>
    </a>

    (I removed the Text property of your LinkButton as I was unsure if you wanted two sets of text elements within your link)

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 4, 2013 11:10 AM

All replies

  • User281315223 posted

    You can use an ASP.NET Panel Control to render a <div> element and if you need to add the class that you require, you can just use the CssClass property of the Panel as seen below : 

    <asp:LinkButton ID="lbFirst" runat="server" CssClass="ftv-pagination-first" rel="first">
         <asp:Panel CssClass="ftv-tooltip-content" runat="server">page 1</asp:Panel>
    </asp:LinkButton>

    which will render the following markup : 

    <a id="lbFirst" class="ftv-pagination-first" rel="first" href="javascript:__doPostBack('lbFirst','')">
        <div class="ftv-tooltip-content">Page 1</div>
    </a>

    (I removed the Text property of your LinkButton as I was unsure if you wanted two sets of text elements within your link)

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 4, 2013 11:10 AM
  • User653228039 posted

    What type of behavior are you expecting?  What "isn't working"?  While you can technically place a div inside an anchor, it won't really do too much.  The text "page 1", in this case, should still behave like a link.  I'm assuming ftv is some sort of front-end library that allows you to add styles and themes to elements.  So I'll take a stab and assume the tooltip isn't working?  If that is the case, I would imagine the tooltip won't fire because the hoverstate of the anchor is taking precedence.  Try surrounding the anchor in an element that has the tooltip class, or place the tooltip class on the anchor itself.

    Tuesday, June 4, 2013 11:12 AM