这一定是我生命中最常出现的问题!
我必须在100%DIV中定位一个固定的DIV(800px)并且一如既往地在除了IE之外的所有内容中都能正常工作。我已经尝试了旧的“文本对齐”技巧,但这次没有,我只是无法让它工作。
如果您想查看实际页面,请访问www.chunkydesign.com,我们将非常感谢您的回答。
以下是HTML (CSS Below)
<body>
<div id="navContainer">
<div id="navTopSpacer"></div>
<div id="navMain">
<div id="navContent">
<div id="navLogo"></div>
<div id="navLinks">
<h1>SERVICES ABOUT PORTFOLIO CONTACT</h1>
</div>
</div>
</div>
<div id="navBotSpacer"></div>
</div>
</body>
魔鬼代码本身:
body { 填充:0px; 保证金:0px; }
width: 100%;
height: 110px;
}
width: 100%;
height: 12px;
background-image: url('../images/core/nav_topspacer.jpg');
}
width: 100%;
height: 88px;
background-image: url('../images/core/nav_main.jpg');
}
text-align: center;
width: 800px;
height: 88px;
margin-left: auto;
margin-right: auto;
}
float: left;
width: 164px;
height: 88px;
background-image: url('../images/core/logo.png');
background-position: 0px 20px;
background-repeat: no-repeat;
}
float: right;
width: 400px;
height: 88px;
}
font-family: Arial, Verdana, sans-serif;
text-align: right;
font-size: 13px;
color: #FE9900;
font-weight: 600;
padding-top: 40px;
word-spacing: 15px;
letter-spacing: 1px;
margin: 0px;
}
width: 100%;
height: 10px;
background-image: url('../images/core/nav_botspacer.jpg');
}
答案 0 :(得分:4)
通过在您的doctype上方留下评论,您将使IE进入怪癖模式,这会让渲染成为一场噩梦。
删除评论,并且在doctype声明上方没有任何文字,空格或任何内容。
答案 1 :(得分:0)
尝试使用此标记:
<div id='header'>
<div class='center'>
<div id='logo'><h1><a href='' title=''></a></h1></div>
<ul id='navigation'>
<li>SERVICES</li>
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</div>
</div>
这样的造型:
#header{
background:#cae1e9;
border-top:12px solid #7ebdce;
border-bottom:10px solid #a8d2de;
height:88px;
}
.center{
width:800px;
margin:auto;
}
然后可能只是浮动徽标在左边,浮动导航到右边或做任何你想要的。但是这种makup更容易理解,也许可以看出错误在哪里。
将这与保罗给你的答案相结合,我认为就是这样。