0

だから私はまだcssとdiv全体に慣れていないので、私の悪いコーディングを許してください。：/とにかく、私はサイトを完成させましたが、奇妙なことに、サイドナビゲーションバーはChromeやデフォルトのAndroidブラウザなどのモバイルブラウザに表示されません。理由について何かアイデアはありますか？すべての助けに感謝します。

http://escobarboxing.com/

また、Chrome、FF、Operaを介してデスクトップでテストしましたが、正常に動作しているように見えますが、Chromeを使用している別のユーザーが見なかったと言っていますか？

4

3 に答える 3

2

うん、それはこのためです: #menu{position: absolute;}

位置が絶対的で、メイン コンテンツが中央にあるため、画面サイズが小さくなると、メニューがコンテンツの後ろに表示されます。画面のサイズを非常に狭くするだけで、これを試すことができます。

簡単に修正するには、 position: absolute を削除します。これで問題は解決しますが、次のことをお勧めします。

#menu と #container から絶対位置と相対位置を削除します。Margin right and left: auto を #container から削除し、#container left をフロートします (float:left;)。最後に、自動左右マージンを #site に適用します (最初に幅を指定する必要があります。920px が機能するはずです)。#menu は #container の横にあり、どちらもページの中央に配置されます。

適切な測定のために、サイトの上に 100% の高さと幅の div (#wrapper) を追加します。

また、「position：absolute;」と入力すると、補足になります。要素の「フロー」から削除されるため、マージンは影響しません。位置を理解するのに役立つ素晴らしい記事は次のとおりです。 http://www.barelyfitz.com/screencast/html-training/css/positioning/

CSSへようこそ！楽しいこともあれば、イライラすることもあります。楽しんでいただければ幸いです。

于 2013-02-08T04:46:17.837 に答える
0

固定幅の代わりに % を使用してみてください。ブロックが画面に対して大きすぎるため、小さい画面ではメニューがコンテンツブロックで覆われています。スマートフォンでサイトを開いてから、コンテナのサイズを調整してください。更新するとメニューが表示されます。このラップトップには Firefox がありますが、メニューも表示されません。

于 2013-02-08T04:37:42.993 に答える
0

メニュー div をコンテナに追加して絶対位置を削除してみてください。div が多すぎるので、使用する div を減らしてみてください。なぜその cssmenu div が必要なのですか?

    <div id="container">
    <div id="menu">
    <div id="cssmenu">
    </div>
    </div>
    <div class="insta">
    </div>
      rest of content
    </div> end container

                .insta {
                color: #333333;
                width: 100%;
                margin-left: auto;
                margin-right: auto;
                -webkit-border-radius: 7px;
                -moz-border-radius: 7px;
                border-radius: 7px;
                -moz-box-shadow: 0 0 10px 0 #000;
                -webkit-box-shadow: 0 0 10px 0 #000;
                box-shadow: 0 0 10px 0 #000;
                background: #EDEDED;
                float:right;
                width:770px;
                }
                #container {
                overflow: auto;
                height: auto;
                width:920px;
                                    margin:0 auto;
                }
            #menu {
            float: left;
            margin-top: 25px;
            }

この回答がお役に立てば幸いです。

于 2013-02-08T06:41:27.733 に答える