Question

很抱歉，你必须这样做，但是你可以去这个地址：http://www.neopets.com/userlookup.phtml?user=coool_xman

我需要帮助制作顶部横幅（那个说Krawk的横幅）不在“白盒子”中并且在其自己的区域中。我希望横幅在盒子上方，所以基本上只需要向上移动300px，其他一切都保持不变。

我试过创建另一个身体，Floats等但是无法弄明白。这是我的代码。

<style>
body {
background: fixed url("http://i1164.photobucket.com/albums/q565/whitehouses88/PLs/PirateBunk.jpg") no-repeat;
}
hr, #header, #footer, .sf, #ban {
display: none;
}
.contentModuleHeader, .contentModuleHeaderAlt {
font: 18pt tahoma;
color: #261712;
font-weight: bold;
text-align: left;
background-color: #ffffff;
}
.content div div, .content .contentModule, .contentModuleTable, .contentModule, #main {
border: none;
}
td, body, font, .medText, body, p {
font: 9pt tahoma;
line-height: 12pt;
}
b {
color: #6e231e;
}
i {
color: #261712;
}
a:link, a:visited, a:active, a b {
color: #90714d;
font-weight: bold;
}
a:hover, a:hover b {
color: #261712;
}
#aja {
width: 8px;
}
#navy {
padding: 4px;
margin: 4px;
text-align: center;
}
#navy a {
color: #ffffff !important;
background: #90714d;
display: inline-block;
width: 75px;
padding: 4px;
margin: 2px;
text-transform: uppercase;
font: 9pt trebuchet MS;
font-weight: bold;
}
#navy a:hover {
padding: 4px;
margin: 2px;
background: #6e231e;
}
#main {
margin-top: 10px;
margin-bottom: 10px;
border: 10px solid #261712;
}
#userneopets img {
background: #90714d;
padding: 8px;
}
</style>

<table><tr>
<td width="1100" valign="top">
<img src="http://i1327.photobucket.com/albums/u673/Vipersnake94/KrawkIsland2_zps134bd61f.png" width="975" class="special">
</td>
<td width="1100" valign="top">
</td>
</tr></table>
<div id="navy">
<a href="/myaccount.phtml">Account</a><a href="/customise/">Customize</a><a href="/games/arcade.phtml">Games</a><a href="/explore.phtml">Explore</a><a href="/nf.phtml">News</a><a href="/petcentral.phtml">Central</a><a href="/neoboards/index.phtml">Boards</a><a href="/objects.phtml">Shops</a><a href="/mall/index.phtml">Mall</a><a href="/~Sparkle">Credit</a>
</div>
<br><div style="width: 800px;">

</div>

<style>
body {
background: fixed url("http://i1164.photobucket.com/albums/q565/whitehouses88/PLs/PirateBunk.jpg") no-repeat;
}
hr, #header, #footer, .sf, #ban {
display: none;
}
.contentModuleHeader, .contentModuleHeaderAlt {
font: 18pt tahoma;
color: #261712;
font-weight: bold;
text-align: left;
background-color: #ffffff;
}
.content div div, .content .contentModule, .contentModuleTable, .contentModule, #main {
border: none;
}
td, body, font, .medText, body, p {
font: 9pt tahoma;
line-height: 12pt;
}
b {
color: #6e231e;
}
i {
color: #261712;
}
a:link, a:visited, a:active, a b {
color: #90714d;
font-weight: bold;
}
a:hover, a:hover b {
color: #261712;
}
#aja {
width: 8px;
}
#navy {
padding: 4px;
margin: 4px;
text-align: center;
}
#navy a {
color: #ffffff !important;
background: #90714d;
display: inline-block;
width: 75px;
padding: 4px;
margin: 2px;
text-transform: uppercase;
font: 9pt trebuchet MS;
font-weight: bold;
}
#navy a:hover {
padding: 4px;
margin: 2px;
background: #6e231e;
}
#main {
margin-top: 274px;
margin-bottom: 10px;
border: 10px solid #261712;
}
#userneopets img {
background: #90714d;
padding: 8px;
}

img.special { position: absolute; top: 0; }

</style>

<table><tr>
<td width="1100" valign="top">
<img src="http://i1327.photobucket.com/albums/u673/Vipersnake94/KrawkIsland2_zps134bd61f.png" width="975" class="special">
</td>
<td width="1100" valign="top">
</td>
</tr></table>
<div id="navy">
<a href="/myaccount.phtml">Account</a><a href="/customise/">Customize</a><a href="/games/arcade.phtml">Games</a><a href="/explore.phtml">Explore</a><a href="/nf.phtml">News</a><a href="/petcentral.phtml">Central</a><a href="/neoboards/index.phtml">Boards</a><a href="/objects.phtml">Shops</a><a href="/mall/index.phtml">Mall</a><a href="/~Sparkle">Credit</a>
</div>
<br><div style="width: 800px;">

</div>

Answer 1

使用此CSS：

img.special { position: absolute; top: 0; }
body { margin-top: 274px; }

我使用Firebug添加了它，它对我有用。

这是做什么的：

首先，它绝对定位图像，（使用正确的类名指定特定图像 - .special）
其次，将顶部设置为0，将图像移到顶部。这只能起作用，因为图像绝对定位。
第三，它通过向页面添加top-margin来移动整个网站，该页面等于图像的高度。

将图片移出身体

1 个答案: