0

変更前イメージ

これは、フッターのテキストを追加する前です。フッターの画像は、ページの下部にうまく収まっています。

残像

これは、フッターのテキストを追加した後です。

ページの下部にある不思議な追加のギャップを引き起こす問題が見つかりません。黒い境界線を無視する - フッターのテキスト画像の余白を確認するために使用しました。

CSS:

* {
    margin: 0;
    padding:0;
}



body {
    background-image: url('images/BG-W1.png');
}
#container{
    max-width:1000px;
    margin: 0 auto; 
    position: relative; 
    padding: 0 auto;
    height: 790px;
    border: 2px solid blue;

}

#footerBg {
    position: relative;
    bottom:-63px;
    left:-50px;
}

#footerBg img {
    display: block;
}

#footertex {
    position: relative;
    top:-110px;

    border:2px solid black;

}
footer {
    height: 50px;
} 

#footertex img {
    display: block;
}

HTML:

<footer>
            <figure id="footerBg">
                <img src="images/BG_F_S3.png" alt="Footer Background" width="" height="" />

            </figure>   

        <<figure id="footertex">    
                    <img src="images/ft1.png" usemap="#green" border="0" />

                    <map name="green">

                    <area shape="rect" coords="513,56,625,106" href="http://www.google.com" />
                    <area shape="rect" coords="725,58,874,108" href="http://www.google.com" />

                    </map>
        </figure>   

        </footer>
4

1 に答える 1

1

HTMLとCSSコードを投稿できますか？頭に浮かぶ簡単な修正は、div#footer { box-sizing: border-box; }あなたがすでに持っているものを示すことで、うまくいけばより良い答えが得られるでしょう。

于 2012-08-06T13:16:54.783 に答える