1

ページの左右両側に固定ヘッダーと 25 ピクセルのパディングがあるレスポンシブ サイトのフレームワークを構築しています。コンテンツのパディングや幅に問題はありませんが、表示が小さすぎると固定ヘッダーがブラウザーの右側からはみ出してしまいます。ヘッダーがページの残りの部分と同じルールとデザインに従い、ディスプレイが最小幅よりも狭い場合を除き、常に 25 ピクセルのパディングを表示したいと考えています。

どんな助けでも大歓迎です。これはかなり単純に思えますが、私は髪を引っ張っています。

CSS:

#main {
    padding: 0 0px 0 25px;
    min-width: 725px;
    max-width: 1000px;
    margin: 0 auto;
}

#page {
    padding: 0 25px 0 25px;
    display: block;
    margin: 0 auto;
    max-width: 1000px;
    min-width: 725px;
    position: relative;
}

ul#header-nav {
    margin: 33px 0px 0 0px;
    list-style:none;
    width:500px;
    font-family: "ss-bol", Helvetica, Arial, sans-serif;
    overflow: hidden;
}

ul#header-nav li a {
    text-decoration:none;
    padding-left: 30px;
    color:#000000;
    float:left;
    text-align: right;
    display:inline;
}

#container {
    padding-top: 100px;
    left: 0;
    height: 100%;
}

#header-main {
width: 100%;
margin: 0 -25px 0 0px;
}

#header-frame {
z-index: 10;
    background-color: #c9dcb1;
    float: right;
}

#header-box {
    width: 100%;
    max-width: 1000px;
    min-width: 725px;
    padding-left: -25px;
    height: 100px;
    background-color: #ffffff;
    margin:0px;
    position: fixed;
    background-color: #c9dcb1;
z-index: 11;
}

#content {
padding-top: 100px;
width: 100%;
background-color: #75efe8;
}

HTML:

<body>
    <!-- BeginHeader -->
    <div id="page" class="clearfix heed">
        <div id="header-main">
        <div id="header-box">
            <div id="header-frame">
                <ul id="header-nav">
                    <li><a href="#">NEW</a></li>
                    <li><a href="#">SHOP</a></li>
                    <li><a href="#">WINE</a></li>
                    <li><a href="#">BLOG</a></li>
                    <li><a href="#">LOOKBOOK</a></li>
                    <li><a href="#">ABOUT</a></li>
                </ul> 
            </div>
        </div>
    </div>
        <div id="content">
            TEST CONTENT TEXT
        </div>
    </div>
</body>

4

2 に答える 2

4

padding、margin、border が要素の with に追加されます。したがって、ディスプレイが小さすぎる場合、 を伝えるmax-width: 1000pxことで、パディングのために 1050px を意味します。

width: 100%簡単な解決策は、この左右のセットを 0に置き換え、内側のコンテンツを中央に配置することです。

<div id="header-box">
    <div class="inner">header</div>
</div>

#header-box {
    max-width: 1000px;
    min-width: 725px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
}
#header-box .inner {
    max-width: 1000px;
    margin: 0 auto;
}
于 2012-09-29T18:12:31.413 に答える
-1

サイモン、私はあなたのアプローチの基本を取り、それを拡張して必要なものを手に入れました.

最終的な CSS は次のとおりです。

#header-wrapper {
    padding: 0;
    margin: 0;
}

#header {
    position: fixed;
    width: 100%;
    min-width: 800px;
    height: 100px;
    z-index: 9;
    background-color: #ffffff;
}

#header .inner {
    margin: 0 auto;
    padding: 0 25px 0 25px;
    max-width: 1000px;
    height: 100px;
    z-index: 10;
    background-color: #ffffff;
}

ul#header-nav {
    margin: 58px -20px 0 0px;
    list-style: none;
    width: 500px;
    font-family: "ss-bol", Helvetica, Arial, sans-serif;
    font-size: 14px;
    overflow: hidden;
}

ul#header-nav li a {
    text-decoration: none;
    padding-left: 30px;
    color: #000000;
    float: left;
    text-align: right;
    display: inline;
}

そしてHTML：

<div id="header-wrapper">
<div id="header">
    <div class="inner">
        <div class="right">
        <ul id="header-nav">
        <li><a href="#">NEW</a></li>
        <li><a href="#">SHOP</a></li>
        <li><a href="#">WINE</a></li>
        <li><a href="#">BLOG</a></li>
        <li><a href="#">LOOKBOOK</a></li>
        <li><a href="#">ABOUT</a></li>
        </ul>
        </div>
    </div>
</div>

再度、感謝します！

于 2012-09-30T23:20:03.897 に答える