導航菜單不在位置

似乎無法找到導航菜單佈局有什麼問題......它不是以div容器爲中心。順便說一下，它不是原來的菜單，它最初是沒有圖形的純粹的css菜單，但同樣的問題。由於我找不到有什麼問題，所以我抓取了一個工作示例，但是與我的代碼一起使用時出現同樣的問題。導航菜單不在位置

請幫忙...謝謝。

enter image description here

<html> 
<head> 
<title>Home</title> 
</head> 
<link href="home.css" rel="stylesheet" type="text/css" /> 

<script src="js/jquery-1.11.0.min.js"></script> 

<body> 
<div id="container"> 
    <div class="header-cont"> 
     <div class="header"> 
      <img src="images/header.png"></img> 
      <?php require ("testnavigation.php"); ?> 
     </div> 
    </div> 

    <div id="content-container1"> 


     <div id="section-navigation"> 
      <p>sidebar navigation</p> 
     </div> 
     <div id="content"> 
      <p>contents here</p> 
     </div> 

     <div id="aside"> 
      <h3>Aside heading</h3> 
      <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
       esse molestie consequat, vel illum dolore eu feugiat nulla 
       facilisis at vero eros et accumsan.</p> 
     </div> 
     <div id="footer">Copyright © Site name, 20XX</div> 
    </div> 
</div> 
</body> 
</html>

這是CSS

body { 
    //font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif; 
    //font-size: 12px; 
    background: #0E2B43; 
} 

.header-cont { 
    width: 100%; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
} 

.header > img { 
    horizontal-align: middle; 
    vertical-align: middle; 
} 

.header { 
    height: 122px; 
    background: #333; 
    //border: 1px solid #CCC; 
    width: 100%; 
    margin: 0px auto; 
} 

#container { 
    margin: 0 auto; 
    width: 100%; 
    //width: 966px; 
    background: #33FF99; 
} 

#header h1 { 
    margin: 0; 
} 

#content-container1 { 
    float: left; 
    width: 100%; 
    background-color: #e9eaed; 
    margin: 122px auto; 
} 

#content-container2 { 
    float: left; 
    width: 100%; 
} 

#content { 
    float: left; 
    width: 40%; 
    padding: 20px 0; 
    margin: 0 0 0 2%; 
} 

#content h2 { 
    margin: 0; 
} 

#aside { 
    float: right; 
    width: 35%; 
    padding: 20px 0; 
    margin: 0 2% 0 0; 
    display: inline; 
} 

#aside h3 { 
    margin: 0; 
} 

#footer { 
    clear: both; 
    background: #ccc; 
    text-align: right; 
    padding: 20px; 
    height: 1%; 
} 

#content h1 { // 
    margin: 1em 0 0.5em 0; 
    color: #343434; 
    font-weight: normal; 
    font-size: 30px; 
    line-height: 40px; // 
    font-family: 'Orienta', sans-serif; 
    border-bottom: 1px solid rgba(53, 86, 129, 0.3); 
} 

/* These are used on the sidebar */ 
#section-navigation { 
    float: left; 
    width: 16%; 
    padding: 20px 0; 
    margin: 0 2%; 
    display: inline; // 
    background-color: #ccc; 
} 

#section-navigation ul { 
    margin: 0; 
    padding: 0; 
} 

#section-navigation ul li { 
    margin: 0 0 1em; 
    padding: 0; 
    list-style-type: none; 
} 

#section-navigation li a { 
    display: block; 
    margin: 0 0px 0 0; 
    width: auto; 
    text-decoration: none; 
} 
/* These are used on the sidebar */ 

/* These are used on the header navigation */ 
.clearer { 
    clear: both; 
} 

#navigation-row { 
    background: #aeb5b8 url("images/navigation-bg.gif") repeat-x left top; 
    height: 38px; 
    border-left: solid 1px #818b8f; 
    border-right: solid 1px #818b8f; 
    //width: 920px; 
    width: 100%; 
    margin: 0px auto; 
} 

ul#navigation { 
    display: block; 
    float: left; 
    list-style: none; 
    background: url("images/nav-spacer.gif") repeat-y -1px top; 
    height: 38px; 
} 

ul#navigation li { 
    display: block; 
    float: left; 
    background: url("images/nav-spacer.gif") repeat-y right top; 
    height: 38px; 
    padding-right: 2px; 
} 

ul#navigation li a { 
    display: block; 
    float: left; 
    line-height: 38px; 
    padding: 0px 20px; 
    font-family: Verdana; 
    font-size: 14px; 
    color: #313a3e; 
    text-decoration: none; 
    // text-transform: uppercase; 
    letter-spacing: -1px; 
} 

ul#navigation li a:hover, ul#navigation li a.active { 
    background: url("images/nav-bg-hover.gif") repeat-x left top; 
}

這是navigation.php

<div id="navigation-row"> 
    <ul id="navigation"> 
     <li><a href="Home.php">Home</a></li> 
     <li><a href="#">Account</a></li> 
     <li><a href="logout.php">Logout</font></a></li> 
    </ul> 

    <div class="search"> 
       <form action="search.php" method="POST"> 
        <input name="search" type="text" maxlength="30" class="textfield" 
         value="search" /> 

       </form> 
      </div> 

     <div class="clearer"></div> 
</div>

來源

2014-06-13 fyeth fyeth

您已經發布了很多不相關的代碼，請除去導航特定的內容。看着圖像，它似乎是導航元素中的填充或邊距問題。您是否使用開發人員工具檢查了元素？ –

對不起，我收錄了一切，因爲就像我說的我找不到問題的根源在哪裏，不知道哪一個可能是相關的或者沒有找到問題。我所做的一切都是根據我的知識，修補鉻中的檢查元素。 opps忘了告訴我一個新手:) –

我的猜測是，你ul#navigation被繼承的默認用戶代理的樣式，它在Chrome中有16像素的保證金。如果您將margin: 0;添加到該規則，我想您可能會得到您想要的。

來源

2014-06-13 04:29:21 gtramontina

沒問題。在附註中，我建議你嘗試使用更多的語義標記。標籤，如'

'，'

我只是刪除這兩條線

ul#navigation li a { 
    float: left; /* removed this */ 
    line-height: 38px; /* removed this */ 
}

http://jsfiddle.net/ykKkL/2/

來源

2014-06-13 04:25:17 CRABOLO

嗨，謝謝，但它的一部分解決了對齊，刪除你說的並添加了邊距：0由gtramontina使排列更好...但仍然沒有居中。 –

只刪除float：left和added margin：0到ul＃navigation by gtramontina，終於解決了這個問題....非常感謝很多人，但是我現在的問題是我會給誰信譽，因爲你的答案都有助於解決問題？ –

導航菜單不在位置

回答

相關問題