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

间距是因为你指定topnav宽度为45 ...'projects'太大而'about'太小..它是自动的或尝试将所有文本对齐到中间以便它看起来不会奇怪的...

Answer 2

“关于”页面中此行存在问题：

<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以便仅显示图片将显示。

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

它应该纠正链接在悬停时移动的问题。

导航菜单无法正常运行

2 个答案: