【 ＨＰ作成質問箱 】

【ＨＰ作成質問箱/詳細】　一覧 / 詳細

　 No.9655　ブラウザのウィンドウサイズによってレイアウトが乱れる

[J/R] [ブラウザ]　 08/03/18 (火) 04:50

はじめまして。

タイトルについて自分なりに色々調べてみたのですが、どうしても自己解決できなかったので皆様の知恵をお貸しください。

alphaEDITを使ってHPを作成し、試験的にインターネット上で公開してみたのですが、どうもブラウザの種類や、ウィンドウサイズによって自分が意図しているレイアウトとは違った表示のされ方をしてしまいます。

ブラウザによってレイアウトが乱れてしまうのは仕方ないことだと思うのですが、ウィンドウのサイズによって画像やテキストの位置が変わってしまうのはどうしても改善したいと思っています。

私はノートPCでHPを作成しているので、1024×768のサイズでは正しく表示されるようなのですが、それより大きい（もしくは小さい）ウィンドウサイズで見たときに画像の表示位置がずれたり、テキストが画像の下に埋もれて読めなくなったりするようです。

ブラウザのウィンドウサイズに左右されることなく、レイアウトを統一するにはどうすれば良いでしょうか？

ちなみに私はIE6.0でレイアウトを確認しています。

ご教授の程よろしくお願いいたします。

▼

▼

▼

　 No.9656　Re:ブラウザのウィンドウサイズによってレイアウトが乱れる

[atom] [ブラウザ]　 08/03/18 (火) 10:11

上のタイトル部はセンタリングを行ってるようですが、
中央から下は「position: absolute;」を使ってますので左上からの座標位置で決まってしまいます。

「absolute」は完全に固定位置で表示されますので、タイトル部を左寄せにすればいいでしょう。

▼

▼

▼

　 No.9657　Re^2:ブラウザのウィンドウサイズによってレイアウトが乱れる

[J/R] [ブラウザ]　 08/03/18 (火) 18:15

回答ありがとうございます。

トップページのタイトル部は、ご指摘の通り左寄せにしてみました。

あともう一つお教え頂きたいのが、画像と同じように、テキストも絶対位置指定で表示位置を固定するにはどうすれば良いでしょうか？

http://

こちらのページをご覧頂きたいのですが、画像は絶対位置指定しているので、ウィンドウサイズを大きくしようが小さくしようが表示位置は変わらないのですが、テキストは表示位置の指定を行っていないので、ブラウザを小さくすると文字がスライドするように表示位置がずれてしまいます。

テキストをドラッグして絶対位置指定をしても上手くいきませんでした。

alphaEDITで編集する場合、具体的にどのような操作をしてやれば良いでしょうか？

▼

▼

▼

　 No.9658　Re^3:ブラウザのウィンドウサイズによってレイアウトが乱れる

[J/R] [ブラウザ]　 08/03/18 (火) 21:03

色々試行錯誤してみたのですが、もう少し自分で調べていじってみようと思います。

質問に答えて頂きありがとうございました。

あと、記述していたURLは、サイトがまだ未完成なこともあり、このような場所で公開し続けておくのもどうかとおもったので削除しました。

ありがとうございました。

▼

▼

▼

　一覧 / 詳細