在100%DIV中固执的固定DIV

时间:2010-06-04 11:39:25

标签: html css

这一定是我生命中最常出现的问题!

我必须在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; }

navContainer {

width: 100%;
height: 110px;

}

navTopSpacer {

width: 100%;
height: 12px;
background-image: url('../images/core/nav_topspacer.jpg');

}

navMain {

width: 100%;
height: 88px;
background-image: url('../images/core/nav_main.jpg');

}

navContent {

text-align: center;
width: 800px;
height: 88px;
margin-left: auto;
margin-right: auto;

}

navLogo {

float: left;
width: 164px;
height: 88px;
background-image: url('../images/core/logo.png');
background-position: 0px 20px;
background-repeat: no-repeat;

}

navLinks {

float: right;
width: 400px;
height: 88px;

}

navLinks h1 {

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;

}

navBotSpacer {

width: 100%;
height: 10px;
background-image: url('../images/core/nav_botspacer.jpg');

}

2 个答案:

答案 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更容易理解,也许可以看出错误在哪里。

将这与保罗给你的答案相结合,我认为就是这样。