0

私が取り組んでいるサイトでいくつかのヘッダーが間違って配置され、それぞれの下に表示されるはずの画像が表示されないという小さな問題があります。ここで私が話していることを見ることができます：

ここに私のHTMLがあります：

<!-- main-content -->
<div id="main-content">    
    <h1> Check out all our DEADicated sites: </h1>
    <div class="sites">
        <a href="http://www.thedeadicated.tumblr.com" target="_blank">
        <img src="images/sites/tumblr.jpg" width="215" height="150" alt="Tumblr"/></a>
        <p> Tumblr </p>
    </div>
    <div class="sites">
        <a href="http://www.twitter.com/thedeadicated" target="_blank">
        <img src="images/sites/twitter.jpg" width="215" height="150" alt="Twitter"/></a>
        <p> Twitter </p>
    </div>
    <div class="sites">     
        <a href="http://www.youtube.com/user/DeadicatedRepository" target="_blank">
        <img src="images/sites/youtube.jpg" width="215" height="150" alt="YouTube"/></a>
        <p> YouTube </p>
     </div>

    <h2> To join TheDEADicated, click <a href="http://musichype.com/artists/dead-sara" target="_blank">HERE</a>! </h2>
    <h2> To get your own DEADicated wristband, click <a href="http://store.cinderblock.com/the-deadicated-rubber-bracelet.html" target="_blank">HERE</a>! </h2>
    <h2> Can't get enough of Dead Sara?! <a href="http://www.facebook.com/pages/Dead-Sara-Addiction-Treatment-facility/337823746314667?group_id=0" target="_blank">Dead Sara Addiction Treatment Facility</a> </h2>
    <h2> Email us at: TheDEADicated@TheDEADicated.org </h2>

</div> <!-- close main-content -->

これは、メイン コンテンツとヘッダーの CSS コードです。

#main-content{
    padding: 50px 50px 30px 50px;
    background: #fff url('images/shadow.png') repeat-x;
    min-height: 800px;
}

#main-content h2{
    margin-top: 30px;
    padding-bottom: 8px;
    background: url('images/ink-line.png') no-repeat left bottom;
    clear: both;
}

どんな種類の助けも大歓迎です。ありがとう！

4

2 に答える 2

0

コメントは正しいのですが、何を表示すべきで何を表示すべきでないかについては明確ではありませんが、私があなたを正しく解釈すると、「私の見出しには、期待する余白とパディングまたは背景画像が表示されていません」という意味になります。

可能な解決策を提供するために、私は別の信仰の飛躍を遂げるつもりです. そうですか

</div> <!-- close main-content -->

<div id="main-content>あなたのhtmlの最後にありますが、どこにも表示されません。希望する結果に応じて、ページの上部または h2s ブロックの前に配置する必要があります。<div id="main-content>最初の h2 タグの前に追加してみて、問題が解決するかどうかを確認してください。

編集:問題がより明確になりましたが、これは、検査するライブ URL がないと解決するのが難しいです。フロートの問題である可能性がありますが、オーバーライドされていない限り、クリアで解決するはずなので、次のように変更できます。

clear: both !important;

表示の問題である可能性があるため、次を追加してみてください。

h2 { display: block !important; }

確かに役立つライブURLがあれば。最終的な考えは、ページ全体の html のすべてのタグが適切に開閉されることを確認することです。私の経験では、冗長または閉じていない div がこのような問題を引き起こす可能性があります。

于 2013-03-06T18:39:37.517 に答える
0

ここで何が起こっているのか正確にはわかりませんが、ヘッダーの上の要素がどのように見えるかを推測すると、フロートの問題があると思います. h2 から「clear: both」を削除して、「float: left; width: 100%;」を追加してみてください。その代わりに。

于 2013-03-06T19:29:59.767 に答える