2

これはテーブル以外のレイアウトでの私の最初の試みであり、私は本当に苦労しています。私は文字通り試行錯誤を繰り返し、投稿や記事を調査/読んでいます。したがって、誰かが「質問して答えた」と言ってこの質問を閉じることを勧める前に、私に聞いていくつかの提案をしてください。どうもありがとうございます。

2つの画像があります。1つはページの上部にあるヘッダー用で、もう1つは左側のヘッダー画像のすぐ下にあるナビゲーションメニュー用です。タイトルがヘッダー画像の上に表示され（問題ありません）、リンクの単純な順序付けられていないリストがナビゲーション画像の上に表示されます。ナビゲーション画像は、明らかに、一番上の画像に「接続」されているかのようにシームレスに表示されます。php includeを使用して、これらをサイトのすべてのページに配置します。これら2つの画像とメニューが適切に配置されたら、個々のページのコンテンツをヘッダーの下とナビゲーションメニューの右側に配置します。

この時点での私の苦労は、a）ナビゲーション画像がまったく表示されない理由、およびb）メニューがページの中央に表示される理由を理解しようとしています。

ナビゲーション画像にimgタグを使用すると、ページに表示されるので、ブラウザがそれを「見つける」ことができないわけではありません...

divにあるため、ナビゲーション画像が表示されませんか？ここで何が欠けていますか？

また、これは可能な限りクロスブラウザー互換である必要があります（IE7 +、FF3.6 +、Safari、Chrome以上）。

コード：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Some Website</title>
</head>
<body style="margin: 50%; padding; 0; width: 1000px; font-size: .8em; background-image: url(images/header.png); background-repeat: no-repeat; background-attachment: fixed; background-position: center top;">

    <div id="navMenu" style="background-image: url(images/navBackground.png); background-repeat: no-repeat; background-attachment: fixed; background-position: 0px 200px;">
        <ul>
            <li>Home</li>
            <li>Business Directory</li>
            <li>City Government</li>
            <li>Community Calendar</li>
            <li>News</li>
            <li>The Story of the Thing</li>
            <li>The History of Somewhere</li>
            <li>The Park</li>
            <li>Churches and Schools</li>
            <li>Recreation</li>
            <li>Fire Department</li>
            <li>Map</li>
            <li>Contact Us</li>
        </ul>
    </div>
</body>

参考までに、header.pngは1000x200px、navBackground.pngは200x500pxです。

4

2 に答える 2

2

背景画像が表示されないのは、「background-attachement: fixed」を使用しているためです。それを削除すると、背景の位置は、それが添付されているコンテナに対して相対的になります。

もう一つの問題は、ナビの位置です。スタイル「margin: 50%」は、ページ幅のパーセンテージを取得し、コンテナーの 4 つの側面すべてに適用します。静的な幅をピクセル単位で設定するか、省略形を使用して余白を正しく設定すると、より望ましい結果が得られます。これは、「margin: 200px auto」を使用する略記の例です。そうすることで、より良い位置に並べることができます。速記について詳しくは、次のページをご覧ください: http://www.dustindiaz.com/css-shorthand/

また、スタイルシートを外部化してマークアップをクリーンアップすることをお勧めします。基本的に、ドキュメントのヘッドでスタイルシートにリンクし、クラス名と ID で要素をターゲットにします。この投稿をチェックしてください: http://www.tizag.com/cssT/external.php

于 2012-11-19T17:41:31.550 に答える
0

CSSで、このcssを#navMenuから削除できます

#navMenu { background-attachment: fixed; }

また、画像の背景位置を再確認することもできます。

それを取り除くと、背景画像が表示されます。

2番目の問題に関しては、ページの本文に50％のマージンがあるため、ページの中央に配置されます。これにより、すべてがそのように中央に配置されます。

于 2012-11-19T17:40:16.927 に答える