IE8では大丈夫なのに、IE7ではレイアウトが崩れる・・。

質問

ホームページ作成初心者です。以下のサイトをdreamweaver cs4で作成しました。
http://www.geocities.jp/de_chirico_1911/

IE7で見るとレイアウトが崩れてしまうようです。IE8や最新のfirefoxを使用するとちゃんと表示されます。
おそらく右側の緑の画像に対して回り込む設定がIE7では無視されているのかと思います。どこを直せば、きちんと表示されるのか教えていただけたら幸いです。
どうぞよろしくお願いいたします。

回答No.1

nori_007 · ベストアンサー

フロートしているのが

.navi {
float: right;
}

との事で
<img src="image_navi.gif" width="243" height="506" class="navi" />
<img src="image_murasaki.gif" width="299" height="286" class="navi" />

がフロートされています。

気持ちは解りますが、レイアウトはもっと大きく分かる事をお勧めします。

CSS 的に
.navi {
float: right;
}

ナビ以外、メインコンテンツの領域を意識してください。

#main {
float: left;
}

クラス指定の navi も id に変更します。

#navi {
float: right;
}

このように大きな、ブロックを作り、html では以下の通りにします。

<div id="main">
<img src="image.gif" width="614" height="103" />
<img src="image.gif" width="614" height="103" />
<img src="image_murasaki.gif" width="299" height="286" />

<table width="300" border="1" class="sinchaku">
略
</table>
</div>

します。
image_murasaki.gif を右に寄せたければ、また float させてください。

navi の部分は以下のようにします。

<div id="navi">
<img src="image_navi.gif" width="243" height="506" />
</div>

これ以外に、前宅を囲む id を用意します。

<div id="content">

　<div id="header">
　</div>

　<div id="main">
　</div>

　<div id="navi">
　</div>

　<div id="footer">
　</div>

</div>

CSS でデザインするような場合、現状では上記のような考え方が主流だと思います。雑誌とか本を読めば解説されています。本を読むことをお薦めします。

CSS がバージョンアップすれば、考え方が変わると思います。あくまでも2009年時点の考え方です。
参考になればと思います。

お礼

ご親切な指導、ありがとうございました。
正直、自分のレベルでは理解できなかった部分が多くあるのですが、同じような悩みの方の参考にはすごくなると思うので、これで締め切らせていただきます。
これからも勉強を続けて、アドバイスいただいた事項を再チェックしてみます。