asp.net 上的 css 菜单控件

Question

I'm creating a asp.net web page and some auto generated CSS is over riding my style sheet.我正在创建一个 asp.net 网页，并且一些自动生成的 CSS 覆盖了我的样式表。 I'm not sure where the properties would be to set the values properly, or how to disable the auto generated CSS by my web application.我不确定属性将在哪里正确设置值，或者如何禁用我的 Web 应用程序自动生成的 CSS。 Here is the code.这是代码。

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

<!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 id="Head1" runat="server" >
<title>Title</title>
<link href="../Styles/Styles.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="pageWrapper">
<div id="header"></div>
<div id="navigation">
    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" 
        Width="100%"   StaticItemFormatString="&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp; {0} &nbsp">
    <Items>
        <asp:MenuItem NavigateUrl="../Default.aspx" Text="Home" Value="Home">
        </asp:MenuItem>
        <asp:MenuItem NavigateUrl="../About.aspx" Text="About Me" Value="About Me">
        </asp:MenuItem>
        <asp:MenuItem NavigateUrl="../Programming.aspx" Text="Programming" 
            Value="Programming"></asp:MenuItem>
        <asp:MenuItem NavigateUrl="../Rants.aspx" Text="Rants" Value="Rants">
        </asp:MenuItem>
    </Items>
</asp:Menu></div>
<div id ="content"><asp:ContentPlaceHolder ID="Content" runat="server"> 
</asp:ContentPlaceHolder></div>
<div id="footer"><p>Footer</p></div>
</div>
</form>
</body>
</html>

and here is the css这是css

*
{
font-family: Arial, Sans-Serif;
}

body
{
margin: 0;
background-color:Black;
}

a
{
text-decoration: none;
color: #b30707;
} 

a:hover
{
text-decoration: underline;
}

#header
{
background-image: url(../img/header.jpg);
position:relative;
margin:auto;
height: 250px;
}

#pageWrapper
{
width:844px;
margin: auto;
background-color:#ccc;
}

#navigation
{
width: auto;
text-align:center;
height: 36px;
padding-top: 15px;
padding-left: 17px;
background-color: #9C989A
}

#content
{
border-style:solid;
border-width: 2px;
border-color: #b30707;
padding: 15px;
}

#footer
{
text-align:center;
}

I added this line to circumvent the problem with my menu control not spanning the parent element properly.我添加了这一行来规避我的菜单控件没有正确跨越父元素的问题。 I plan to remove it once the CSS works as expected.我计划在 CSS 按预期工作后将其删除。

StaticItemFormatString="&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp; {0} &nbsp"

Here is the rendered code as requested.这是按要求呈现的代码。

<!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 id="Head1"><title>
Title
</title><link href="Styles/Styles.css" rel="Stylesheet" type="text/css" /><style   type="text/css">
/* <![CDATA[ */
#Menu1 { width:100%; }
#Menu1 img.icon { border-style:none;vertical-align:middle; }
#Menu1 img.separator { border-style:none;display:block; }
#Menu1 img.horizontal-separator { border-style:none;vertical-align:middle; }
#Menu1 ul { list-style:none;margin:0;padding:0;width:auto; }
#Menu1 ul.dynamic { z-index:1; }
#Menu1 a { text-decoration:none;white-space:nowrap;display:block; }
#Menu1 a.static { padding-left:0.15em;padding-right:0.15em; }
#Menu1 a.popout { background-image:url("/WebResource.axd?  d=xjCds24on9XfE0DBajC4vRjqPwEZnPWc2oYtv118cqG5ViUhvTqbbGX-  kFRHBgPTk01twuHMnUgYwxiSOFVm4FdDFd1DRzkQC6dPTjhsTD81&t=634773918900000000");background-  repeat:no-repeat;background-position:right center;padding-right:14px; }
/* ]]> */
</style></head>
<body>
<form method="post" action="" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"     value="/wEPDwULLTEwMDUyNjYzMjhkZMqkGL/k2S4bUfDNJETNEEgreeQwj//8qMPH/3Jfp1j8" />
</div>


<script src="/WebResource.axd?d=JhWUzx8WLq0au7xqJj_xdb8v-NEKpWcJ1R4twSIpfaW-Hg2- LRc2Fqrqmb31NCEsThyJFzieaKJwGQI8BjHNp9tN4M8jNjJ1fHS70aQkb681&amp;t=634773918900000000"   type="text/javascript"></script>
 <div id="pageWrapper">
