css - 导航菜单无法正常工作

Question

好的，我正在这个网站上工作(这是我的第一个网站)，我正在寻找一些让我的导航菜单更好地工作的见解。当您转到“元素”页面时，关于按钮突然看起来像右边的间距太大了。此外，当您转到“联系人”页面时，菜单完全乱七八糟。我考虑过将主页按钮添加到主页导航，这样所有的菜单就会完全相同，也许它会正常工作，但必须有更好的解决方案。

此外，该网站看起来非常扁平。我愿意接受关于赋予它一些深度的建议，以及你可能有的任何其他批评。 (请记住，我只做了几个月)。

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;
}

Answer 1

关于页面中的这一行有问题:

<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>

对于屏幕阅读器和搜索引擎， Logo 应包含文本 ALR Custom Guitars，使用 background-image 而不是 img 标签, 并设置 text-indent: -999px 以便仅显示图像。

此外，您的许多链接都指向 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;
}

它应该可以解决鼠标悬停时链接移动的问题。