ウィンドウサイズを小さくした時にコンテンツ（画像、テーブル位置）などが動くため、ずれてしまう。

Question

ウィンドウサイズを小さくした時にコンテンツ（画像、テーブル位置）などが動くため、ずれてしまいます。

ウィンドウサイズを小さくした時に、コンテンツは隠れてもいいので動かないようにするためには
どうすればよいでしょうか。

ご教授お願い致します。

Answer 1

cssのposition: fixed;で指定してあげれば、ブラウザを小さくしても動きません。
cssで直接値を変えなければコンテンツは動かないように出来ます。

#id名または.クラス名{
position: fixed;
top: 0px;
left: 0px;
}
などで指定出来ます。

Comments

[shar0430]

具体的には、Webページ上部に横に５つメニューボタンがあるのですが、
すでにposition: fixedで固定しており、スクロールしても動かないようにしているのですが
ブラウザを横に狭めていくと、メニューボタンも右から左に付いてきてしまうんです。
これを隠れてもいいのでずれないようにしたいんです。
言葉足らずで申し訳ありませんが。。

[shar0430]

style="position:fixed;right:700px;top:50px;"
上記のようにしているのですが、ウィンドウの位置を基準に右に700px、上から50pxの
位置に常にあるようにしているので、ウィンドウを小さくした場合もそれが適用されて
いるためにずれるのだと思います。これをずれないようにしたいです。

Answer 2

こういう感じでしょうか？

http://jsfiddle.net/byron222/dyr4ss99/embedded/result/

Answer 3

幅が指定されていないからでは？
width:700px とか指定する。
min-width:700px とかでもいけるんじゃないかしら。

ウィンドウの位置を基準に右に700px、上から50pxの

右の壁から７００px、という意味ですよ。
right と　top で位置だけ指定したので、幅と高さを指定すればその位置で崩れないようにキープできるはずです。

Comments

[shar0430]

皆様ありがとうございました。
BAは迷いましたが、こちらの方の回答が参考になったので。
right とtopしか固定していなかったところをleftでも固定したら付いてこなくなりました。

Answer 4

メニューの幅をcssでpx指定してあげれば、幅を変えてもついてくるようなことはなくなると思います。
ソースがわかればもっと詳しくアドバイスもできるとおいます。