2012-06-06 67 views
-4

这里是HTML/Razor视图:为什么div菜单呈现在标题之外?

</head> 
    <body> 
     <header> 
      <div class="divHeader"> 
       Title Here 
      </div> 
      <div class="divMenu"> 
       <nav> 
        <ul id="menu"> 
         <li>@Html.ActionLink("Home", "Index", "Home")</li> 
         <li>@Html.ActionLink("About", "About", "Home")</li> 
         <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
        </ul> 
       </nav> 
      </div> 
     </header> 
     <div class="divBody"> 
      @RenderBody() 
     </div> 
     <footer> 
      <div class="divFooter"> 
       All Rights Reserved. 
      </div> 
     </footer> 
    </body> 
    </html> 

这里是CSS:

body 
{ 
    margin: 0 auto; 
    max-width: 960px; 
    padding: 0px; 
    background-color: White; 
    text-align: center; 
} 
header 
{ 
    height: 60px; 
    background-color: #C0C0C0; 
} 
footer 
{ 
    height: 20px; 
    background-color: #C0C0C0; 
} 
div.divHeader 
{ 
    color: #006600; 
    font-style: normal; 
    font-family: Shruti; 
    font-size: 3em; 
    font-weight: bold; 
} 
div.divBody 
{ 
    color: #000000; 
    font-style: normal; 
    font-family: Georgia; 
    font-size: small; 
    font-weight: normal; 
    text-align: left; 
} 
div.divFooter 
{ 
    color: #006600; 
    font-style: italic; 
    font-family: Shruti; 
    font-size: 0.75em; 
    font-weight: bold; 
} 
header div.divMenu 
{ 
    position: relative; 
} 

/* menu 
----------------------------------------------------------*/ 
ul#menu { 
    font-size: 1.3em; 
    font-weight: 600; 
    margin: 0; 
    text-align: left; 
} 

    ul#menu li { 
     display: inline; 
     list-style: none; 
     padding-right: 15px; 
    } 

     ul#menu li a { 
      background: none; 
      color: #999; 
      text-decoration: none; 
     } 

     ul#menu li a:hover { 
      color: #333; 
      text-decoration: none; 
     } 
+0

-1。许多不相关的东西,HTML不是HTML,而是剃刀视图,与C#无关...... –

+0

各种不相关的东西使网站! – WinFXGuy

+0

我想我误解了你试图问的东西,虽然它与布局有关(在这种情况下,背景颜色等问题不在问题中),但它可能是其他的东西。点了,还是觉得这样还不是很清楚和简洁-1。 –

回答

0

这是唯一的视觉,渲染是正确的,但你的CSS样式给人一种高度小于该divheader它除了包含菜单。

相关问题