asp.net menu control

Question

0.00/5 (No votes)

See more:

Am using Asp.net 4. Have a Asp.net Menu control that displays horizontally on my friends computer, like this.

Home About Contact

When I used on my computer the menu control displays vertically, like this.
(even i choose Asp.net web site option vs2010 MY ASp .Net application default page)

Home
About
Contact

XML

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">
    <div class="page">
        <div class="header">
            <div class="title">
                <h1>
                    My ASP.NET Application
                </h1>
            </div>
            <div class="loginDisplay">
                <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                    <AnonymousTemplate>
                        [ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ]
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
                        [ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
                    </LoggedInTemplate>
                </asp:LoginView>
            </div>
            <div class="clear hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                    </Items>
                </asp:Menu>
            </div>
        </div>
        <div class="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="footer">

    </div>
    </form>
</body>
</html>

this is source it should display horizontal menu but its shows verticaly and my friends system its working fine

Posted 6-Sep-12 7:48am

deeptul

Updated 6-Sep-12 7:59am

v2

Add a Solution

Comments

ali_heidari_ 6-Sep-12 13:59pm

i think you didnt care about your width menu ... then if monitor width is wide it will show horizentally but if monitor width is low then it forced to show itself vertically ...

deeptul 6-Sep-12 14:06pm

can u please give me soultion

Christian Amado 6-Sep-12 14:51pm

What is the content of you menu css?

deeptul 6-Sep-12 15:20pm

/* DEFAULTS
----------------------------------------------------------*/

body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}

a:link, a:visited
{
color: #034af3;
}

a:hover
{
color: #1d60ff;
text-decoration: none;
}

a:active
{
color: #034af3;
}

p
{
margin-bottom: 10px;
line-height: 1.6em;
}

/* HEADINGS
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}

h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}

h2
{
font-size: 1.5em;
font-weight: 600;
}

h3
{
font-size: 1.2em;
}

h4
{
font-size: 1.1em;
}

h5, h6
{
font-size: 1em;
}

/* this rule styles

and

tags that are the
first child of the left and right table columns /
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}

/ PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------/

.page
{
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}

.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
}

.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}

.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}

.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}

.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}

/ TAB MENU
----------------------------------------------------------/

div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
}

div.menu
{
padding: 4px 0px 4px 8px;
}

div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}

div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}

div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}

/ FORM ELEMENTS
----------------------------------------------------------/

fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}

fieldset p
{
margin: 2px 12px 10px 10px;
}

fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}

fieldset label.inline
{
display: inline;
}

legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}

input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}

input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}

div.accountInfo
{
width: 42%;
}

/ MISC
----------------------------------------------------------*/

.clear
{
clear: both;
}

.title
{
display: block;
float: left;
text-align: left;
width: auto;
}

.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
}

.loginDisplay a:link
{
color: white;
}

.loginDisplay a:visited
{
color: white;
}

.loginDisplay a:hover
{
color: white;
}

.failureNotification
{
font-size: 1.2em;
color: Red;
}

.bold
{
font-weight: bold;
}

.submitButton
{
text-align: right;
padding-right: 10px;
}

Christian Amado 6-Sep-12 15:22pm

What are you doing man? Improve your question!

deeptul 6-Sep-12 15:25pm

sir its just simple deafult master page comes with visual studio .net asp.net we site option its menu shows vertcally by my browser

deeptul 6-Sep-12 15:44pm

Thank you sir,
i tried to change css as u mentioned but still these all menu shows vertically i searched on google but even i wont find any soultion.
actually prior to that i run older version master page will it affect my version 4.0 i being frusted now still thank you so much

ali_heidari_ 6-Sep-12 16:02pm

whats your browser?

deeptul 7-Sep-12 0:31am

i used Googlechrome should i install mozilla so that problem may be solved.

deeptul 7-Sep-12 7:54am

i am using googlechrome please help me out...

ali_heidari_ 7-Sep-12 11:15am

did you try with another browser?

deeptul 8-Sep-12 23:44pm

Yes sir i install Mozilla but the problem not get solved its shows menu vertically.
Thanking You,

1 solution

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)

Christian Amado · Answer 1 · 2012-09-06T09:27:00

Solution 1

In your css replace the div.menu with this:

CSS

div.menu
{
    padding: 4px 0px 4px 8px;
    width: 100%;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
}

hope it helps

Posted 6-Sep-12 9:27am

Christian Amado