画面サイズ変更時のレイアウトの崩れ

質問

サイトをHTML+CSSで作成しているんですが
ブラウザのサイズが最大化のときは平気なのですがサイズを変更する（縮める）とライン画像がはみ出したりリストが縮める側に寄ってしまったりとレイアウトが崩れてしまいます。
これを直す方法はあるでしょうか？

背景は1024×50の画像をy軸でリピートさせています。
レイアウトのほうは見出し画像の右にリストを横に表示させ、その下にナビゲーションを配置しています。
最大化時、縮小化時ともに縦、横のスクロールがなぜか表示されません。

回答No.2

Crossing11 · ベストアンサー

スクロールバーが表示されないのが問題なのでしょうか？
テンプレートを使っている場合は、デフォルトで表示されないようにしてあったりする場合があると思います。

overflow-x:hidden;
overflow-y:hidden;
などがないか確認してみるといいと思います。

お礼

ありがとうございます。スクロールバーのほう表示されるようになりました！

回答No.3

cyokokichi

CSS2の仕様書では、UAは閲覧領域のサイズによって文書のレイアウトを変更してもよい。
領域が文書の初期包含ブロックより小さい場合、UAはスクロールバーを提供する。
初期包含ブロックの横幅はルート要素の'width'プロパティで指定する。
'width'が'auto'を取る場合はUAが初期幅を決定する
（たとえば、その時点における閲覧領域の幅など）。
と書かれています。
'width'の初期値は'auto'のブラウザが多いです。
そんなことで
html {width:1024px}
をCSSに追加すると問題が解決されます。

お礼

お返事ありがとうございます。
おかげさまで直りました！

回答No.1

koutarou504

＞これを直す方法はあるでしょうか？
直すという意図が不明なのと、情報不足で詳細は答えられませんが・・・。

まず単にある条件では期待通りに見えて、それ以外だとレイアウトが崩れるのを回避する方法は、単にサイズ指定をすれば良いだけです・・・。
スクロールバーなど面倒な物が現れて、嫌われたりしますが・・・。

次にスクロールバーも出さずに対応したいなら、事前に画面サイズを変更しながら検証していろいろ妥協しながら少なくとも崩れない様に記述するという事です。
ただ、これも気をつけないとブラウザ等の環境によっては異なる事もあるので、よくよく注意が必要です。

最後に、とにかく崩れたレイアウトは避けたいというのなら、望むレイアウトは諦めるという事です。

結局、情報不足で個々の対処は回答できません。
また、質問文の曖昧さにより何を答えて良いかも困難です。
＞これを直す方法はあるでしょうか？
「あるかもしれません。」という回答で済ます訳にもいかないでしょうが、文章だけを単純に解釈すると方法の有無だけ答えて終りでも・・・。

＞最大化時、縮小化時ともに
そもそも問題なしと基準としている解像度の提示もないし、どの様な崩れ方をしているかの問題点の提示もないし、なによりどの様に期待する物を実現しているのかの明示もないので・・・。

極端な対応方法を言えば、問題なしの表示をキャプチャしたりして画像化して、それを表示する様に変えるというのも、「直す」という方法のひとつなのですが・・・。
（極端ですが、望む物の内容によっては、本当に画像化とかFlash化とか冗談みたいだけどそれしか方法がない事もありえます・・・。）

お礼

申し訳ありません。あまりに情報不足でした；