Image next to RadMenu DIV? in UI for ASP.NET AJAX Menu

Ryan Mariotti

11 posts

Member since:
Mar 2010

Posted 06 Jul 2010 Link to this post

I am using RadMenu to display an all-image root menu. To accomplish my HTML design, I need to place an image directly to the left of my all-image RadMenu. The problem I'm running into is that RadMenu is wrapped by a DIV (id of "dnn_dnnRADMENU_RadMenu1") which causes a line break and my "nav_left.jpg" image to sit on a line ABOVE the Radmenu. I've tried applying "display:inline" to the nav_left.jpg image element as well as the RadMenu DIV wrapper but I don't see anything change.

How can I get this image to sit on the same line as the RadMenu and avoid the wrapping that is shown in the attached screenshot?

Many thanks for your help!

    
            <div id="topnav"> 
        
                <img src="/dotnetnuke/Portals/0/Skins/CL/images/nav_left.jpg" width="55" height="110" hspace="0" vspace="0" border="0" /> 
        
                <!-- Content emitted by Navigation module...cannot change this HTML --> 
        
                <div id="dnn_dnnRADMENU_RadMenu1" class="RadMenu RadMenu_"> 
        
                    <ul class="rmHorizontal rmRootGroup"> 
        
                        <li class="rmItem rmFirst"><a href="http://cms.CL.com/dotnetnuke/About.aspx" class="rmLink"><img alt="" src="Portals/0/Skins/Choicelunch/images/About.jpg" class="rmLeftImage" /><span class="rmText"></span></a> 
        
                            <div class="rmSlide"> 
        
                                <ul class="rmVertical rmGroup rmLevel1"> 
        
                                    <li class="rmItem rmFirst"><a href="http://cms.CL.com/dotnetnuke/About/AboutUs1.aspx" class="rmLink"><span class="rmText">About Us 1</span></a></li> 
        
                                    <li class="rmItem rmLast"><a href="http://cms.CL.com/dotnetnuke/About/AboutUs2.aspx" class="rmLink"><span class="rmText">About Us 2</span></a></li> 
        
                                </ul> 
        
                            </div> 
        
                        </li>

20100706-image-wrapping-issue-radmenu.gif

Yana

Admin

5030 posts

Posted 07 Jul 2010 Link to this post

Hi Ryan Mariotti,

Have you tried setting "float: left" to the image?

<img src="/dotnetnuke/Portals/0/Skins/CL/images/nav_left.jpg" width="55" height="110" hspace="0" vspace="0" border="0" style="float: left" />

Best wishes,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Ryan Mariotti

11 posts

Member since:
Mar 2010

Posted 09 Jul 2010 Link to this post

I did try float:left, which didn't work. However, I ended up putting the side-by-side graphic and navigation in a table to get them to play nice:

<table>

<tr>

<td>my image</td>

<td>RadMenu</td>

</tr>

</table>