ホームページ作成初心者です。以下のサイトをdreamweaver cs4で作成しました。
http://www.geocities.jp/de_chirico_1911/
IE7で見るとレイアウトが崩れてしまうようです。IE8や最新のfirefoxを使用するとちゃんと表示されます。
おそらく右側の緑の画像に対して回り込む設定がIE7では無視されているのかと思います。どこを直せば、きちんと表示されるのか教えていただけたら幸いです。
どうぞよろしくお願いいたします。
No.1ベストアンサー
- 回答日時:
フロートしているのが
.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年時点の考え方です。
参考になればと思います。
ご親切な指導、ありがとうございました。
正直、自分のレベルでは理解できなかった部分が多くあるのですが、同じような悩みの方の参考にはすごくなると思うので、これで締め切らせていただきます。
これからも勉強を続けて、アドバイスいただいた事項を再チェックしてみます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Firefox(ファイヤーフォックス) Firefoxでグーグルの検索画面が変です 2 2022/09/20 19:25
- その他(IT・Webサービス) google サイトの目次表示について 1 2023/06/17 23:24
- HTML・CSS HTMLとCSS(ブラウザ関連)について質問です。 1 2023/03/07 08:07
- Chrome(クローム) Webサイトの表示崩れの原因と対策 1 2022/08/01 23:16
- Windows 10 「新規作成」メニューが表示されません 2 2023/04/07 14:56
- HTML・CSS 詳しい方に質問です。 早急に解決したいと思っています。 ポートフォリオをMacBook で作成したと 2 2023/05/12 17:40
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- その他(IT・Webサービス) ホームページにカウント数を表示する 2 2022/10/28 10:37
- Windows 8 Route Generator の使い方 1 2023/05/03 00:36
- Windows 10 Windows10 の設定?について (長文ですがよろしくお願いします)m(_ _)m 3 2022/05/14 12:22
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ASP.NETでプレーンなページに文...
-
Excel VBAでのIE操作でクリック...
-
VBAでの素数の求め方
-
行頭から全角で3文字位さげた...
-
htmlの文字が縦書きになる
-
HTML属性での「""」 「''」違い
-
【ヒトの神秘】美男美女から何...
-
リストマーカーをボックス内に...
-
ボタンをセル内一杯に表示させ...
-
<div id="container">の使いか...
-
<table>の高さ固定。情報増加時...
-
質問1.
-
htmlのolやulなどlistにtitleや...
-
idの中のid指定
-
サイトにjQueryが使用されてい...
-
html/cssの、navを2段にする...
-
リンクをつけた画像をクリック...
-
個別にリンクの色を変える方法
-
border-style:solidで文字がずれる
-
<h1>、<h2>と<p><div>の行間を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ASP.NETでプレーンなページに文...
-
pythonでのカーソル移動がずれる
-
cnt <= (others => '0'); の意...
-
Excel VBAでのIE操作でクリック...
-
検索結果がツリー状に表示され...
-
VBAでの素数の求め方
-
秀丸で複数行コメントアウトを...
-
質問です。 新規登録ボタンが全...
-
chromedriverのver-upで動作不...
-
safariで見るとページ上部に余...
-
Firefoxで別ページのアンカーリ...
-
行頭から全角で3文字位さげた...
-
プログラマーの方に質問です。 ...
-
背景が動くWEBページの作り方に...
-
css リンクの色が全部変わって...
-
Ajaxで文字列を表示したいです。
-
同じIE8なのに機種によってmarg...
-
携帯サイトの背景色
-
VBA : QueryTableでのスクレイ...
-
htmlの文字が縦書きになる
おすすめ情報