0

みなさん、良い一日を、

私は自分のポートフォリオとスキルセットの両方を構築するために無料でやっている地元の天文学クラブのウェブサイトに取り組んでいます.

ページ上部のヘッダー内にナビゲーション バーがあります。約 90% までズームアウトすると、ナビゲーション バー内の要素が移動し、レイアウトが少し奇妙に見えます。

それが助けになるなら、私はライブの例を持っています

http://www.JamesRobertCook.com/BCAAS/

ナビゲーション バーの HTML は次のとおりです。

<div id="header_bar">
    <div id="nav">
        <div id="cssmenu">
                <ul>
                   <li class="active"><a href="index.html"><span>Home</span></a></li>
                   <li class="has-sub"><a href="#"><span>Products</span></a>
                      <ul>
                         <li class="has-sub"><a href="#"><span>Product 1</span></a>
                            <ul>
                               <li><a href="#"><span>Sub Item</span></a></li>
                               <li class="last"><a href="#"><span>Sub Item</span></a></li>
                            </ul>
                         </li>
                         <li class="has-sub"><a href="#"><span>Product 2</span></a>
                            <ul>
                               <li><a href="#"><span>Sub Item</span></a></li>
                               <li class="last"><a href="#"><span>Sub Item</span></a></li>
                            </ul>
                         </li>
                      </ul>
                   </li>
                   <li><a href="#"><span>About</span></a></li>
                   <li class="last"><a href="#"><span>Contact</span></a></li>
                </ul>
        </div>
    </div>

そして、関連付けられている CSS は次のとおりです。

#header_bar {
background: rgba(44, 44, 44, 0.75);
height: 36px;
margin: 0 auto;
}

#nav {
height: 36px;
margin: 0 auto;
width: 960px;
}

#cssmenu {
height: 36px;
background-color: rgb(44, 44, 44)s;
}

#cssmenu ul {
margin: 0;
padding: 0;
}

#cssmenu > ul > li {
float: left;
margin-left: 15px;
position: relative;

#cssmenu > ul > li > a {
color: rgb(160,160,160);
font-family: Verdana, 'Lucida Grande';
font-size: 15px;
line-height: 36px;
padding: 15px 85px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;

コンテナの中に貼り付けて、固定の高さ/幅を与えるとうまくいくと思いましたが、ローカルで試してみましたが、成功しませんでした。

助けてくれてありがとう！可能であれば、私が間違っていたことを説明していただけますか? 失敗から学びたい！

ありがとう！

編集

ズームすると、3 つの「特集」ボックスのコンテンツが、それが存在するそれぞれの div にも重なることに気付きました! 確かに何かを壊した。

4

3 に答える 3

1

ごめんなさい。ページのさらに下にあるコンテンツ div を見て脇道にそれてしまい、本当の問題に完全に集中できなくなりました。あなたの元の問題に対する簡単な解決策が、あなたが私を許すのに役立つことを願っています.

#header_bar {
    background: rgba(44, 44, 44, 0.75);
    height: 36px;
    margin: 0 auto;

    min-width: 960px;
}

つまりmin-width: 960px;(960pxは 960 ピクセルで、ページの残りの主要コンテンツと同じ幅です) は、誰かが超低解像度で表示した場合でも、コンテンツの残りの部分に収まるようにするよりも小さくすること<div>はid="header_bar"できません。960pxブラウザ ウィンドウのサイズを変更したり、ズームインしたりします。

繰り返しますが、それを完全に台無しにして申し訳ありませんが、余談ですが、興味があれば、いくつかのことについていくつかの指針を与えることができると思います. たとえば、ページで<div>とを使いすぎているようです<span>。これらの 2 つの要素は、適用したスタイルの一部を受け取ることに排他的ではなく、場合によっては子要素、またはそれらの要素の親要素がスタイルを受け取り、それらの要素を完全に削除できます。

ヒントやヒントなどの詳細な説明が必要な場合は、アイデアの共鳴板を演奏したり、プログラミング/開発について話し合ったりするのが大好きです。長年にわたって学んだ、役立ついくつかのことをお見せできると思います.

于 2013-06-19T17:58:42.213 に答える
1

div 要素の高さを大きくする必要があるか、テキストが境界線を通過したくない場合はオーバーフローを設定する必要がありますが、それ以外は、div 要素が異常なことをしている場所がわかりません。それらは静的なサイズであり、何のサイズも変更しません。ユーザーがサイズ変更/ズームを行っており、その間静止していられないため、「移動」します。変更を防ぐために、ユーザーがサイズ変更/ズームできないようにする方法を見つける必要があります。

于 2013-06-18T19:08:45.780 に答える