Упрямый фиксированный DIV внутри 100% DIV - PullRequest
0 голосов
/ 04 июня 2010

Это должно быть самой частой проблемой в моей жизни!

Я должен разместить фиксированный DIV (800px) внутри 100% DIV, и, как всегда, он отлично работает во всем, кроме IE. Я попробовал старый трюк с выравниванием текста, но на этот раз ничего не получалось, просто не могу заставить его работать

Если вы хотите проверить фактическую страницу на ее www.chunkydesign.com, и любой ответ будет принят с благодарностью.

Вот HTML (CSS ниже)

<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 ]

4 голосов
/ 04 июня 2010

Оставляя комментарий над своим типом документа, вы переводите IE в режим причуд, что делает рендеринг кошмаром.

Удалите комментарий и НЕТ текста, пробелов или чего-либо выше вашего объявления типа документа.

0 голосов
/ 04 июня 2010

Попробуйте использовать эту разметку:

<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;
}

Тогда просто, возможно, разместите логотип слева и попробуйте навигацию вправо или делайте что хотите. Но этот вид макупа гораздо проще понять и, возможно, увидеть, где ошибка.

Объедините это с ответом, который Павел дал вам, и я думаю, что это так.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...