导航菜单功能不正常

好的，我正在研究这个网站（它是我的第一个网站），而且我正在寻找一些有关使我的导航菜单更好地工作的见解。当你进入“项目”页面时，关于按钮突然间看起来像是间隔太多了。另外，当你进入“联系”页面时，菜单完全搞砸了。我想到了将主页按钮添加到主页面导航栏中，所有菜单都完全相同，也许它能正常工作，但这有一个更好的解决方案。导航菜单功能不正常

此外，网站看起来非常平坦。我愿意提供一些深度的建议，以及其他任何批评。（记住我只做了几个月）。

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

导航菜单功能不正常

回答

相关问题