-2

我在网上看到了大量关于将内容集中在页面上是多么“简单”的演示。我想出了如何让我的标题占据浏览器窗口的整个宽度但是每当我尝试将我的内容居中时，我的所有浏览器都会扩展页面的宽度，所以我最终有一个水平滚动条。另一个问题是我的标题与浏览器的其余部分颜色不同，所以当我对正文进行更改时，有时它会更改标题的宽度，这样颜色就不会填满窗口。这个网站是我努力实现的一个很好的例子http://carlodiego.businesscatalyst.com/

我也希望我的标题有溢出：无；这样如果有人让浏览器窗口变小，标题就会开始消失。我已经为此工作了几个小时，无论我做什么其他事情都会中断。下面是我的代码。对不起，但它很长。

<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

你想要一个header和maindiv。并使它们absolute定位。并margin:0px auto;用于居中主要。

像这样http://jsfiddle.net/WAR4r/

于 2013-03-17T03:49:46.167 回答