レスポンシブな「トップバー」を作成する

Question

私は現在、いろいろなことをしながら「レスポンス」トップバーを作成するのが難しいです。

私は標準的なラップトップサイズのディスプレイを使用すると正常に作成されていますが、画面サイズをモバイルサイズに変更しようとすると、コンテンツをビュー。

私は現在、例として2つのdivを使用しています。 top-bar-holderはコンテナdivで、内容を一定の最大幅に保つためにtop-barが使用されています。

私は、この例ではそれぞれのイメージを使った2つのタプルテーブルも使用しました。問題は、画面上に留まる代わりに、画像が左に消えていくビューポートのサイズを変更しようとすることによって確認できます。

私はより良い説明のためにフィドルを添付しました。

私はこの質問で十分に詳述されていないかどうか尋ねてください。

.top-bar-holder { 
 
    position:fixed; 
 
\t width:100%; 
 
\t height:70px; 
 
\t background-color:#384452; 
 
    z-index:1; 
 
} 
 

 
.top-bar { 
 
    position:relative; 
 
    max-width:1100px; 
 
    width:100%; 
 
    border:1px solid orange; 
 
    height:70px; 
 
    left:50%; 
 
    margin-left:-550px; 
 
} 
 

 
.top-bar table tr th { 
 
    border:1px solid green; 
 
    height:65px; 
 
    max-width:50%; 
 
}

<div class="top-bar-holder"> 
 
\t \t \t <div class="top-bar"> 
 
\t \t \t \t <table style="width:100%"> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <th> <img src="company-logo.png" width:"120" height="55" /> </th> 
 
\t \t \t \t \t \t <th> <img src="company-logo.png" width:"120" height="55" /> </th> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t </table> 
 
\t \t \t </div> 
 
\t \t </div>

Answer 1

は私が答える前に - あなたは（あなたがこのことについて質問がある場合は簡単にGoogle検索が良いでしょう）.topバーの

あなたのポジショニングレイアウトにテーブルを使用しないでください問題を引き起こしています

.top-bar { 
    left:50%; 
    margin-left:-550px; 
} 

これはあなたの現在のCSSマージン左が常に550pxにとどまります。あなたのディスプレイがそれ未満であれば、コンテンツはなくなります。一般的には、水平にマージンを設定する方法は、水平マージンをautoに設定することです。これは

margin-top: 0; 
margin-bottom: 0; 
margin-left: auto; 
margin-right: auto; 

を使用するのと同じであり、あなたのヘッダーの内容は、私はあなたが意図した考え方を中心に説明する。この

.top-bar { 
    margin:0 auto; 
} 

するために、上記のCSSを変更 。画面の問題を修正するだけでなく、