Link to home
Start Free TrialLog in
Avatar of Yucel Altingoz
Yucel AltingozFlag for United States of America

asked on

How can I set the width of each menu item in horizontal menu?

Hi
I wan to create top menu with two items: HOME and ABOUT.
The width of each item displayed depends on the width of the item name and the output looks like that:
HOME ABOUT.
I want the items to be displayed father from each other, like that:
   HOME    ABOUT    .
Can you please let me know how can I do this?
I am using ASP.NET on VS2010
Thanks in advance,
Dave
Avatar of Rahul Agarwal
Rahul Agarwal
Flag of India image

Here's a good example that I just wrote up.
Just change the padding on "#menu li a" to increase/decrease the spacing between menu items.

Also:

padding: 4px 10px
padding: [top/bottom] [right/left]

is short-hand for

padding: 4px 10px 4px 10px;
padding: [top] [right] [bottom] [left]
Bah, browser was acting up and didn't let me post the code.
Here it is:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        #page
        {
            border: solid 1px red;
            margin: 0px auto;
            height: 700px;
            width: 1000px;
            background-color: #EEE;
        }
        #menu
        {
            margin-top: 30px;
            padding: 0px;
            background-color: #00F;
            float: left;
            width: 100%
        }
        #menu ul
        {
            margin: 0px;
            padding: 0px;
            margin-left: 10px;
        }
        #menu li
        {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            display: inline-block;
            float: left;
        }
        #menu li a
        {
            text-decoration: none;
            color: #FFF;
            padding: 4px 10px;
            font-weight: bold;
            /*border: solid 1px red;*/ /*Uncomment this line so you can mre easily see where the individual menu items are*/
            float: left;
        }
        #menu li a:hover
        {
            color: #00F;
            background-color: #FFF;
        }
    </style>
</head>
<body>
    <div id="page">
        <div id="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Forums</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
        <div style="clear: both"></div>
    </div>
</body>
</html>

Open in new window

Avatar of Yucel Altingoz

ASKER

Hi P1ST0LPETE:
Thank you for your reaply.

I understand you are talking about making changes in .CSS file.
I am very new to a web design and right now I use only Visual Studio for my design and some changes on ASP.net file itself.
Can I set the width of each menu item using Visual Studio only (or in ASP.NET)?
At this moment, if it is possible, I would not like to start making .CSS file, unless this is the only choice I have.
Do I have to create  .CSS file?
If yes, will it overwite setups made on Master file?
Where can I learn how to work with .CSS file?

Thanks,
Dave
 
Hi Dave,

My example above was just basic example of how to do a typical menu.  If you copy all of the code above, and past it into a new html file, you can then load that html file into a browser of your choice and see how it works.  If you are struggling to see how to apply my example to your current code in your asp.net project, then post your code for your menu, and I can show you how to modify it.

Concerning Cascading Style Sheets (CSS):  Knowing CSS is essential for any person that is developing websites, as it is (or should be) the code that defines the style (i.e. colors, fonts, placement of elements, etc.) of a website.  The good news is, CSS is extremely easy to learn, and there are tons of resources online to teach you how to use CSS.  A great place to start learning CSS would be here: http://www.w3schools.com/css/default.asp

- Pete
Here's a little bit more help.  Lets say you are using an <asp:Menu> control, so you have something on your asp.net page that looks like this:

<div>
    <asp:Menu ID="Menu1" runat="server">
        <Items>
            <asp:MenuItem Text="Home" Value="Home" />
            <asp:MenuItem Text="About" Value="About" />
        </Items>
    </asp:Menu>
</div>


If you load your .aspx page in a browser and then view the source of the page, you will see that the html from the menu control above generated the following html:

<div>
    <a href="#Menu1_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=4GnjYi" width="0" height="0" style="border-width:0px;" /></a>
    <div id="Menu1">
          <ul class="level1">
            <li><a class="level1" href="#" onclick="__doPostBack(&#39;Menu1&#39;,&#39;Home&#39;)">Home</a></li>
            <li><a class="level1 selected" href="#" onclick="__doPostBack(&#39;Menu1&#39;,&#39;About&#39;)">About</a></li>
        </ul>
    </div><a id="Menu1_SkipLink"></a>
</div>

So my suggestion, is instead of allowing Microsoft to create all that nasty code for your menu, simply create it yourself so that it is clean and easy to read/understand and does exactly what you want, like this:

