How do you use the menu to use image in the upper part and use text which is aligned at the center with the image on top

2 posts, 0 answers
  1. Daniel
    Daniel avatar
    4 posts
    Member since:
    May 2011

    Posted 31 Oct 2011 Link to this post

    How do you use the menu to use image in the upper part and use text which is aligned at the center with the image on top

     <table style="width:90%;">
            <tr>
                <td class="style4">
                    &nbsp;</td>
                <td class="style2">
                    &nbsp;</td>
                <td class="style3">


        <telerik:RadMenu ID="RadMenu1" Runat="server" Skin="" CssClass="CSMBMenu" 
                        EnableRoundedCorners="True" >
            <Items>
                <telerik:RadMenuItem runat="server" CssClass="menu" 
                    HoveredImageUrl="~/Images/building_small_cadre.jpg" 
                    ImageUrl="~/Images/building_small.jpg" 
                    SelectedImageUrl="~/Images/building_small_cadre.jpg" Text="Bâtisses" 
                    Width="83px">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" CssClass="menu" 
                    HoveredImageUrl="~/Images/locker_small_cadre.jpg" 
                    ImageUrl="~/Images/locker_small.jpg" 
                    SelectedImageUrl="~/Images/locker_small_cadre.jpg" Text="Casiers" Width="83px">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" CssClass="menu" 
                    HoveredImageUrl="~/Images/books_small_cadre.jpg" 
                    ImageUrl="~/Images/books_small.jpg" 
                    SelectedImageUrl="~/Images/books_small_cadre.jpg" Text="Dictionnaire" 
                    Width="83px">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" CssClass="menu" 
                    HoveredImageUrl="~/Images/security_small_cadre.jpg" 
                    ImageUrl="~/Images/security_small.jpg" 
                    SelectedImageUrl="~/Images/security_small_cadre.jpg" Text="Accès" Width="83px">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>
                </td>
                <td></td>
            </tr>
            </table>

    Here is the RadMenu but i can't get the text to align in the center, i guess i have to use the right css but dont have a clue on how to do that.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 01 Nov 2011 Link to this post

    Hello Daniel,

    You can try the following CSS:

    CSS:
    <style type="text/css">
      .RadMenu  .rmText
      {
        display:table-row !important;
        float:left !important;
        margin-left:20px !important;
      }
    </style>

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top