所以我有这个模板设计目前绝对定位,但我试图让它在任何宽屏浏览器中居中。我已经尝试在容器的左侧和右侧设置宽度自动,但它仍然与左侧对齐。
的CSS
.JosephSettin_png
{
position: absolute;
left:0px;
top:0px;
width:216px;
height:40px;
background: url("JosephSettin.png") no-repeat;
}
.home_png
{
position: absolute;
left:472px;
top:16px;
width:48px;
height:16px;
}
.discography_png
{
position: absolute;
left:528px;
top:16px;
width:80px;
height:24px;
}
.purchase_png
{
position: absolute;
left:608px;
top:16px;
width:88px;
height:24px;
}
.about_png
{
position: absolute;
left:696px;
top:16px;
width:48px;
height:24px;
}
.contact_png
{
position: absolute;
left:744px;
top:16px;
width:56px;
height:24px;
}
.main__pic_png
{
position: absolute;
left:0px;
top:56px;
width:264px;
height:264px;
background: url("main_pic.png") no-repeat;
}
.footer__lines_png
{
position: absolute;
left:0px;
top:512px;
width:800px;
height:24px;
background: url("footer_lines.png") no-repeat;
}
.info__heading_png
{
position: absolute;
left:32px;
top:360px;
width:216px;
height:32px;
background: url("info_heading.png") no-repeat;
}
.info__pic3_png
{
position: absolute;
left:265px;
top:360px;
width:159px;
height:112px;
background: url("info_pic3.png") no-repeat;
}
.info__pic2_png
{
position: absolute;
left:432px;
top:360px;
width:176px;
height:112px;
background: url("info_pic2.png") no-repeat;
}
.info__pic1_png
{
position: absolute;
left:616px;
top:360px;
width:177px;
height:112px;
background: url("info_pic1.png") no-repeat;
}
.info__pane_png
{
position: absolute;
left:0px;
top:345px;
width:800px;
height:144px;
background: url("info_pane.png") no-repeat;
}
body
{
text-align: center;
background-color:maroon;
}
#wrapper {
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#a {
text-decoration: none;
color:white;
font-weight:bold;
}
.style1 {
font-weight: bold;
color: #FFFFFF;
}
HTML
<body>
<center>
<div id="wrapper">
<div class="JosephSettin_png"> </div>
<div class="home_png"> <a href="home.html" style="color:yellow">Home</a></div>
<div class="discography_png"> <a href="discography.html">Discography</a></div>
<div class="purchase_png"><a href="store.html"><span class="style1">Store</span></a></div>
<div class="about_png"><a href="about.html">About</a></div>
<div class="contact_png"><a href="contact.html"><span class="style1"></span>Contact</a></div>
<div class="ad_png"> </div>
<div class="main__pic_png"> </div>
<div class="welcome__header_png"> </div>
<div class="welcome__text_png"> </div>
<div class="footer__lines_png"> </div>
<div class="footer__text_png"> </div>
<div class="info__pane_png"></div>
<div class="info__heading_png"> </div>
<div class="info__text_png"> </div>
<div class="info__pic3_png"> </div>
<div class="info__pic2_png"> </div>
<div class="info__pic1_png"> </div>
<div class="info__pic3_png"> </div>
</div>
</center>
</body>
如果我所有的div类都没有绝对定位,我知道我创建的容器是有效的。我是否需要改变位置或者是否犯了其他错误?
答案 0 :(得分:5)
将position: relative;
添加到.wrapper
定义。
http://www.w3.org/TR/CSS2/visuren.html#choose-position
绝对定位的项目必须位于相对定位的项目内,否则将无法按预期显示。
答案 1 :(得分:0)
你的主要问题是你的包装需要是位置:相对;和保证金:0自动;将中心包装。你也可以摆脱不需要的HTML元素。
CSS:
#wrapper {
position:relative;
width: 800px;
margin:0 auto;
text-align: left;
}
希望这会有所帮助。
答案 2 :(得分:-3)
我强烈建议使用像“Blueprint CSS”这样的CSS框架。它将为您节省大量时间,不仅有助于元素的定位,还有很多很好的功能,如排版,css重置以支持多浏览器等等。