Put the image above the text on a Menu Item

6 posts, 0 answers
  1. Hind
    Hind avatar
    20 posts
    Member since:
    Jun 2011

    Posted 16 Sep 2011 Link to this post

    Hello,

    I would like to create a Menu in which, for each item, i would display an image above the text. Normally, the image is display to the left of the text.
    How can i do to obtain the result i need?

    Thank You.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 16 Sep 2011 Link to this post

    Hello Hind,

    Try the following CSS to put the image above the text on a Menu Item.
    CSS:
    <style type="text/css">
    .RadMenu .rmText
     {
       display:table-row !important;
     }
    </style>

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Hind
    Hind avatar
    20 posts
    Member since:
    Jun 2011

    Posted 16 Sep 2011 Link to this post

    Hello,
    Thank You, it is more better. But i Still have one small problem. In fact I have A White margin to the left of the Menu Item Image that I prefer to remove it.  I try to give margin-left of the .RadMenu Class some values, but it didn't change any thing.
    ( You can find attach the menu i create to see better the problem i mention).
    Pleaze could You give me other ideas?

    Thanks again,

    Hind
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 17 Sep 2011 Link to this post

    Hello Hind,

    Try setting the following CSS to display the image towards left.
    CSS:
    <style type="text/css">
    . . . .
    .RadMenu .rmLink
    {
     padding-left:1px !important;
    }
    </style>

    Thanks,
    Shinu.
  6. Hind
    Hind avatar
    20 posts
    Member since:
    Jun 2011

    Posted 23 Sep 2011 Link to this post

    Hello,

    I try what You have suggest to me, it give me the result that u can see at the first image i attached.
    Then I try to add this snippet:

    .RadMenu_ProjectsMenu .rmText
    {
        color:#5e6abe;
        text-decoration:none;
        display:table-row!important;
        margin-left: -25px;
        
    }
    This give me the result at the "padding-margin" figure .  Note that the menu style still the same when changing the "margin-left" value.


    and when i just put the upper  code without specifiying the paddin-left parameter at  .RadMenu .rmLink, it give me the result shown at the "margin-left" figure.

    I like to have the image inside the menu item borders without any space at the sides.

    Thank you for helping,

    Sincerly,

    Hind
  7. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 28 Sep 2011 Link to this post

    Hi Hind,

    Try to provide a live URL in order to examine the behavior on your page.

    Kind regards,
    Dimitar Terziev
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017