htmlファイルを開くパソコンによって、サイト内の配置が変わってしまうのを防ぐにはどうしたらいいのでしょうか。

質問

ＸＨＴＭＬとＣＳＳで趣味のウェブサイトを作成している大学生です。といってもまだ、ネット上にはアップロードはしていない状態です。

サイト作成のためのファイルは、今までUSBフラッシュメモリに保存していたのですがバックアップのために、自分のノートパソコンのハードディスクと大学のパソコンの両方に保存してみました。

試しに自分のノートパソコンでトップページのhtmlファイルを開いてみたら、メインとするべき本文が画面の上に位置しメニューがその下にきてしまっていました。

本来の配置は、メインとする本文を右側にして幅は1000pxに指定しています。メニューなどはその左側に位置させて160pxに指定しています。

しかし、なぜかおかしくなってしまいました。大学のパソコンからhtmlファイルを開くとそんなことにはならないのですが…
どうしたらよいのでしょうか。なぜこうなってしまったのかわかりません。

もちろん、両方のパソコンに保存してあるファイルの記述は同じです。

一応、ＣＳＳの記述をこちらに書いておきます。

h1{
text-align:center;
margin:10px
}
h2{
text-align:left
}
li{
text-align:left;
line-height:200%
}
address{
text-align:right;
border-top:2px solid;
margin-top:1200px
}
body{
background-color:#ADFF2F;
margin:0;
padding:0
}
.main{
float:right;
width:1000px
}
.menu{
float:left;
width:160px;
margin-top:80px
}
.menu ul{
border-top:13px solid #003366;
border-left:1px solid #003366;
border-right:1px solid #003366;
border-bottom:1px solid #003366;
margin:0;
padding:0
}
.menu li{
line-height:normal
}
.info{
float:left;
width:160px;
margin-top:0px
}
.position{
margin-top:450px
}

どこを直したらよいのでしょうか。どんなパソコンの画面でみても同じ配置になるようにしたいのです。

どうかご教授よろしくお願いします。

回答No.1

123isao · ベストアンサー

パソコンの違いというよりブラウザの違いですね。
float使うと横幅が足りないと下にずれ込みます。
margin,paddinをいじると改善すると思います。
css自体バグとかありますし、どんな環境でも同じにしたいのであれば
テーブルレイアウトに変更するのが手っ取り早いのではないでしょうか。

お礼

CSSでページの幅を指定する方法を見つけました。

＞テーブルレイアウトに変更するのが手っ取り早いのではないでしょうか。

テーブルだと表となって罫線が表示されてしまうのが嫌なんです。

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

回答No.2

MAN_MA_RUI

幅1000pxが物凄く気になる。狭い画面で見ると横スクロールバー出ないんでしょうかコレ。
なるべくそういうのは%などの単位で設定すべきだと思います。

お礼

＞横スクロールバー出ないんでしょうかコレ

出ませんでしたよ。

＞なるべくそういうのは%などの単位で設定すべきだと思います。

わかりました。どうもありがとうございました。