CSSのデザインがうまくいきません

質問

表示ファイル
http://www.loplopland.com/newfile.html

CSSファイル
http://www.loplopland.com/sample_l_180_490.css

この外部CSSで直したいところは
１．フッターの上の部分に余白ができてしまったので消したい。
２．メイン表示部分が下までバックグラウンドイメージを表示したい。
以上の２点を改善したいんですが、うまくいきません。
どのように直したらいいかご教授下さい。
おねがいします。

回答No.3

noname#76085 · ベストアンサー

おそらく、ブラウザはInternet Explorerを使われていると思いますが、私は普段「Firefox（http://mozilla.jp/firefox/）」と「Opera（http://jp.opera.com/）」を普段ブラウザとして使用しています。

Firefox/Operaともにフッターの上の部分の余白はありません。
これは、W3Cが勧告（強制ではない）しているCSSの視覚効果に対して、IEが勧告通りに描画していないため起きているものと思われます（※）。

Firefox/Operaともに無償で利用できるので、一度IEではなくFirefoxなどで視覚効果がどう描かれているか見てください。レイアウトが崩れているはずです。
レイアウトの崩れは、.mainのwidth＋.mainのpadding＋.sideのwidth＋.sideのpadding＝840pxになるので、#containerの width:800px;におさまりきれないため発生しているので、containerのwidthを広げる（840px以上）か、main/sideの大きさを調節することで解決します。

サイトを作る際は、IEを過信しないことです。
現状では、IEはW3Cの勧告通りに表示しているとは限りません。Firefoxが、勧告により近い描画をしている、と言われています。

※）ブラウザごとにスタイルシートを分けて表示させる、ということも可能のようですが、それについては私の知っているモノの範疇を超えてしまっているので、下手に私が回答をするより、別の方の回答を待った方がいいでしょう。

お礼

あなたの言うようにOperaとFirefoxの二つを私もインストールしてみました。ずいぶん表示されるものが違ったのでびっくりしましたが、思い切って最初から作り直して３つのブラウザで表示できるようにすることができました。
ありがとうございました。

回答No.2

noname#76085

> 真似して書いただけなので理解はしていません。
先人の知恵に学ぶことは決して悪いことではありません。ですが、真似をしただけではダメです。

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
このmetaタグの後半、「charset=Shift_JIS」とありますが、これは、『このファイルはShift_JISの文字コードを使用している』という意味になりますが、ファイルを拝見したところ、実際に使用している文字コードはUTF-8のようです。なので、「charset=UTF-8」とするべきです。

HTMLやCSSを、テキストエディタで作成（タグ手打ちなどと言われることもあります）するときは、HTML＆CSS辞典、というような本を手元に置いて、「これはどんな意味があるのか？」と探求しながら作成していかないと。
それがめんどくさい、と思ったのであれば、HTML作成ソフト（無償で使えるものだと、私の知る範囲ではalpha Edit（http://www.pololon.com/koby/）のようなソフトを使用して作成した方がよろしいかと思います。

補足

ご指摘の件は理解できましたが、
１．フッターの上の部分に余白ができてしまったので消したい。
２．メイン表示部分が下までバックグラウンドイメージを表示したい。
は結局自分で調べなさいということですか？

回答No.1

noname#76085

まず先に、HTMLファイルのソースを拝見して４行目、

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

このタグの意味を理解していますか？

補足

どこかのウェブページにあったテンプレートのヘッダ部分を真似して書いただけなので理解はしていません。