0

メインページにロゴがあり、その右側に大きな画像があります。画像がロゴの後ろにくるようにしたいです。

詳細なクリアランスについては、スクリーン ショットを次に示します。 ここに画像の説明を入力

大きい画像は、内部にさまざまな画像がたくさんある画像で、ロゴは赤い画像です。

HTML コード:

<div id="header">
    <img src="http://livedemo00.template-help.com/wordpress_43791/wp-content/themes/theme2033/images/logo.png" width="170" height="240" alt="LOGO" id="logo" />
    <div id="slider">
        <img src="http://livedemo00.template-help.com/wordpress_43791/wp-content/uploads/2011/07/testi1.jpg" width="800" height="328" alt="Welcome to Our Site!" />
    </div>
</div>

CSS コード:

html, body {
    background-color: rgb(48, 48, 48);
    padding:0;
    margin:0;
}
/******HEADER******/
 #header {
    background-color: rgb(64, 64, 64);
    height: 54px;
}
/******LOGO******/
 #logo {
    float:left;
    margin-left: 47px;
}
/******NAV MENU******/
 #nav {
    list-style: none;
    margin-top: 0px;
}
#nav li {
    display:inline;
}

ここにjsFiddleがあります

4

3 に答える 3

1

#slider{ position: absolute; left:47px; top: 54px; z-index: -1; } これを一緒に投げただけですが、それがまさにあなたが探しているものかどうかはわかりません. http://jsfiddle.net/TKDQM/6/

于 2013-03-20T16:48:42.887 に答える
0

position: absoluteロゴ画像に追加してみてください。これにより、ページの流れからそれが削除され、その結果、他の画像がプルアップされます。あなたのフィドルでそれを見てください：

http://jsfiddle.net/joplomacedo/TKDQM/9/

于 2013-03-20T16:48:53.597 に答える
0

ロゴに絶対配置を使用し、スライダーをヘッダーから外します。ヘッダーの高さはわずか 54 ピクセルで、スライダーに対応していません。

http://jsfiddle.net/TKDQM/8/

HTML

<div id="header">
    <img src="http://livedemo00.template-help.com/wordpress_43791/wp-content/themes/theme2033/images/logo.png" width="170" height="240" alt="LOGO" id="logo" />
</div>
<div id="slider">
    <img src="http://livedemo00.template-help.com/wordpress_43791/wp-content/uploads/2011/07/testi1.jpg" width="800" height="328" alt="Welcome to Our Site!" />
</div>

CSS

html, body {
    background-color: rgb(48, 48, 48);
    padding:0;
    margin:0;
}
/******HEADER******/
 #header {
    background-color: rgb(64, 64, 64);
    height: 54px;
    position: relative;
}
/******LOGO******/
 #logo {
   position: absolute;
    margin-left: 47px;
}
/******NAV MENU******/
 #nav {
    list-style: none;
    margin-top: 0px;
}
#nav li {
    display:inline;
}
于 2013-03-20T16:50:09.237 に答える