1
我一直在玩這兩個，我似乎仍然無法理解他們的想法。絕對與相對
當我試圖讓所有東西都保持居中，無論你在看什麼屏幕分辨率，我通常會把寬度設置爲0。但 - 如果我有絕對相同的屬性，它完全忽略此值，並不起作用。
那麼我應該如何在另一張圖片的TOP上定位圖片，同時確保所有屏幕分辨率都保持居中，以及不使用絕對？
編輯：我試圖讓小新聞widget和teamspeak小部件留在身體中間。
HTML
<body>
<div id="page-wrap">
<div id="header">
<img src="images/header.png" />
</div>
<img src="images/navbar.png" />
<ul id="nav">
<li><a href="http://www.voyage-us.com">Home</a></li>
<li><a href="http://www.voyage-us.com/xenforo/upload/index.php">Forums</a></li>
<li><a href="http://www.google.com">Members</a></li>
<li><a href="http://www.google.com">Streams</a></li>
<li><a href="http://www.google.com">Contact Us</a></li>
</ul>
<div id="mainbody">
<img src="images/mainbody.png" /></div>
<div class="news1">
<img src="images/news1.png" /></div>
<div class="teamspeak"> <!--Teamspeak IMG-->
<img src="images/teamspeak.png" /></div>
<div id="ts3viewer_1037062" /></div> <!-- Teamspeak Widget -->
<script type="text/javascript" src="http://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>
<script type="text/javascript">
<!--
var ts3v_url_1 = "http://www.tsviewer.com/ts3viewer.php?ID=1037062&text=000000&text_size=12&text_family=2&js=1&text_s_color=ffffff&text_s_weight=bold&text_s_style=normal&text_s_variant=normal&text_s_decoration=none&text_s_color_h=ffffff&text_s_weight_h=bold&text_s_style_h=normal&text_s_variant_h=normal&text_s_decoration_h=underline&text_i_color=ffffff&text_i_weight=normal&text_i_style=normal&text_i_variant=normal&text_i_decoration=none&text_i_color_h=ffffff&text_i_weight_h=normal&text_i_style_h=normal&text_i_variant_h=normal&text_i_decoration_h=underline&text_c_color=ffffff&text_c_weight=normal&text_c_style=normal&text_c_variant=normal&text_c_decoration=none&text_c_color_h=ffffff&text_c_weight_h=normal&text_c_style_h=normal&text_c_variant_h=normal&text_c_decoration_h=underline&text_u_color=ffffff&text_u_weight=bold&text_u_style=normal&text_u_variant=normal&text_u_decoration=none&text_u_color_h=ffffff&text_u_weight_h=bold&text_u_style_h=normal&text_u_variant_h=normal&text_u_decoration_h=none";
ts3v_display.init(ts3v_url_1, 1037062, 100);
-->
</script>
<div id="footer">
<p>©2014 Rythmn Designs<p>
</div>
</body>
CSS
body
{
margin: 0px;
padding: 0px;
background: url("http://puu.sh/6RlKi.png")
}
.clear
{
clear:both;
}
#page-wrap
{
width: 1019px;
margin: 0 auto;
}
#header
{
width:100%;
text-align: center;
display: block;
}
#nav
{
height: 0.1px;
list-style: none;
padding-left: 14px;
text-align: center;
padding-bottom: 0px;
margin: -14px;
margin-top: -15px;
}
#nav li a
{
position:relative;
top: -12px;
display: block;
width: 100px;
float: left;
color: white;
font-size: 14.09px;
text-decoration: none;
font-family:"BankGothic Md BT"
}
#nav li a:hover, #nav li a:active
{
color: red;
}
#mainbody
{
vertical-align:top;
position:relative
}
.news1
{
position: absolute;
top: 435px;
right: 815px
}
.teamspeak
{
position: absolute;
top: 435px;
right: 470px
}
#ts3viewer_1037062
{
position:absolute;
top: 465px;
right: 478px;
width: 290px;
height:190px;
overflow:auto;
}
#footer
{
background: #181818;
color: white;
padding: 20px 0 20px 0;
text-transform: uppercase;
border-top: 15px solid #828080;
text-align: center;
font-family:"BankGothic Md BT";
font-size: 12px;
position: relative;
}
請發佈您的HTML和目前爲止已有的CSS。 – Beel