-1

HTML ページにヘッダー コンテナーがあり、その中に会社のロゴや背景などを配置しました。このための CSS は次のとおりです。

**#header {
        background-image:url(Images/background_top.png);**
        background-repeat:no-repeat;
        position:relative;
        width:100%;
        height:270px;
    }

どの画面サイズにも合わせたいので、幅を 100% に設定しました。

会社のロゴはimg(src,id) タグで追加され、CSS で制御されます。

このヘッダーの右端に Facebook のロゴを追加したいのですが、ウィンドウのサイズを変更するたびにロゴがヘッダーの下に移動し、ページの残りの部分にクラッシュします。

誰でも私を助けてもらえますか？

コードは次のとおりです。

All code: 

<div id="header">
    <img id="facebook_logo" src="Images/facebook_logo_extended.gif" />
    <img src="Images/logo.png" id="logo" />
</div>

CSS

#header {
    background-image:url(Images/background_top.png);
    background-repeat:no-repeat;
    position:relative;
    width:100%;
    height:270px;
}

#logo {
    position:relative;
    margin-left:300px;  
    width:1000px;
    height:276px;
}

#facebook_logo {
    position:absolute;
    left:100%;
    z-index:10;             
}

今は私が望むように浮いていますが、遠すぎます。右にスクロールして表示する必要があります。ウィンドウのサイズを縮小すると、メインのロゴにぶつかります。たぶん、起こりえないことをさせようとしているのでしょう！

4

1 に答える 1

0

それを試してください：

#header{  background-image:url(Images/background_top.png);**
        background-repeat:no-repeat;
        position:relative;
        width:100%;
        height:270px;
        }

#header img{
position: absolute;
right: 0px;
}
于 2013-03-08T11:28:39.013 に答える