3

私は現在、管理している Web サイトを作り直していますが、ナビゲーション バーに問題があります。高解像度 (私は現在 1440x900 を使用しています) を使用すると完全に動作しますが、より低い解像度に切り替えると、最後のいくつかのメニュー項目が途切れてしまいます。

HTMLは次のとおりです。

     <body>

<div id="page-wrap">
    <div id="inside">


        <div id="header">
            <img src="LogoGood.gif" alt="LogoGood" width="591" height="224" />



        <div id="nav">
<ul>

    <li><a href="index.html">Home</a></li>
    <li><a href="writings.html">Writing</a></li>
    <li><NOBR><a href="media.html">Media Relations</a></NOBR></li>
    <li><a href="events.html">Events</a></li>
    <li><NOBR><a href="proofreading.html">Proofreading</a><NOBR></li>
    <li><NOBR><a href="work.html">Writing Workshops</a></NOBR></li>
    <li><a href="publications.html">Publications</a></li>
    <li><a href="About.html">Working With You</a></li>
    <li><a href="aboutkathy.html">About Kathy Mayer</a></li>
    <li><a href="contact.html">Contact Kathy</a></li>
</ul>

そしてCSS：

    #page-wrap {
background: beige;
min-width: 780px;
max-width: 1260px;
margin: 10px auto;
}
#page-wrap #inside {
    margin: 50px 10px 0px 10px;
    padding-bottom: 10px;
}

    #main-content {
background: beige;
padding-left: 50px;
padding-top: 80px;

height: 400px;}


    #header {
padding-top: 5px;
background: beige;
text-align: center;}

    #nav {
float: left;
width: 100%;
background: beige;
height: 80px;
overflow: hidden;
padding: 0;
margin: 10px 0 0 0;
border-bottom: 1px solid rgb(255,23,28);}

    #nav ul{
text-align: center;
float: left;
list-style: none;
padding-left: 13px;
margin: auto;}

    #nav li {
float: left;
list-style: none;}


    #nav li a {
display: block;
padding: 8px 8px;
border-right: 1px solid rgb(255,23,28);}

前もって感謝します！

4

2 に答える 2

1

ここでの主な問題は、存在するメニュー項目の数と定義された高さだと思います。商品はありますが、 の高さは#navです80px。幅の広い画面の場合、これは問題になりませんが、解像度の低い画面の場合、特に高さが既に定義されている場合、メニューが切り捨てられます。その上、1 つのナビゲーション バーに多くの項目があると、全体の幅が確実に増えます。リンクに長い名前を付けることも、それぞれの幅を広げるのに役立ちますli(たとえば、「About」ではなく「About Kathy Mayer」、「About Me」では「About Kathy」、「Contact」ではなく「Contact Kathy」など)。

この問題を解決する 1 つの方法は、2 つの別個のナビゲーション バーを作成することです。ページの右上隅に「ホーム」、「キャシー・メイヤーについて/について」、および「キャシー・メイヤーに連絡/連絡先」を個別のナビゲーションバーにして、残りを別のナビゲーションバーに保持することができます。 2 つの異なるナビゲーション バーが表示されます。

もう 1 つの方法は、垂直のナビゲーション バーを作成することです。これにより、問題全体が解消されます。

私が得たもう 1 つのアイデア: 1 つのサブメニューの下に「執筆」、「校正」、および「ワークショップ」を登録するなど、同様のタイトルを持つアイテムのサブメニューを作成することもできます。

お役に立てば幸いです。

于 2011-12-21T05:39:58.810 に答える
0

に設定しまし#page-wrapたmin-width:780pxが、メニューはそれよりも広くなっています。

http://jsfiddle.net/bbcmF/

最小幅を大きくしてみてください: http://jsfiddle.net/bbcmF/1/ (またはメニューを小さくします)

于 2011-12-19T17:08:40.987 に答える