1

私が取り組んでいる (レスポンシブ) Web サイトのヘッダー/ナビゲーションのコンセプトはありますが、残念ながら、レスポンシブ レイアウトで機能する方法で HTML/CSS で必要なものを実現する方法がわかりません。

これは私が実装したいコンセプトです：

ここに画像の説明を入力

基本的に、ロゴはナビゲーションの左半分と右半分の真ん中に配置し、ヘッダー div と重なる必要があります。

4

2 に答える 2

1

これを試して

http://jsfiddle.net/abbood/9yhHE/

（ロゴ画像を作成したランダム画像に置き換えました）ナビゲーションバーを1色のように表示するには、sと境界線がゼロで間に間隔がないことを確認してください。

html

<div id="imgContainer" />
<table>
    <tr>
        <th>left header text</th>
        <th>right header text</th>      
    </tr>
    <tr>
        <td>
            <ul>
                <li>nav item</li>
                <li>nav item</li>
                <li>nav item</li>
            </ul>
        </td>
        <td class="right">
            <ul>
                <li>nav item</li>
                <li>nav item</li>
                <li>nav item</li>
            </ul>   
        </td>
    </tr>
</table>

css

#header {
    height: 3em;
    min-width: 40em;
}


table {
    width: 100%;
    min-width: 40em;
}

ul {
    list-style:none;
}

ul li {
    display: inline-block;
}

table tr th:first-child {
    text-align: left;
    padding-right:1em;
}

table tr th:nth-child(2) {
    text-align: right;
    padding-left:1em;
}

table ul {
    padding-left: 0;
    padding-right:0;
}



table tr:nth-child(2) td:nth-child(1) {
    text-align: right;
    padding-right: 3em;
}
td.right {
    text-align: left;
    padding-left: 3em;
}


#imgContainer {
    width: 100%;
    min-width: 40em;
    background-image: url(http://s8.postimage.org/49ywsfsqp/logo.png);
    background-position: center;
background-repeat: no-repeat;
}

注：基本構造を作成しました。スタイリングとナビゲーションバーアイテム間の間隔の設定は簡単ですが、基本構造はシャウンドする必要があります。

アップデート では、ロゴを上に表示する必要がありました。（z-index + absポジショニングで行いました）

これが更新されたhttp://jsfiddle.net/abbood/9yhHE/2/です。

html

<div id="imgContainer">
    <img  src="http://s8.postimage.org/49ywsfsqp/logo.png" />
</div>
<table>
    <tr>
        <th>left header text</th>
        <th>right header text</th>      
    </tr>
    <tr>
        <td>
            <ul>
                <li>nav item</li>
                <li>nav item</li>
                <li>nav item</li>
            </ul>
        </td>
        <td class="right">
            <ul>
                <li>nav item</li>
                <li>nav item</li>
                <li>nav item</li>
            </ul>   
        </td>
    </tr>



</table>

css

#header {
    height: 3em;
    min-width: 40em;
}


table {
    width: 100%;
    min-width: 40em;
    background-color: yellow;
}

ul {
    list-style:none;
}

ul li {
    display: inline-block;
}

table tr th:first-child {
    text-align: left;
    padding-right:1em;
}

table tr th:nth-child(2) {
    text-align: right;
    padding-left:1em;
}

table ul {
    padding-left: 0;
    padding-right:0;
}



table tr:nth-child(2) td:nth-child(1) {
    text-align: right;
    padding-right: 3em;
}
td.right {
    text-align: left;
    padding-left: 3em;
}

#imgContainer {
        min-width: 40em;
        position: absolute;
        width: 100%;

}

#imgContainer > img{
    width: 50px;
    height: 50px ;
    z-index: 1; 
    display: block;
    margin: 0 auto;

}
于 2013-02-18T06:42:12.910 に答える
0

頭のてっぺんから、これを行うための3つの方法を考えることができます。

  1. さまざまなサイズのさまざまな画像を使用し、さまざまな解像度で表示/非表示にされるさまざまなレイヤー内に配置します
  2. 1つの要素（、など）を持ち、その要素の背景画像としてロゴを持ち、異なる解像度で背景を切り替えることができます
  3. すべてのロゴサイズの単一のスプライト画像を用意し、css background-positionを使用してその位置を変更するか、マージンとオーバーフロープロパティを使用して難しい方法を変更します。

既存のサイトを参照することもできます。レスポンシブサイトの優れたライブラリはここにあります：http：//mediaqueri.es

于 2013-02-18T05:53:16.963 に答える