-2

コンテンツをページの中央に配置することがいかに「簡単」であるかについて、ウェブ上でたくさんのデモを見てきました。ヘッダーがブラウザ ウィンドウの幅全体を占めるようにする方法を見つけましたが、コンテンツを中央に配置しようとすると、すべてのブラウザがページの幅を拡張するため、水平スクロールバーが表示されます。もう 1 つの問題は、ヘッダーがブラウザーの他の部分とは異なる色であるため、本文を変更すると、ヘッダーの幅が変更され、ウィンドウが色で塗りつぶされないことがあります。このウェブサイトは、私が達成しようとしていることの良い例ですhttp://carlodiego.businesscatalyst.com/

また、ヘッダーにoverflow: none;を持たせたいです。誰かがブラウザ ウィンドウを小さくすると、ヘッダーが消え始めるようにします。私は何時間もこれに取り組んできました。以下は私のコードです。申し訳ありませんが、それは長いです。

<body>
<header>
    <div id="wrapper">
        <div id="fixed">
            <div id="menu-container">
                <ul id="navigationMenu">
                    <li><a href="#" class="normalMenu">Home</a></li>
                    <li><a href="#" class="normalMenu">About</a></li>
                    <li><a href="#" class="normalMenu">Work</a></li>
                    <li><a href="#" class="normalMenu">Contact Me</a></li>
                </ul>
            </div>
            <div id="title">
            <h1>Alex</h1>
            <h1 id="last">Chaparro</h1>
            </div>
        </div>

</header>

        <div id="background">

        <div id="front-end">
           <h1>Front-End <br> Developer</h1>
        </div>
        <div id=content>

            <h1 class="heading">About</h1>
            <p>content</p>

            <h2>Currently Using</h2>
            <p>More Content...</p>

            <h2>Currently Following</h2>
            <p>Chris Mills | David Sawyer Mcfarland | Phil Thompson </p>

            <h1 class="heading">Work</h1>

        </div>
      </div>
</div>
</body>


body {
    margin: 0;
    padding:0;
    border: 0;
    font-size: 100%;
    line-height: 1.5;
    font-family: 'optimusprincepssemiboldRg';
    background: #fafafa;

    background-color: #eeeeee;
    }



article, aside, audio, canvas, datalist, details, figcaption, figure, footer, header, hgroup, menu, nav, section, video {
    display: block;
}

#title {
    font-family: 'optimusprincepssemiboldRg';
    color: black;
}

#last {
    font-size: 400%;
    line-height: 0;
    margin-top: 40px;
}

#menu-container {
    position: absolute;
    margin-left: 420px;
    white-space: nowrap; /* stops text from wrapping */
    overflow: hidden;
}

#background {
    background-color: #eeeeee;
    position: absolute;
    height: 100%;
    margin-top: 20px;
    margin-left: 20%;
    margin-right: 20%;
}

#front-end {
    margin-top: 100px;
    font-size: 200%;
    width: 100%;
    text-align: center;
}

.heading {
    font-size: 300%;
}

#fixed {
    position: relative;
    height: 200px;
}

header {
    width: 100%;
    overflow: hidden; /*This stops the color from going away*/
    background-color: #cee3ee;
}

#wrapper {
    margin-left: 20%;
    margin-right: 20%;
}
4

1 に答える 1

0

headeraとmaindivが必要です。配置しabsoluteます。margin:0px auto;メインのセンタリングに使用します。

このようなものhttp://jsfiddle.net/WAR4r/

于 2013-03-17T03:49:46.167 に答える