導航菜單功能不正常

好的，我正在研究這個網站（它是我的第一個網站），而且我正在尋找一些有關使我的導航菜單更好地工作的見解。當你進入「項目」頁面時，關於按鈕突然間看起來像是間隔太多了。另外，當你進入「聯繫」頁面時，菜單完全搞砸了。我想到了將主頁按鈕添加到主頁面導航欄中，所有菜單都完全相同，也許它能正常工作，但這有一個更好的解決方案。導航菜單功能不正常

此外，網站看起來非常平坦。我願意提供一些深度的建議，以及其他任何批評。（記住我只做了幾個月）。

Web address

HTML：

<ul class="transparent" id="navcontainer" >   
    <li class="topnavleft floatleft"><a href="index2.html">Home</a></li>      
    <li class="topnav floatleft"><a href="About.html">About</a></li>       
    <li class="topnavright floatleft"><a href="Projects.html">Projects</a></li>      
</ul>

CSS：

#navcontainer { 
    margin-top: 0; 
    height: 55px; 
    width: 232px; 
    float: right; 
    overflow: visible; 
    padding: 0; 
} 

.topnav { 
    width: 45px; 
    border-right: 1px solid #FFF; 
    margin-right: 10px; 
    padding-right: 22px; 
    margin-left: 10px; 
    margin-top: 16px; 
} 

.topnavleft { 
    width: 45px; 
    border-right: 1px solid #FFF; 
    border-left: 1px solid #FFF; 
    margin-left: 7px; 
    padding-left: 10px; 
    padding-right: 6px; 
    margin-top: 16px; 
} 

.topnavright { 
    width: 45px; 
    border-right: 1px solid #FFF; 
    margin-right: 7px; 
    padding-right: 20px; 
    padding-left: 1px; 
    margin-top: 16px; 
}

來源

2012-07-29 hyphen

我應該只用一個「topnav」課程就可以做到這一點嗎？另外，我已經開始嘗試實現你在說什麼，我認爲它可能會起作用，但我現在看到的問題是，當您將鼠標懸停在鏈接上時，整個div會更改大小以及其旁邊的鏈接。我想讓他們完全靜止。有任何想法嗎？ – hyphen 2012-07-29 22:30:47

，應該是@Victor S. – hyphen 2012-07-29 22:31:23

[檢查W3C驗證結果]（http://validator.w3.org/check?uri=http%3A%2F%2Fs423839726.onlinehome.us%2Findex2。 HTML＆字符集=％28detect +自動％29＆DOCTYPE =內嵌＆組= 0）。修復所有錯誤和警告。 – 2012-07-29 22:51:41

沒有與此線在關於頁面的一個問題：

<div class="transparent" id="logo"><a href="www.ALRGuitars.com"><img src="Images/ALR%20%20custom%20guitars2.png" alt="ALR Custom Guitars" width="250" border="0" </a></img>

你已經錯過了img標籤的收盤/>，它應該是這樣的：

<div class="transparent" id="logo"><a href="http://www.alrguitars.com"><img src="Images/ALR%20%20custom%20guitars2.png" alt="ALR Custom Guitars" width="250" border="0" /></a></img>

對於屏幕閱讀器和搜索引擎的標誌應該有文字ALR Custom Guitars，使用background-image代替img標籤，並設置text-indent: -999px這樣只有IMAG e會顯示。

此外，您的很多鏈接指向www.ALRGuitars.com，它們應該是http://www.ALRGuitars.com。

編輯：

這裏有一些錯誤改正（記得從the W3C validation result糾正所有錯誤和警告）：

此：

<a href="http://www.facebook.com/pages/ALR-Guitars/301363959926689" target="_blank"><img src="Images/facebook_512.png" border="0" height="32px" width="32px" </img><a/> 
<a href="http://twitter.com/ALRGuitars" target="_blank"><img src="Images/twitter_512.png" border="0" height="32px" width="32px"</img></a>

應：

<a href="http://www.facebook.com/pages/ALR-Guitars/301363959926689" target="_blank"><img src="Images/facebook_512.png" border="0" height="32px" width="32px" /> 
<a href="http://twitter.com/ALRGuitars" target="_blank"><img src="Images/twitter_512.png" border="0" height="32px" width="32px"</img></a>

可以使用©或©。

此：

<link href'http://fonts.googleapis.com/css?family=Over+the+Rainbow|Open+Sans:600,700italic' rel='stylesheet' type='text/css'/>

應該是：

<link href='http://fonts.googleapis.com/css?family=Over+the+Rainbow|Open+Sans:600,700italic' rel='stylesheet' type='text/css'/>

有一個失蹤=標誌href後。

編輯＃2：

後，一些與CSS擺弄，嘗試一下本作的菜單：

#navcontainer { 
    float: right; 
    width: 250px; 
    height: 30px; 
    padding: 5px; 
    margin-top: 0; 
    overflow: visible; 
} 
.topnav a { 
    display: block; 
    width: 70px; 
    height: 20px; 
    padding: 5px; 
    text-align: center; 
} 
a:hover { 
    color: #606060; 
    font-style: italic; 
}

應該正確的，當鼠標懸停移動鏈接的問題。

來源

2012-07-29 22:49:02

謝謝！這是很有幫助！試圖教自己所有這些東西並不容易......你只是不知道你不知道的東西，正如古老的格言所言。任何想法如何我可以得到在導航菜單中的div不要改變時，相鄰的鏈接懸停？我希望他們保持靜止。 – hyphen 2012-07-29 22:54:00

@ user1476992嘗試使用'float：left'而不是'display：inline'作爲菜單'li's。另外，主'navcontainer'' ul'上不需要'display：inline'，它沒有任何作用。（順便說一句，刪除空鏈接將清理您的標記。） – 2012-07-29 23:00:58

謝謝！我只是提出了所有建議的更改，而且看起來已經好多了。當你說「空鏈接」時你指的是什麼？此外，仍然試圖讓我的李div不要轉移，當你把鼠標懸停在他們身上...有什麼想法？ – hyphen 2012-07-29 23:32:35

的間距，因爲你指定topnav寬度爲45 ... '項目' 過大'about'太小了..不管它是自動的還是嘗試將所有文本對齊到mi ddle所以它不會顯得怪異......

來源

2012-07-29 22:10:50

導航菜單功能不正常

回答

相關問題