<div id="header"></div>
<div id="navigation"><a href="#Menu1_SkipLink"><img alt="Skip Navigation Links"  src="/WebResource.axd? d=uVlrphLtejMyCQfMUd5MSwr7OFiIQBNYbtiTqDgsAQmI5_6XjhY8AFmAwPz4RAV7D87YEb3m48XzVHtpmam77PhCI6     AVXXVAbALWvpCcB1w1&amp;t=634773918900000000" width="0" height="0" style="border- width:0px;" /></a><div id="Menu1">
<ul class="level1">
    <li><a class="level1"  href="Default.aspx">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  Home &nbsp</a>   </li><li><a class="level1"  href="About.aspx">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  About Me  &nbsp</a></li><li><a class="level1"  href="Programming.aspx">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  Programming  &nbsp</a></li><li><a class="level1"  href="Rants.aspx">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  Rants &nbsp</a>   </li>
</ul>
</div><a id="Menu1_SkipLink"></a></div>
<div id ="content">
<p>Content</p>
</div>
 <div id="footer"><p>Footer.</p></div>
</div>

<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'Menu1', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script></form>
</body>
</html>

Answer 1

What I ended up doing was turning off the CSS that was being applied inline through the properties window.我最终做的是关闭通过属性窗口内联应用的 CSS。 More specifically I set the "IncludeStyleBlock" property to false.更具体地说，我将“IncludeStyleBlock”属性设置为 false。 Before I did this, I took the auto generated CSS from my view source and placed it in my styles sheet.在我这样做之前，我从我的视图源中获取了自动生成的 CSS 并将其放置在我的样式表中。 I was then able to better control the CSS but it did not solve my problem.然后我能够更好地控制 CSS，但它并没有解决我的问题。 In order to solve my issue I had to include a CssClass="menuClass" in my asp:Menu block like this.为了解决我的问题，我必须在我的 asp:Menu 块中包含一个 CssClass="menuClass" 像这样。

<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" 
        IncludeStyleBlock="False" StaticEnableDefaultPopOutImage="False"    CssClass="menuClass">

I then in turn set my CSS properties like so.然后我依次设置我的 CSS 属性。

.menuClass a.static.highlighted
{
color:Red !important;
text-decoration:underline !important;
}

Answer 2

The default Menu control is notoriously unfriendly to CSS. 众所周知，默认的 Menu 控件对 CSS 不友好。
You can work around this by using a css friendly menu control adapter.您可以通过使用 css 友好的菜单控制适配器来解决此问题。

Take a look at this Menu control adapter provided by the asp.net team.看看由 asp.net 团队提供的这个Menu 控件适配器。
It will help you get rid of a lot of CSS hacks that are otherwise needed to style the asp.net menu.它将帮助您摆脱许多 CSS 技巧，否则这些技巧是为 asp.net 菜单设计样式所需的。

If you are unaware of Control Adapters, you should refer the walk through to get started.如果您不知道控制适配器，你应该参考的穿行上手。

Answer 3

The anchor tag that ASP.NET puts in automatically adds the extra vertical space above the menu. ASP.NET 放置的锚标记会自动在菜单上方添加额外的垂直空间。 An anchor tag gets put above the menu automatically and that screws up the rendering in Internet Explorer and Google Chrome.锚标签会自动放置在菜单上方，这会破坏 Internet Explorer 和 Google Chrome 中的渲染。 It works properly in Mozilla Firefox even with the anchor with the image.它在 Mozilla Firefox 中正常工作，即使带有图像的锚点。

To fix, add the SkipLinkText="" attribute to your ASP.NET menu control and that will fix the rendering issue.要修复，请将 SkipLinkText="" 属性添加到您的 ASP.NET 菜单控件，这将修复呈现问题。

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" SkipLinkText="">

asp.net 上的 css 菜单控件

问题描述

3 个解决方案

解决方案1
3 已采纳 2012-11-09 09:10:29

解决方案2
0 2012-11-09 07:26:40

解决方案3
0 2013-05-30 16:05:05

asp.net 上的 css 菜单控件

问题描述

3 个解决方案

解决方案1 3 已采纳 2012-11-09 09:10:29

解决方案2 0 2012-11-09 07:26:40

解决方案3 0 2013-05-30 16:05:05

解决方案1
3 已采纳 2012-11-09 09:10:29

解决方案2
0 2012-11-09 07:26:40

解决方案3
0 2013-05-30 16:05:05