0

これがasp.netページとCSSのコードです。誰かが私が間違っていることを見つけてくれることを願っています。私はcssとasp.netが初めてです。私が知っている知識のほとんどを Div タグなどで使用しました。

 <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MHConstruction.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="~/NewStyles/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">

        <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Homes.jpg" ImageAlign="Middle" Width="960px"/>
            <div class="title">

            </div>
            <div class="loginDisplay" dir="ltr">
                <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                    <AnonymousTemplate>
                        [ <a href="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>
            <center>
            <div class="clear hideSkiplink">

                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" >
                    <Items>
                        <asp:MenuItem NavigateUrl="~/HomePage.aspx" Text="Home"/>
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                        <asp:MenuItem NavigateUrl="~/Basic.aspx" Text="Basic"/>
                        <asp:MenuItem NavigateUrl="~/Standard.aspx" Text="Standard"/>
                        <asp:MenuItem NavigateUrl="~/Luxury.aspx" Text="Luxury"/>
                        <asp:MenuItem NavigateUrl="~/CustomerHome.aspx" Text="Customers"/>
                        <asp:MenuItem NavigateUrl="~/AdminHome.aspx" Text="Admin"/>
                        <asp:MenuItem NavigateUrl="~/Logout.aspx" Text="Logout"/>
                    </Items>
                </asp:Menu>

            </div>
            </center>
        </div>
        <div class="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="footer">

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

また、現在使用している CSS は次のとおりです。ナビメニューに適用するcssだけ掲載しました。

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



div.menu
{
    float:right;
    position:relative;

    text-align:left;
}

div.menu ul
{
    list-style:none;
    position:relative;
    left:35%;

}

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;
}
4

1 に答える 1

0

2 つのこと: メニューのスタイル ブロックと同じ方法でスタイルを設定する必要があります。

<style type="text/css"> 
    /* <![CDATA[ */
    #NavigationMenu img.icon { border-style:none;vertical-align:middle; }
    #NavigationMenu img.separator { border-style:none;display:block; }
    #NavigationMenu img.horizontal-separator { border-style:none;vertical-align:middle; }
    #NavigationMenu ul { list-style:none;margin:0;padding:0;width:auto; }
    #NavigationMenu ul.dynamic { z-index:1; }
    #NavigationMenu a { text-decoration:none;white-space:nowrap;display:block; }
    #NavigationMenu a.static { padding-left:0.15em;padding-right:0.15em; }
    #NavigationMenu a.popout { background-image:url("/WebResource.axd?d=EMSWJvMqJTxHa4d4S135BwGFA2dQw5pII3m5syZ8p1nYnD3jAotY_XzYmVV_PYohvnNLCZwIu1hO3tdfjxDCY21kymwZShHj9fcW_mi5QQ41&t=634933845276428750");background-repeat:no-repeat;background-position:right center;padding-right:14px; }
    /* ]]> */
</style>

次に、メニューのラッピング div を 50% にする必要があります。

            <div style="border:1px solid red; width:50%">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="true" Orientation="Horizontal" >
                    <Items>
                        <asp:MenuItem NavigateUrl="~/HomePage.aspx" Text="Home" />
                    </Items>
                </asp:Menu>
            </div>

次に、white-space: nowrap;(ul/li/a クラスではなく) メニュー クラス自体の設定を使用して、アイテムがラップされないようにします。

于 2013-09-17T03:05:46.597 に答える