<div id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
    </ul>
</div>

Either way, you are going to need to style the elements of the page (i.e. the <div>, <ul> and <li> tags) using CSS.
Few tips on CSS and this menu.  So lets say you are using the following html markup to create your menu:

<div id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
    </ul>
</div>

To style a specific element, you assign the element an ID.  As you see in the markup above, the <div> tag has an ID property on it (i.e. id="menu").
So to access that element and style it using CSS, you use the "#" sign with the elements ID. Example:

#menu
{
      /* Styling for <div id="menu" goes here */
}

Now, if there are elements inside of the menu <div> (which there are), I could place a global style on specific types of elements within the div.  So for example, lets say I wanted to style all the <li> tags inside of the menu <div>.  To do that I would to this:

#menu li
{
      /* Styling for all the <li> tags inside of <div id="menu"> goes here */
}

I can continue with this same idea, and place a global style on all elements inside of <li> tags that are inside of the menu <div>.  So for example, lets say I wanted to style all the <a> tags that are inside of <li> tags that are inside of the menu <div>.  To do that I would to this:

#menu li a
{
      /* Styling for all <a> tags that are inside of a <li> tag that is inside of <div id="menu"> */
}

If I wanted to specifically style a specific menu item, then as mentioned above I would give the items ID attributes, so my markup would look like this:

<div id="menu">
    <ul>
        <li><a id="linkHome" href="#">Home</a></li>
        <li><a id="linkAbout" href="#">About</a></li>
    </ul>
</div>

So lets say I wanted to make my home link have some spacing around it, lets say 30 pixels spacing on the left and right of the home link text, and 5 pixels of spacing on the top and bottom of the text.  I would write some CSS that looked like this:

#linkHome
{
      padding: 5px 30px 5px 30px;
}

Which also could be written in short hand like this:

#linkHome
{
      padding: 5px 30px;
}

Or if I wanted only 5 pixels of padding on ALL sides I could write it like this:

#linkHome
{
      padding: 5px;
}

Or if I wanted all sides to have 5 pixels of padding except for the right side, which I wanted to have 15 pixels of padding, I would do this:

#linkHome
{
      padding: 5px 15px 5px 5px;
}
Hi P1ST0LPETE:

Does it mean that I need to convert my main page to HTML or I can continue working with aspx file(Master1.master) as before and only need to add styles.css?

Thanks,
Dave
You can add html markup directly to your Master1.master page.  For example, lets say your current master page looks like this:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Master1.master.cs" Inherits="TestWeb.Master1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Menu ID="Menu1" runat="server">
            <Items>
                <asp:MenuItem Text="Home" Value="Home" />
                <asp:MenuItem Text="About" Value="About" />
            </Items>
        </asp:Menu>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
       
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>


You can then swap out the <asp:Menu> and replace it with your own custom html menu like this:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Master1.master.cs" Inherits="TestWeb.Master1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
       
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>


However, you will probably want to build your menu with <asp:LinkButton>'s instead of using <a> tags - that way you have access to your links in server side code.
So your menu would look like this:

<div id="menu">
    <ul>
        <li><asp:LinkButton ID="lkHome" runat="server" Text="Home" /></li>
        <li><asp:LinkButton ID="lkAbout" runat="server" Text="About" /></li>
    </ul>
</div>
Here is a complete working example:

Master Page Markup:
 
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Master1.master.cs" Inherits="TestWeb.Master1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #page { border: solid 1px red; margin: 0px auto; height: 700px; width: 1000px; background-color: #EEE; }
        #menu { margin-top: 30px; padding: 0px; background-color: #00F; float: left; width: 100% }
        #menu ul { margin: 0px; padding: 0px; margin-left: 10px; }
        #menu li { list-style-type: none; margin: 0px; padding: 0px; display: inline-block; float: left; }
        #menu li a { text-decoration: none; color: #FFF; padding: 4px 10px; font-weight: bold; float: left; }
        #menu li a:hover { color: #00F; background-color: #FFF; }
    </style>
    <asp:ContentPlaceHolder ID="head" runat="server" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="page">
        <div id="menu">
            <ul>
                <li><asp:LinkButton ID="lkHome" runat="server" Text="Home" OnClick="Page_Navigation" /></li>
                <li><asp:LinkButton ID="lkAbout" runat="server" Text="About" OnClick="Page_Navigation" /></li>
            </ul>
        </div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" />
    </div>
    </form>
