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