0

CSSを介して中央に配置されたDIVがあります。しかし、問題は、2 番目の DIV を中央に揃えたい場合、この DIV が歪んでいるか左揃えになっていることです。「絶対位置」を持つ DIV がスクロール可能であることが重要です。また、「位置が固定されている」別の DIV には固定が含まれており、常に一番上にある必要があります。私は何を間違っていますか？画像を参照してください: http://home.arcor.de/freedownload/wrong.jpg HTML のコードは次のとおりです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//DE"
        "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//DE"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>

<head>
<title>{TITLE}</title>
<link href="site.css" type="text/css" rel="stylesheet">
</head>

<body>
<div id="top_fixed_content">
    <div id="topheader">
        <span id="topheader_logo"></span>
    </div>
    <div id="navigation"></div>
</div>
    <div id="main_content">
    <div id="main">noisy lines...</div>
    <div>
</body>

</html>

そして、これが CSS のコードです。

html {
    background-image:url(sitebg.png);
}
body {
    margin: 0px;
    padding: 0px;
}
a {
    color: #41a9ef;
    font-family: Verdana;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
}
a:hover {
    color: #ff9900;
    text-decoration: none;
}
#top_fixed_content {
    position: fixed;
    left: 50%;
    width: 1170px;
    margin-left: -585px;
    z-index: 1000;
}
#topheader {
    background-color: #fbfbfb;
    height: 103px;
}
#topheader_logo {
    position: absolute;
    top: 33px;
    left: 10px;
    background-image:url(logo.png);
    background-repeat: no-repeat;
    width: 232px;
    height: 40px;
    display: block;
}
#navigation {
    background-image:url(navigationbg.png);
    background-repeat: repeat-x;
    background-color: #48b1f8;
    height: 34px;
}
#main_content {
    position: absolute;
    background-color: #fbfbfb;
    width: 1170px;
    margin-left: -585px;
}

誰かが私を助けて解決策を見つけてくれることを願っています。どうぞよろしくお願いいたします。

4

1 に答える 1