1

img とナビゲーション バーを含む単純なヘッダーがあります。ナビゲーション バーを img の下に表示したいのですが (これが発生します)、ナビゲーション バーは次のテキストの後ろに表示されます。ナビゲーションバーの下のテキストを取得してそれを覆うのをやめる方法がわかりません（すでにクリアを試みました）。

私はこれが初めてなので、非常に単純なものを見落としていた可能性があることを述べたいと思います。

素晴らしい jsfiddle リンク: http://jsfiddle.net/k2qQN/

次に、ここに私のhtmlがあります：

<

header role="banner">
        <img src="../assets/images/autologo.png" alt="A and B automotive logo" />
        <nav role="navigation">
            <ul>
                <li><a href="#about-us/about-us.html">Services</a></li>
                <li><a href="#getting-in-touch">Getting in Touch</a></li>
                <li><a href="about-the-shop/about-the-shop.html">About Us</a></li>
            </ul>
        </nav>
    </header>
    <div role="main">
        <section id="services" title="Small overview of service">
            <h1>Title for content</h1>
            <p> At <a href="getting-in-touch">Some shop</a> Some random text following infoome random text following infoome random text following infoome random text following infoome random text following infoome random text following infoome random text following infoome random text following infoome random text following infoome random text following info</p>

        </section>

CSSは次のとおりです。

    html, body, #container {
    height: 100%;
    width: 100%;
    border: 1px solid black;
    font-size: 1.1em;
    }

header {
    height: 20%;
    width: 100%;
    }

img {
    height: 100%;
    width: auto;
    }
4

4 に答える 4

1

ヘッダー内の画像は、すべてのヘッダーの高さを使用します。したがって、次の CSS を使用して画像の高さを変更します。

header img {
    height:123px; /* or another value smaller than the header's height of 100% */
}

またはヘッダーの高さを設定しないでください:

header {
    width:100%;
}
于 2013-03-05T09:28:29.727 に答える
0

role="main"上余白のある div を指定します。より簡単に参照できるように、最初に ID またはクラスを指定してから、次のようにします。

#main-div {
    margin-top: 100px;
}
于 2013-03-05T09:25:37.563 に答える
0

ヘッダーにはheight:20%があるため、以下の div と重なっています。高imgさを次のようにしmax-height:100%、ヘッダーを次のようにしますheight:auto

header {
    height:auto;
    width: 100%; 
    }

img {
    max-height: 100%;
    width: auto;
    }

デモ

于 2013-03-05T09:27:41.193 に答える
0

これは、ヘッダーの高さが固定されているためです。ナビゲーションはあふれていますが、コンテンツは押し下げられていません。ヘッダーに必要な高さを設定するか、ヘッダーに設定overflow: hidden;して、オーバーフローするコンテンツを非表示にします。

于 2013-03-05T09:28:41.043 に答える