このページのオレンジ色の通知のように、ページ上部に細いバナーを置く必要があります。私はそれをクリックすると（現在のページ上で、現在のページを押し下げるのではなく）ドロップする必要があるので、絶対に配置する必要があります。バナーはウィンドウの幅全体を引き伸ばす必要がありますが、内容は中央で800ピクセル以内に収まる必要があります。私はすでにそれを作っていますが、CSSの位置付けに問題があります。CSS：ページ上部に薄いバナー（このページのオレンジ色のようなもの）
ありがとうございます！
以下は例です。メインの#banner要素はフルスクリーン表示され、position: absolute; top: 0; left: 0を使用してビューポートの上部に固定されます。 width: 100%は全幅を伸ばします。
#banner-contentは、あなたのコンテンツを置く場所です。これは中央に配置され、幅800pxで固定されます。私はあなたが見ることができるようにそれの周りに境界線を置いた。
注：また、すべての要素の余白と埋め込みをリセットして、デフォルトの埋め込みをクリアしました。あなたは最終的なアプリケーションでEric MeyerのReset CSSのようなものを使いたいかもしれません。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test</title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
div#banner {
position: absolute;
top: 0;
left: 0;
background-color: #DDEEEE;
width: 100%;
}
div#banner-content {
width: 800px;
margin: 0 auto;
padding: 10px;
border: 1px solid #000;
}
div#main-content {
padding-top: 70px;
}
</style>
</head>
<body>
<div id="banner">
<div id="banner-content">
This is your banner text, centered and fixed at 800px in width
</div>
</div>
<div id="main-content">
<p>Main page content goes here</p>
</div>
</body>
</html>
#banner {
position: absolute;
top: 0px;
left: 0px;
margin: 0 auto;
text-align: center;
}
#banner_contents {
width: 800px;
}
2つのdivを作成するのと同じくらい簡単にする必要があります。メインのものはコンテンツ1をラップし、中央に配置します。
これは、OPが必要とするものではありません。テキストを中央に配置しますが、内側のdivは配置しません。外側余白：0 autoも冗長です。 – alex
似たような問題を研究しながら、私はこれのための手伝いを作った：http://jsfiddle.net/marvo/FJZfW/ – Marvo