3

サイトのレイアウトを作成していますが、何らかの理由でヘッダーが HTML バージョンのドキュメントに表示されません (テキストがまったく表示されません)。テキストをすばやく比較的簡単に挿入できるように、ページを分割する方法を見つけようとしています (テンプレートを作成するようなものです)。また、メニュー バーと小さなフッターを追加しようとしています。レイアウトは次のようになっているはずです: コンテンツにオーバーレイされたグラデーション。コンテンツのレイアウトにはヘッダーがあり、そのすぐ下にメニュー バーがあり、残りのコンテンツは 2 つのセクション (「左」と「メイン」) に分割され、下部には非常に小さなフッター (著作権を保持するのに十分なだけ) があります。 ）。コードは次のとおりです。

HTML:

<!DOCTYPE html>
<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <title>Welcome to AskMeMore.Org!</title>
</head>
<body>
    <div id="background">
        <img src="gradient.jpg" height="50%" width="100%" />
    </div>
    <div id="overlay">
        <div id="content">
            <div id="body">
                <div id="header">Header</div>
                <div id="left">Hi</div>
                <div id="main">Welcome</div>
            </div>
        </div>
    </div>
</body>
</html>

CSS:

#background {
    background-repeat:repeat-x;
    position:relative;
    z-index:1;
}
#overlay {
    position:relative;
    top:-975px;
    left:15%;
    z-index:10;
    background-color:#FFFFFF;
    width:70%;
}
#content {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    background-color:#FFFFFF;
}
#header {
    background-color:#FFFFFF;
    position:absolute;
    top:0;
    left:0;
}
#body {
    background-color:#FFFFFF;
}
#left {
    position:absolute;
    top:0;
    left:0;
    background-color:#FFFFFF;
    width:25%;
    padding-top: 20px;
    padding-left: 20px;
}
#main {
    position:absolute;
    top:0;
    right:0;
    background-color:#FFFFFF;
    width:71%;
    padding-top: 20px;
    padding-left: 20px;
}
4

4 に答える 4

1

ここで正確に何を達成しようとしているのかはわかりませんが、ヘッダーが表示されない理由は、他の要素とまったく同じ場所に配置したためです。彼らはそれを隠しています。

いくつかの CSS チュートリアルを読むことを強くお勧めします。達成しようとしていることを正確に実行する方法を説明している非常に簡単なチュートリアルがあります。

簡単な Google オファー: http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

于 2012-08-30T16:28:14.463 に答える
1

この設定top:-975pxにより、overlay-div (およびそのコンテンツ全体)がブラウザー ウィンドウの上部から975 ピクセル上に移動します。

于 2012-08-30T16:36:01.857 に答える
0

div＃backgroundの直後の画像を使用しています。ページ全体の背景が必要だと思うので、これを削除します。

<div id="background">
    <img src="gradient.jpg" height="50%" width="100%" />
</div>

    #background {
    ..remove all styles
    background-repeat:repeat-x; // not required because you never used a background

オーバーレイdivのみを使用し、これを#overlayのスタイルとして使用します。

background: #00ff00 url('gradient.jpg') no-repeat center;
于 2012-08-30T16:10:35.300 に答える
0

問題は、左とメインの div が両方とも に設定されtop: 0ていることtop: 0です。leftとの背景は不透明 (白) であるためmain、背後のコンテンツをブロックします。

以下は、背景色で少し遊んだフィドルです。ヘッダーを赤 (正確な場所を簡単に確認できるようにするため) にし、ヘッダーleftをmain透明にしました。ここにヘッダーが表示されます。

http://jsfiddle.net/chrisvenus/RVxqM/

透明に設定する行をコメント アウトすると、上leftの行はそれを緑に設定し、これがどのように赤いヘッダー セルをブロックするかをすぐに確認できます。

解決策は 2 つあります。img最初に、そしておそらく最善の方法は、グラデーションを、コンテンツがその上に移動するのではなく、適切な CSS 背景画像にすることです。

2番目のオプションは、絶対配置を行うために包含divを作成し、その子をより伝統的に配置することです（つまり、ヘッダーを通常の位置に置き、左とメインをフローティングにするか、適切なものなら何でも。

正確な解決策はあなた自身の状況によって異なりますが、これはなぜうまくいかないのかを教えてくれるので、うまくいけばあなたに最適な解決策を見つけることができます.

于 2012-08-30T16:26:05.843 に答える