1

わかりました。私はこのWebサイト（最初のWebサイト）に取り組んでおり、ナビゲーションメニューをより適切に機能させるための洞察を探しています。「プロジェクト」ページに移動すると、突然、[バージョン情報]ボタンの右側の間隔が広すぎるように見えます。また、「お問い合わせ」ページに行くと、メニューがめちゃくちゃになってしまいます。メインページのナビゲーションにホームボタンを追加するだけで、すべてのメニューがまったく同じになり、正しく機能するようにすることを考えましたが、より良い解決策が必要です。

また、ウェブサイトは本当にフラットに見えます。私はそれにある程度の深さを与えることについての提案、およびあなたが持っているかもしれない他の批判を受け入れるでしょう。（私はこれを2、3か月しか行っていないことを覚えておいてください）。

ウェブアドレス

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

2 に答える 2

0

間隔は、topnavの幅を45として指定したためです...「プロジェクト」が大きすぎて「約」が小さすぎます。自動にするか、すべてのテキストを中央に揃えて、奇妙に見えないようにしてください。 。

于 2012-07-29T22:10:50.047 に答える
0

[概要]ページのこの行に問題があります。

<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-imageimgtext-indent: -999px

また、あなたのリンクの多くは、を指してwww.ALRGuitars.comいるはずですhttp://www.ALRGuitars.com。

編集：

修正すべきいくつかのエラーがあります（W3C検証結果からのすべてのエラーと警告を修正することを忘れないでください）：

これ：

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

著作権表示で、文字参照の後のセミコロンを忘れています。

&#169;またはを使用します&copy;。

これ：

<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-29T22:49:02.397 に答える