How to add spaces between ASP Menu?

Question

4.00/5 (1 vote)

See more:

Hey Guys,

I created a menu control, paired it with web.sitemap where I put the items I want to see in the page. I was able to change the look of the menu from css by adding ID in the menu control. But I cant find where should I do the changes to add space on each menu.

Here's my web.sitemap file

XML

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">
        
         <siteMapNode url="~/" title="Home"  description="Home">
        <siteMapNode url="Default.aspx" title="Home"  description="Go to HomePage" />
        
        <siteMapNode url="~/Forum/Forum.aspx" title="Forums" description="Go to Forums" >
        <siteMapNode url="~/Forum/AnimeForum.aspx" title="Anime"  description="Anime Discussion" />
        <siteMapNode url="~/Forum/GamesForum.aspx" title="Games"  description="Gaming Discussion" />
        <siteMapNode url="~/Forum/HardwareForum.aspx" title="Hardware"  description="Hardware Discussion" />
        <siteMapNode url="~/Forum/SoftwareForum.aspx" title="Software"  description="Software Discussion" />
        </siteMapNode>
  
        <siteMapNode url="ContentList.aspx" title="Content"  description="Go to Reviews and News">
        </siteMapNode>

        <siteMapNode url="VideoList.aspx" title="Video"  description="Go to Videos" >
        </siteMapNode> 
    </siteMapNode>
</siteMap>

And her's the code in the masterpage that holds the menu

ASP.NET

<nav id="Nav">

       <asp:Menu ID="Menu1" runat="server" CssClass="MainMenu" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" StaticEnableDefaultPopOutImage="False">
       </asp:Menu>

           <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
           <asp:SiteMapPath ID="SiteMapPath1" runat="server"></asp:SiteMapPath><br /> 
        
       </nav>

Here's the css code:

CSS

 #Menu1{
Padding-Left :80px;
 }

Thanks,

Posted 22-Feb-14 21:22pm

KatsuneShinsengumi

Updated 22-Feb-14 22:53pm

v5

Add a Solution

4 solutions

Solution 1

You can use css Padding for that.

C#

.yourClass
{
padding-left:50px;
}

Live demo : CSS Padding

CSS Padding

UPDATE

XML

<asp:Menu ID="Menu1" runat="server"  DataSourceID="SiteMapDataSource1"
        RenderingMode="List" StaticDisplayLevels="2" CssClass="MainMenu">
    <LevelMenuItemStyles>
         <asp:MenuItemStyle CssClass="SiteMapLevel1" />
         <asp:MenuItemStyle CssClass="SiteMapLevel2" />
     </LevelMenuItemStyles>

</asp:Menu>

CSS

C#

.SiteMapLevel1
{
    padding-bottom: 5px;
    padding-top: 5px;

}

.SiteMapLevel2
{

    padding-bottom: 5px;
    padding-top: 5px;
}

Check here for more info : Using CSS and Styles with the Menu Control

Posted 22-Feb-14 21:40pm

Sampath Lokuge

Updated 22-Feb-14 23:35pm

v3

Comments

KatsuneShinsengumi 23-Feb-14 3:50am

Hey,

I tried this already, my problem is that the whole menu objects are moving left instead of having 50px space in ever left side of each menu item.

Sampath Lokuge 23-Feb-14 3:58am

Can you put your html and css code snippets for your menu.Then only we can give an exact solution for you.

KatsuneShinsengumi 23-Feb-14 4:24am

I update the question so you can see it.

Sampath Lokuge 23-Feb-14 4:38am

Where's the code snippet for your css 'MainMenu' ?

KatsuneShinsengumi 23-Feb-14 4:54am

There it is. Please take a look.

Sampath Lokuge 23-Feb-14 5:34am

I have updated my solution.Please check that.

KatsuneShinsengumi 23-Feb-14 6:31am

Hey man,

It's still not working, I'll pass for it for now. I'll fix the other problems for now. Thank you very much.

Solution 2

use & nbsp after each menu...:)

Posted 22-Feb-14 22:12pm

Pranav-BiTwiser

Comments

KatsuneShinsengumi 23-Feb-14 4:26am

The declaration of the menu objects are inside an xml file. I'm also trying to use the but the code always give error inside the xml file. Please see the code I add it in my question.

Thanks,

Solution 4

try and use $#160 in xml file...after the menu's

thanks...:)

Posted 23-Feb-14 0:59am

Pranav-BiTwiser

Updated 23-Feb-14 1:00am

v2

Comments

KatsuneShinsengumi 23-Feb-14 7:01am

I also tried that, I got the code from stackoverflow, it works on texts inside hovers. But it doesnt move the menu items.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

KatsuneShinsengumi · Accepted Answer · 2014-02-23T00:32:00

Solution 3

Hey Guys,

Just for the sake of not letting this hang without an answer I'll just make my menu items static for now. I won't use web.sitemap and just add the item menus in the masterpage where the menu is located, give them id and use those id in css to manipulate them.

Thanks,

Posted 23-Feb-14 0:32am

KatsuneShinsengumi

Updated 23-Feb-14 5:15am

v2