2017-02-04 15 views
1

ロゴが左側に、右側に水平ナビゲーションバーがある私のウェブページにヘッダーを作りたいと思っています。左側のロゴと右側のナビゲーションのヘッダーを作成するにはどうすればいいですか?

問題は、ブラウザウィンドウを縮小すると、ナビゲーションバーがヘッダーコンテナの境界より下になり、ページの構造に違反するという問題です。このよう

は、任意の解決策はありますか?親コンテナのHeaderを子コンテナの高さに合わせることしか考えられませんが、実装する方法はわかりません。あるいは、私は何とかメディアのクエリを使用する必要がありますか?

私は次のコードを書いています。

header { 
 
    height: 100px; 
 
    background-color: gray; 
 
    background-image: url('img/background.gif'); 
 
} 
 
#logo { 
 
    float: left; 
 
} 
 
nav { 
 
    float: right; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
li a:hover { 
 
    background-color: #111; 
 
}
<header> 
 
    <img id="logo" src="images/logo.png"> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#home">Home</a> 
 
     </li> 
 
     <li><a href="#about">About</a> 
 
     </li> 
 
     <li><a href="#services">Services</a> 
 
     </li> 
 
     <li><a href="#gallery">Gallery</a> 
 
     </li> 
 
     <li><a href="#blog">Blog</a> 
 
     </li> 
 
     <li><a href="#contacts">Contacts</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header>

+0

私は非常にあなたがしたいどのような影響を与えるのか理解していません。縮小して、ナビゲーションバーが新しい行に移動しない場合は、ヘッダーがオーバーレイされますが、これはうまくありません。ウィンドウが収縮しているときに、これをどのように正確に処理したいのですか? –

答えて

1

フロート要素を扱うには、flexモデルまたはmin-height + overflowを使用できます。両方を一緒に使用することもできます。浮動小数点のプロパティは、サポートされている場合はflexによってオーバーライドされます。 、

header { 
 
    min-height: 100px; 
 
    background-color: gray; 
 
    background-image: url('img/background.gif'); 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    justify-content:space-between; 
 
    align-items:center; 
 
    overflow:hidden; /* for float if flex not supported */ 
 
} 
 
#logo { 
 
    float: left; 
 
    /* to deal with flex */ 
 
    flex-shrink:0; 
 
    margin:auto;/* or 0 or auto auto auto 0 or ... */ 
 
} 
 
nav { 
 
    float: right; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
li a:hover { 
 
    background-color: #111; 
 
}
<header> 
 
    <img id="logo" src="http://dummyimage.com/140x45&text=logo.png"> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#home">Home</a> 
 
     </li> 
 
     <li><a href="#about">About</a> 
 
     </li> 
 
     <li><a href="#services">Services</a> 
 
     </li> 
 
     <li><a href="#gallery">Gallery</a> 
 
     </li> 
 
     <li><a href="#blog">Blog</a> 
 
     </li> 
 
     <li><a href="#contacts">Contacts</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header>

0

あなたのliディスプレイ "インライン・ブロック" を有する試してみてください?私はあなたが "li a"からブロック設定を取らなければならないと思う。 次に、ul自身に設定された幅を与えて、ページで縮小したり、メディアクエリを使用したりする必要があるかもしれません。 私はこれが助けてくれることを願っています:)

関連する問題