</body>
</html>

Open in new window



Master Page Code Behind:
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace TestWeb
{
    public partial class Master1 : System.Web.UI.MasterPage
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Page_Navigation(object sender, EventArgs e)
        {
            LinkButton link = (LinkButton)sender;

            switch (link.ID)
            {
                case "lkHome": Response.Redirect("Home.aspx"); break;
                case "lkAbout": Response.Redirect("About.aspx"); break;
            }
        }
    }
}

Open in new window



Home Conent Page Markup:
 
<%@ Page Title="" Language="C#" MasterPageFile="~/Master1.Master" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="TestWeb.Home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <p>Hello From Home Page</p>
</asp:Content>

Open in new window



About Content Page Markup:
 
<%@ Page Title="" Language="C#" MasterPageFile="~/Master1.Master" AutoEventWireup="true" CodeBehind="About.aspx.cs" Inherits="TestWeb.About" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <p>Hello From About Page</p>
</asp:Content>

Open in new window

Hi P1ST0LPETE
Thank you very much for the code.

I understand that I need to create en empty asp project and put the code to Master1.master, Master1.master.vb, Home and About files accordinly.
Do you have by any chance code written in VB? My project is a VB project.

Thank you very much again,
Dave
I believe the code behind written in VB would look like this:

 
Public Class Master1
    Inherits System.Web.UI.MasterPage

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Protected Sub Page_Navigation(ByVal sender As Object, ByVal e As System.EventArgs)

        Dim link As LinkButton = CType(sender, LinkButton)

        Select Case link.ID
            Case "lkHome"
                Response.Redirect("Home.aspx")
            Case "lkAbout"
                Response.Redirect("About.aspx")
        End Select

    End Sub

End Class

Open in new window


Hi Again
I tried to run the code and got the following errors:

Error: Could not load type 'TestWeb.Master1'.      
Warning: File 'Master1.master.cs' was not found.
Warning: File 'Home.aspx.cs' was not found.
Warning: File 'About.aspx.cs' was not found.

Thanks,
Dave

Error: Could not load type 'TestWeb.Master1'.

When I created a new project to write out your code examples I named it "TestWeb".  So just replace "TestWeb" with whatever the name of your project is. Also replace the ".cs" with ."vb" where ever it is used, as you are coding in VB.Net and my example was in C#.net

The page directive at the top of the master page probably looks like this:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Master1.master.cs" Inherits="TestWeb.Master1" %>

And it needs to look like this:

<%@ Master Language="VB" AutoEventWireup="true" CodeBehind="Master1.master.vb" Inherits="YourProjectName.Master1" %>

-----------------------------------------------

On your content pages, your page directive probably looks like this:

<%@ Page Title="" Language="C#" MasterPageFile="~/Master1.Master" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="TestWeb.Home" %>

And it needs to look like this:

<%@ Page Title="" Language="VB" MasterPageFile="~/Master1.Master" AutoEventWireup="true" CodeBehind="Home.aspx.vb" Inherits="YourProjectName.Home" %>


Hi (Sorry, but I stil have problems)
Name of my project is iBSHC5

So, master page looks as follows:
<%@ Master Language="VB" AutoEventWireup="true" CodeBehind="Master1.master.vb" Inherits="iBSHC5.Master1" %>

Home page looks as follows:
<%@ Page Title="" Language="VB" MasterPageFile="~/Master1.Master" AutoEventWireup="true" CodeBehind="Home.aspx.vb" Inherits="iBSHC5.Home" %>

About page looks as follows:
<%@ Page Title="" Language="VB" MasterPageFile="~/Master1.Master" AutoEventWireup="true" CodeBehind="About.aspx.vb" Inherits="iBSHC5.About" %>

I don't have About.aspx.vb Home.aspx.vb files (I don't know what to put there)

The errors I have. are:
Error: Could not load type 'iBSHC5.Master1'.      
Warning:File 'About.aspx.vb' was not found.
Warning:File 'Home.aspx.vb' was not found.

Thanks,
Dave
ASKER CERTIFIED SOLUTION
Avatar of P1ST0LPETE
P1ST0LPETE
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank you very much,
Dave